Component Showcase

This article exists to test every shortcode and auto-transform available in the blog system. Each section below demonstrates a different component with realistic content.

---

Asides and pull quotes

Pull-out asides float left or right and let body text wrap around them. They’re useful for definitions, supporting facts, or anything that enriches the main text without interrupting it.

The aside shortcode accepts left or right as the direction. The content sits in a bordered pull-out box beside the main text. On narrower screens both variants collapse to full-width blocks above the paragraph they accompany.

Pull quotes use the same left/right syntax but render with a large decorative open-quote mark. Use them to highlight a single strong sentence from the article — something worth reading on its own.

---

Note blocks

Note blocks have a large display-font word at the top that acts as a label — TIP, WARNING, NOTE, REMINDER — followed by the body text below.

The word at the top is styled in the display font at full size. It makes the note immediately scannable even when a reader is moving quickly through the article.

---

Stats

Stats put a single number front and centre. The number is stacked above the label on a dark background, making it impossible to miss.

Left variant — floats left, prose wraps right:

This paragraph wraps to the right of the floated stat. The number sits to the left at a smaller size than the default, giving the figure prominence without dominating the full column. Use this when the number is supporting evidence for a point in the body text rather than a standalone headline.

Right variant — floats right, prose wraps left:

This paragraph wraps to the left of the right-floated stat. Both variants collapse to full-width on narrow screens, identical to the aside and pull quote components. The label below the number provides the source or context the figure alone can’t carry.

---

Did you know

A lightweight inline callout for a quick surprising fact, counterintuitive finding, or piece of context that adds value without needing a full section.

---

Key takeaway

The takeaway box is for the single most important point in a section. If a reader skims and remembers only one thing, this should be it.

---

Images with captions

Any standalone image with alt text is automatically wrapped in a figure with a caption. Use an empty alt to suppress the caption.

Floated images sit beside body text. Left-float:

This paragraph wraps around the left-floated image. The image sits to the left with the text flowing naturally to its right. On mobile the float collapses and the image goes full-width above this paragraph. Keep floated images to roughly 44% width of the content column to leave enough room for comfortable reading alongside the text.

Right-float for variety:

Right-floated images work well when the preceding paragraph introduces something on the right, drawing the eye naturally. As with left-floats, the image collapses to full-width on small screens. Text should be long enough to fill the space beside the image — short paragraphs with floats look awkward.

Wide images break out past the column margins for a more editorial feel:

---

Cards

Cards convert a bullet list into a grid. Use bold text as the card title, followed by the description.

---

Comparison table

Place <compare="."> on the line before a markdown table to apply comparison styling. The first column is the feature label, the second is the “before” state, the third is the “after” state.

Metric	Before	After
Page load time	4.2s	0.8s
Mobile PageSpeed	42 / 100	94 / 100
Monthly enquiries	3–5	12–18
Bounce rate	68%	31%
Google ranking	Page 3	Page 1

---

Steps

Steps take a numbered list and add large decorative counters. Use bold for the step title, followed by a short description.

1. Discovery A single session to understand your business, your customers, and what success actually looks like for this project.
2. Strategy We define the structure, the content priorities, and the conversion goals before a single pixel is drawn.
3. Design Wireframes first, then visual design. Every decision ties back to the goals from strategy.
4. Build Development in Astro or a CMS, depending on your content workflow. Performance is non-negotiable.
5. Launch QA, cross-browser testing, and a go-live checklist. We stay on hand for the first 48 hours.

---

Vertical timeline

The default <timeline="."> makes a vertical left-aligned timeline. Use bold for the date or milestone label.

---

Horizontal timeline

<timeline="h"> lays events across a horizontal axis. Best for short milestones or process stages where all items are roughly equal in importance.

---

Alt timeline

<timeline="d"> alternates items left and right of a central spine for a more editorial, magazine-like feel.

---

Marginalia

Marginalia float into the right-hand margin on wide screens and collapse inline on mobile. They work well for citations, clarifying asides, or a handwritten commentary voice that sits alongside but separate from the main argument.

Use them sparingly — one or two per article at most. The handwritten style creates an informal, editorial register that contrasts well with the mono labels and display headings elsewhere on the page.

---

Layered cards

<cards-layered="."> renders the same card grid as <cards="."> but adds a stacked paper shadow beneath each card that lifts on hover, giving the impression of physical depth.

---

Code box

<code-box="LABEL | content"> renders a terminal-style callout with macOS traffic-light dots, a mono header label, and monospaced body text on a dark background.

Use these for configuration snippets, CLI commands, or any technical content that benefits from a clearly distinct visual register.

---

Split typography

<split="WORD | body text"> pairs one enormous display word with a body paragraph. Useful for section openers or pull-out emphasis.

---

Horizontal gallery

<gallery="."> turns a list of src | caption items into a horizontally scrolling image strip with snap points.

---

Multi-column text

<columns="."> wraps list items into a two-column magazine layout — useful for dense reference content or feature comparisons.

---

CTA block

The CTA block links to /#contact. The button text is the third pipe-separated value; the first two are the title and description.