Content Patterns
24 rich content formats for lab notes. Use HTML classes directly in .md files. See note-005.md for full demo.
Pattern Reference
All patterns use semantic tokens — auto-adapt to dark mode.
| Pattern | HTML | Description |
|---|---|---|
| Quotes | blockquote | 5 variants: Callout, Pull, Whisper, Terminal, Box Card |
| Comparison Table | table.table-compare | Highlight cols with .cell-win/.cell-lose |
| Before/After | div.before-after | Side-by-side image pair with labels |
| Figure + Caption | figure > img + figcaption | Image with styled caption |
| Video Embed | div.video-wrap | Responsive 16:9 container |
| Full-Width BG | div.section-bg | Full-bleed section with photo background |
| Hero Block | div.hero-block | Big heading over dark background |
| Image Grid | div.grid-2 / .grid-3 | 2 or 3 column image layout |
| Warning Card | div.card-warning | Yellow warning with icon |
| Info Card | div.card-info | Blue info box with icon |
| Step List | ol.steps | Numbered steps with auto-counter |
| Definition List | dl.spec-dl | Styled term/definition pairs |
| Stat Grid | div.stat-grid | 4 stats in a row |
| Timeline | ol.timeline | Vertical timeline with dots |
| Checklist | ul.checklist | Checkable items with ☐/☑ |
| Tag Cloud | div.tag-cloud | Inline keyword cluster |
| Card Row | div.card-row | 3 mini cards side by side |
| Spotlight | div.spotlight | Glowing border highlight box |
| Testimonial | div.testimonial | Avatar + quote + attribution |
| Options Table | table.table-options | Styled options comparison |
| FAQ | div.faq-item | Q&A pairs with arrow |
| End CTA | div.end-cta | Dark call-to-action box |
| Dot Divider | hr.hr-dots | Decorative ··· line |
| Accent Divider | hr.hr-accent | Orange bar 60px |
Important Note
When using HTML blocks inside .md files, Markdown syntax (###, -, **) does NOT render. Use HTML tags (<h3>, <ul>, <strong>) instead.