Marketing blocks
Build pages from the hero, features, pricing and other blocks, and add your own.
Every EmDash page is a list of blocks. Editors add, reorder and fill them in the admin; src/components/MarketingBlocks.astro renders each one with a component from src/components/blocks/.
Available blocks
Block | Use it for |
|---|---|
Hero | The headline, intro and call to action at the top of a page |
Features | A grid of features with icons |
Split | Text beside an image |
Stats | A row of numbers |
Steps | Numbered steps in a row of cards |
Table | A comparison table with up to six columns |
Logos | Customer or partner logos |
Testimonials | Quotes from customers |
Pricing | Plans, optionally linked to Stripe products |
FAQ | Questions and answers |
CTA | A closing call to action |
Contact | Contact details and a form |
Text | Rich text, including forms and callouts |
Adding a block
Define the block type
Add it to blockTypes in seed/seed.json with its fields, or create it in the admin.
Write the component
Add an .astro file in src/components/blocks/. It receives the block's values as props.
Register it
Map the block type to the component in src/components/MarketingBlocks.astro.
Update the types
Run bunx emdash types against your running site to regenerate the TypeScript types for the new block's fields.
Images
Use Image from emdash/ui for images stored in the CMS. It handles responsive sizes, focal points and blurhash placeholders. Read captions from the image value's top-level caption.
Rich text blocks
Inside rich text (the Text block, posts and docs) editors can insert extra blocks from the slash menu: forms from the forms plugin, callouts, and the docs blocks (callout, steps, link cards and file tree) from src/plugins/docs-blocks/.