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.
Last updated
Each example is a whole blog index stacked from blocks: a header navigation, a blog index from 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>.
npx @ava-ui/apogee add blog/blog-page-01---
// src/pages/blog.astro
import Layout from '../layouts/Layout.astro'
import Page from '../components/apogee/pages/blog/BlogPage01.astro'
---
<Layout title="Blog">
<Page />
</Layout>
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.