A Field Guide to Placeholder Posts
A sample post that shows headings, lists, quotes, images and tables, so you can see how the layout handles them.
Jane Doe 1 min read
This is filler content. It’s here to show how each piece of Markdown looks once it goes through the blog layout. Replace it with a real post whenever you like.
Why placeholder content helps#
Real content is messy. Headings run long, paragraphs vary in length, and images come in all sorts of shapes. Filler that looks like a real post shows layout problems early, before they show up in front of readers.
Here are a few things worth checking:
- Line length and paragraph spacing
- How headings sit against the body text
- Bold, italic and
inline codeinside a sentence - Links, like this one to the SvelteKit docs
Ordered steps#
- Write the frontmatter.
- Draft the body in plain Markdown.
- Preview it locally with
pnpm dev. - Publish.
Images#
Inline images use standard Markdown syntax and pick up rounded corners from the prose styles.
Inline images#
Alt text#
Always describe what the image shows in the square brackets. Screen readers read it out, and it shows up if the image fails to load.
Quotes#
Design is not just what it looks like and feels like. Design is how it works.
— An oft-quoted designer
Tables#
Frontmatter fields#
| Field | Required | Notes |
|---|---|---|
title | No | Falls back to the folder name |
date | No | Used to sort the index, newest first |
description | No | Shown under the title and on the card |
tags | No | A YAML list or a comma-separated list |
toc | No | Set to false to hide “On this page” |
On small screens#
Wide tables scroll sideways on small screens instead of stretching the page.
Wrapping up#
That covers the basics. The next sample post focuses on code blocks.