Blog post pages
Whole article pages: a post header, the article, share links and more posts, between a header and a footer.
Last updated
Each example is a whole article page stacked from blocks: a header navigation, an article from Content sections (its header holds the page’s h1), more posts from Blog sections, and often a call to action or 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-post/blog-post-01---
// src/pages/blog-post.astro
import Layout from '../layouts/Layout.astro'
import Page from '../components/apogee/pages/blog-post/BlogPost01.astro'
---
<Layout title="Blog post">
<Page />
</Layout>
Blog post 01A heading block over a photo carousel, the body, then the author and topics. Then more posts, a call to action with images, a newsletter signup and a footer.
Blog post 02A centred title over a wide photo, the body, then the author and share links. Then more posts, a newsletter signup on the brand colour and a footer on dark.
Blog post 03A place title beside a tall photo, the body, then share links. Then more posts on grey and a footer.
Blog post 04A banner on grey and a split header beside a wide photo, the body, then share links. Then more posts, a call to action with images, a newsletter signup and a footer.
Blog post 05A split header with a tall photo, then a table of contents and share links beside the body. Then more posts, a call to action card and a footer on dark.
Blog post 06A split header with a photo on a tinted panel, the body, then share links. Then more posts on grey and a footer on dark.
Blog post 07A header on the brand colour, a wide photo overlapping it, the body, then topics and share links. Then more posts, a newsletter signup on the brand colour and a footer.
Blog post 08A split header, then a sidebar with contents, contributors, a newsletter form and share links beside the body. Then more posts, a call to action with a screenshot, a newsletter signup on grey and a footer.
Blog post 09A header and wide photo, then the body beside a newsletter card (from lg). Then more posts and a footer on dark.
Blog post 10A banner on the brand colour and a centred header with the author over a wide photo, the body, then topics and share links. Then a newsletter signup on the brand colour, a call to action with customer logos and a footer on the brand colour.