Blocks are reusable layout components in src/components/blocks/. Each block owns its markup, styles, and a readme.md with usage examples.
Layout contract
Blocks do not control their own width or horizontal padding — the caller’s .container does that. This keeps blocks composable across different page layouts.
<section class="section">
<div class="container">
<MyBlock ... />
</div>
</section>Available blocks
| Block | Path | Notes |
|---|---|---|
| Button | blocks/button/ | btn, btn--primary, btn--dark, btn--link |
| Callout | blocks/callout/ | info / warning / tip variants |
| CardGrid | blocks/card-grid/ | responsive auto-fit grid |
| Chat | blocks/chat/ | bot+user conversation display |
| EntityCard | blocks/entity-card/ | knowledge graph card stack |
| FAQ | blocks/faq/ | semantic accordion with FAQPage schema |
| Footer | blocks/footer/ | site footer with nav sections |
| Header / Nav | blocks/header/ | top navigation bar |
| IconGrid | blocks/icon-grid/ | icon + label grid |
| RotatingStatement | blocks/rotating-statement/ | animated hero tagline |
| Table | blocks/table/ | comparison table |
| Timeline | blocks/timeline/ | vertical timeline |
| Anchor (graph) | blocks/graph-elements/ | circular node element |
Adding a new block
- Create
src/components/blocks/my-block/MyBlock.astro(andMyBlock.module.cssif needed). - Keep it layout-agnostic: no
max-width, no outer padding. - Add a
readme.mdwith props table and usage example. - Use it in
src/pages/internal.astroto preview while developing.
If the block is specific to one fork (not reusable across forks), put it in src/components/products/<your-fork>/ instead.