---
title: Blog Layout
description: A clean and minimal blog layout with a header and title block.
---
---
The `BlogLayout` provides a clean and minimal layout for blog posts.
It looks like this:
Tip: Toggle the theme on this page to see the light / dark mode variant of this layout.
The example above is achieved using the following content and code:
```markdown title="content/index.md"
---
title: "Building blogs with Jaspr"
keywords: ["jaspr", "blog"]
author: "Kilian Schulte"
date: "26 April 2025"
readTime: "5 min"
authorImage: https://avatars.githubusercontent.com/u/13920539?s=96&v=4
tags: ["Dart", "Jaspr", "Blog"]
---
Building blogs with `jaspr_content` offers a modern and efficient approach to creating dynamic and interactive websites. [...]
Getting started with `jaspr_content` is straightforward. You can write your blog posts in Markdown and render them using Dart components. [...]
````
```dart title="lib/main.server.dart"
ContentApp(
parsers: [
MarkdownParser(),
],
components: [
DropCap(),
PostBreak(),
],
layouts: [
BlogLayout(
header: Header(
title: 'Jaspr Blog',
logo: 'https://raw.githubusercontent.com/schultek/jaspr/refs/heads/main/assets/logo.png',
items: [
ThemeToggle(),
GitHubButton(repo: 'schultek/jaspr'),
],
),
),
]
)
```
## Usage
The `BlogLayout` takes the following parameters:
The header component to render on the page, usually a `Header`.
### Title Block
In addition to the header, it renders a title block based on the page data (i.e. frontmatter data).
It uses the `title`, `author`, `date`, `readTime` and `authorImage` values as shown above.
### Tags
Below the content, the layout shows an optional tags list based on the `tags` value from the page data.
## Meta
The layout also adds appropriate meta tags to the `` of the page, like `title`, `description`, `keywords` and more. For more info, read the [Page Layouts](/content/concepts/page_layouts) docs.