# Blog pages

> Whole blog index pages: a blog header, featured posts, categories, a grid or list of posts and pagination, between a header and a footer.

URL: https://apogee.avaui.dev/docs/blog-pages
Last updated: 2026-10-16

Whole blog index pages: a blog header, featured posts, categories, a grid or list of posts and pagination, between a header and a footer.

Last updated October 16, 2026

Each example is a whole blog index stacked from blocks: a header navigation, a blog index from [Blog sections](https://apogee.avaui.dev/docs/blog-sections) (its heading is the page’s `h1`), then calls to action, more posts or a newsletter signup before the footer. Adding a page copies its blocks too. The page renders its own header, `<main>` and footer, so give it a layout without a `<main>`.

```sh
npx @ava-ui/apogee add blog/blog-page-01
```

```astro
---
// src/pages/blog.astro
import Layout from '../layouts/Layout.astro'
import Page from '../components/apogee/pages/blog/BlogPage01.astro'
---

<Layout title="Blog">
  <Page />
</Layout>
```

[

![](https://apogee.avaui.dev/thumbs/blog-pages__blog-page-01.light.webp)![](https://apogee.avaui.dev/thumbs/blog-pages__blog-page-01.dark.webp)

Blog page 01A heading, a large featured post, category tabs with a sort menu, a grid of posts and pagination. Then a call to action with a screenshot, a call to action on grey and a footer.

](https://apogee.avaui.dev/docs/blog-pages/blog-page-01)[

![](https://apogee.avaui.dev/thumbs/blog-pages__blog-page-02.light.webp)![](https://apogee.avaui.dev/thumbs/blog-pages__blog-page-02.dark.webp)

Blog page 02A centred header with an email form, recent posts (one large, two beside it), then all posts with pagination. Then an app download call to action and a footer on dark.

](https://apogee.avaui.dev/docs/blog-pages/blog-page-02)[

![](https://apogee.avaui.dev/thumbs/blog-pages__blog-page-03.light.webp)![](https://apogee.avaui.dev/thumbs/blog-pages__blog-page-03.dark.webp)

Blog page 03A centred header with search, category tabs and a sort menu, a grid of posts with a newsletter card inside it, and pagination. Then a call to action with images and a footer.

](https://apogee.avaui.dev/docs/blog-pages/blog-page-03)[

![](https://apogee.avaui.dev/thumbs/blog-pages__blog-page-04.light.webp)![](https://apogee.avaui.dev/thumbs/blog-pages__blog-page-04.dark.webp)

Blog page 04A header, then a search field and category list beside a grid of posts whose featured post spans the full width. Then a footer on grey.

](https://apogee.avaui.dev/docs/blog-pages/blog-page-04)[

![](https://apogee.avaui.dev/thumbs/blog-pages__blog-page-05.light.webp)![](https://apogee.avaui.dev/thumbs/blog-pages__blog-page-05.dark.webp)

Blog page 05A banner on the brand colour and a centred header with an email sign-up, a large featured post, a grid of posts and pagination. Then more posts on grey, a call to action beside a quote and a footer.

](https://apogee.avaui.dev/docs/blog-pages/blog-page-05)[

![](https://apogee.avaui.dev/thumbs/blog-pages__blog-page-06.light.webp)![](https://apogee.avaui.dev/thumbs/blog-pages__blog-page-06.dark.webp)

Blog page 06A centred blog header, a large featured post, then a search field and category list beside a grid of posts. Then a call to action card, customer logos on grey, a call to action on dark and a footer on grey.

](https://apogee.avaui.dev/docs/blog-pages/blog-page-06)[

![](https://apogee.avaui.dev/thumbs/blog-pages__blog-page-07.light.webp)![](https://apogee.avaui.dev/thumbs/blog-pages__blog-page-07.dark.webp)

Blog page 07A header on the brand colour with a newsletter form, then a grid of posts and pagination. Then a newsletter signup on grey, an app download call to action and a footer on dark.

](https://apogee.avaui.dev/docs/blog-pages/blog-page-07)[

![](https://apogee.avaui.dev/thumbs/blog-pages__blog-page-08.light.webp)![](https://apogee.avaui.dev/thumbs/blog-pages__blog-page-08.dark.webp)

Blog page 08A heading beside a subscribe form, a category filter (a menu on phones, tabs from md), a grid of posts and pagination. Then more posts, a newsletter signup on dark and a footer on grey.

](https://apogee.avaui.dev/docs/blog-pages/blog-page-08)[

![](https://apogee.avaui.dev/thumbs/blog-pages__blog-page-09.light.webp)![](https://apogee.avaui.dev/thumbs/blog-pages__blog-page-09.dark.webp)

Blog page 09A heading beside a subscribe form, a category filter, and a two-column grid of horizontal posts. Then more posts, a call to action on grey and a footer on dark.

](https://apogee.avaui.dev/docs/blog-pages/blog-page-09)[

![](https://apogee.avaui.dev/thumbs/blog-pages__blog-page-10.light.webp)![](https://apogee.avaui.dev/thumbs/blog-pages__blog-page-10.dark.webp)

Blog page 10A centred header with an email form, then one centred column of horizontal posts and pagination. Then more posts, a newsletter signup and a footer on the brand colour.

](https://apogee.avaui.dev/docs/blog-pages/blog-page-10)

## Related

[

Blog listPost cards in a grid, or one featured post above the grid.

](https://apogee.avaui.dev/docs/sections/blog-list)[

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)[

PaginationPage links with prev/next and ellipses for long page ranges.

](https://apogee.avaui.dev/docs/pagination)