# Blog sections > Blog index headers with a featured post, filters and pagination, and latest-posts sections for any page. URL: https://apogee.avaui.dev/docs/blog-sections Last updated: 2026-10-20 Blog index headers with a featured post, filters and pagination, and latest-posts sections for any page. Last updated October 20, 2026 Each example is a block built on [PostCard](https://apogee.avaui.dev/docs/post-card) and the layout primitives. The first sixteen open a blog index page: a heading, often an email sign-up, a featured post, category links or a search, a grid of posts and pagination. The last five show the latest posts on any page. ```sh npx @ava-ui/apogee add blog/featured-post-01 ``` Each block holds a sample `posts` array; replace it with your content collection: ```astro --- import { getCollection } from 'astro:content' const posts = (await getCollection('blog')).map((p) => ({ title: p.data.title, href: `/blog/${p.id}`, summary: p.data.description, date: p.data.date.toISOString(), image: p.data.cover, })) --- ``` ## Copy is props Every block in this family takes the same content props (`BlogContent` in `sections/_shared/blog.ts`), with its sample copy as the defaults. A block ignores the props it has no place for, so you can swap one block for another and keep the copy. The [BlogList](https://apogee.avaui.dev/docs/sections/blog-list) section takes the same names for the props they share. - `eyebrow`: The small label above the heading. - `heading`: The heading. - `description`: The line under the heading. - `items`: Posts. `date` is an ISO date string. - `locale`: Date locale; defaults to the page locale. - `categories`: The category filter. - `primaryAction`: The solid button, e.g. View all posts. - `secondaryAction`: The outline button, e.g. Load more. - Pass `null` to hide an optional part, such as `description={null}`. - Some blocks add props of their own; the top of each block’s file lists them. [ ![](https://apogee.avaui.dev/thumbs/blog-sections__featured-post-01.light.webp)![](https://apogee.avaui.dev/thumbs/blog-sections__featured-post-01.dark.webp) Featured post 01A blog index: a heading, a large featured post, category tabs with a sort menu, a grid of posts and pagination. ](https://apogee.avaui.dev/docs/blog-sections/featured-post-01)[ ![](https://apogee.avaui.dev/thumbs/blog-sections__featured-post-02.light.webp)![](https://apogee.avaui.dev/thumbs/blog-sections__featured-post-02.dark.webp) Featured post 02A centred blog header, a large featured post, then a search field and category list beside a grid of posts. ](https://apogee.avaui.dev/docs/blog-sections/featured-post-02)[ ![](https://apogee.avaui.dev/thumbs/blog-sections__featured-post-03.light.webp)![](https://apogee.avaui.dev/thumbs/blog-sections__featured-post-03.dark.webp) Featured post 03A centred header with an email sign-up, a large featured post, a grid of posts and pagination. ](https://apogee.avaui.dev/docs/blog-sections/featured-post-03)[ ![](https://apogee.avaui.dev/thumbs/blog-sections__featured-post-04.light.webp)![](https://apogee.avaui.dev/thumbs/blog-sections__featured-post-04.dark.webp) Featured post 04A header on the brand colour with a newsletter form, then a grid of posts and pagination. ](https://apogee.avaui.dev/docs/blog-sections/featured-post-04)[ ![](https://apogee.avaui.dev/thumbs/blog-sections__simple-01.light.webp)![](https://apogee.avaui.dev/thumbs/blog-sections__simple-01.dark.webp) Simple 01A centred header with search, category tabs and a sort menu, a grid of posts with a newsletter card inside it, and pagination. ](https://apogee.avaui.dev/docs/blog-sections/simple-01)[ ![](https://apogee.avaui.dev/thumbs/blog-sections__simple-02.light.webp)![](https://apogee.avaui.dev/thumbs/blog-sections__simple-02.dark.webp) Simple 02A header on a neutral fill with a newsletter form, then a grid of posts and pagination. ](https://apogee.avaui.dev/docs/blog-sections/simple-02)[ ![](https://apogee.avaui.dev/thumbs/blog-sections__simple-03.light.webp)![](https://apogee.avaui.dev/thumbs/blog-sections__simple-03.dark.webp) Simple 03A hero on the brand colour with an email sign-up, then a grid of posts and pagination. ](https://apogee.avaui.dev/docs/blog-sections/simple-03)[ ![](https://apogee.avaui.dev/thumbs/blog-sections__simple-04.light.webp)![](https://apogee.avaui.dev/thumbs/blog-sections__simple-04.dark.webp) Simple 04A centred hero on the brand colour with an email sign-up, then a grid of posts and a Load more button. ](https://apogee.avaui.dev/docs/blog-sections/simple-04)[ ![](https://apogee.avaui.dev/thumbs/blog-sections__simple-05.light.webp)![](https://apogee.avaui.dev/thumbs/blog-sections__simple-05.dark.webp) Simple 05A heading beside a subscribe form, a category filter (a menu on phones, tabs from md), a grid of posts and pagination. ](https://apogee.avaui.dev/docs/blog-sections/simple-05)[ ![](https://apogee.avaui.dev/thumbs/blog-sections__simple-06.light.webp)![](https://apogee.avaui.dev/thumbs/blog-sections__simple-06.dark.webp) Simple 06A heading beside a subscribe form, a category filter, and a two-column grid of horizontal posts. ](https://apogee.avaui.dev/docs/blog-sections/simple-06)[ ![](https://apogee.avaui.dev/thumbs/blog-sections__sidebar-01.light.webp)![](https://apogee.avaui.dev/thumbs/blog-sections__sidebar-01.dark.webp) Sidebar 01A header with an email form, then a search field and category list beside a grid of posts. ](https://apogee.avaui.dev/docs/blog-sections/sidebar-01)[ ![](https://apogee.avaui.dev/thumbs/blog-sections__sidebar-02.light.webp)![](https://apogee.avaui.dev/thumbs/blog-sections__sidebar-02.dark.webp) Sidebar 02A header, then a search field and category list beside a grid of posts whose featured post spans the full width. ](https://apogee.avaui.dev/docs/blog-sections/sidebar-02)[ ![](https://apogee.avaui.dev/thumbs/blog-sections__alt-layout-01.light.webp)![](https://apogee.avaui.dev/thumbs/blog-sections__alt-layout-01.dark.webp) Alternative layout 01A header with an email form, then a grid of posts led by a featured post across the full width. ](https://apogee.avaui.dev/docs/blog-sections/alt-layout-01)[ ![](https://apogee.avaui.dev/thumbs/blog-sections__alt-layout-02.light.webp)![](https://apogee.avaui.dev/thumbs/blog-sections__alt-layout-02.dark.webp) Alternative layout 02A centred header with an email form, recent posts (one large, two beside it), then all posts with pagination. ](https://apogee.avaui.dev/docs/blog-sections/alt-layout-02)[ ![](https://apogee.avaui.dev/thumbs/blog-sections__alt-layout-03.light.webp)![](https://apogee.avaui.dev/thumbs/blog-sections__alt-layout-03.dark.webp) Alternative layout 03A header with an email form, a large featured post, filter pills with a search field, a grid of posts and a Load more button. ](https://apogee.avaui.dev/docs/blog-sections/alt-layout-03)[ ![](https://apogee.avaui.dev/thumbs/blog-sections__alt-layout-04.light.webp)![](https://apogee.avaui.dev/thumbs/blog-sections__alt-layout-04.dark.webp) Alternative layout 04A centred header with an email form, then one centred column of horizontal posts and pagination. ](https://apogee.avaui.dev/docs/blog-sections/alt-layout-04)[ ![](https://apogee.avaui.dev/thumbs/blog-sections__carousel-layout-01.light.webp)![](https://apogee.avaui.dev/thumbs/blog-sections__carousel-layout-01.dark.webp) Carousel layout 01Latest posts in a carousel under a heading with a View all posts button. ](https://apogee.avaui.dev/docs/blog-sections/carousel-layout-01)[ ![](https://apogee.avaui.dev/thumbs/blog-sections__split-layout-01.light.webp)![](https://apogee.avaui.dev/thumbs/blog-sections__split-layout-01.dark.webp) Split layout 01A heading and View all posts button beside two posts. ](https://apogee.avaui.dev/docs/blog-sections/split-layout-01)[ ![](https://apogee.avaui.dev/thumbs/blog-sections__simple-center-aligned-01.light.webp)![](https://apogee.avaui.dev/thumbs/blog-sections__simple-center-aligned-01.dark.webp) Simple centre aligned 01A centred heading over three posts and a View all posts button. ](https://apogee.avaui.dev/docs/blog-sections/simple-center-aligned-01)[ ![](https://apogee.avaui.dev/thumbs/blog-sections__carousel-layout-02.light.webp)![](https://apogee.avaui.dev/thumbs/blog-sections__carousel-layout-02.dark.webp) Carousel layout 02A heading, intro and View all posts button over a carousel of four posts. ](https://apogee.avaui.dev/docs/blog-sections/carousel-layout-02)[ ![](https://apogee.avaui.dev/thumbs/blog-sections__split-layout-02.light.webp)![](https://apogee.avaui.dev/thumbs/blog-sections__split-layout-02.dark.webp) Split layout 02A heading and View all posts button beside two stacked posts with large images. ](https://apogee.avaui.dev/docs/blog-sections/split-layout-02)[ ![](https://apogee.avaui.dev/thumbs/blog-sections__simple-left-aligned-01.light.webp)![](https://apogee.avaui.dev/thumbs/blog-sections__simple-left-aligned-01.dark.webp) Simple left aligned 01A heading with a View all posts button beside it, over three posts. ](https://apogee.avaui.dev/docs/blog-sections/simple-left-aligned-01)[ ![](https://apogee.avaui.dev/thumbs/blog-sections__simple-left-aligned-02.light.webp)![](https://apogee.avaui.dev/thumbs/blog-sections__simple-left-aligned-02.dark.webp) Simple left aligned 02A heading over four posts in two columns, with a View all posts button under a rule. ](https://apogee.avaui.dev/docs/blog-sections/simple-left-aligned-02) ## Related [ PostCardOne article in a blog list; image, a top line, title, summary and a footer, as plain, a card or with an overlay. ](https://apogee.avaui.dev/docs/post-card)[ Blog listPost cards in a grid, or one featured post above the grid. ](https://apogee.avaui.dev/docs/sections/blog-list)[ PaginationPage links with prev/next and ellipses for long page ranges. ](https://apogee.avaui.dev/docs/pagination)