Elements

Every Themed Element, One Page

Text

This is bold and this is strong. This is italic and this is emphasized. This is ^superscript text and this is _subscript text. This is underlined and this is code: for (;;) { ... }. Finally, this is a link.

Heading with a Subtitle

A muted line directly under a heading, no extra markup beyond a paragraph inside the same <header>

The four size steps in theme.css (header h2 + p down to header h6 + p) each pull their subtitle snug against the heading above with a negative top margin, sized down one step at a time so the pair reads as one unit at any heading level — this is the <h4> weight.

Heading with a Subtitle

Same wrapper, one level down

Nest this pattern inside a longer article for a subsection heading that still carries its own one-line summary, without introducing a second component just for the smaller size.

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

Blockquote

A blockquote gets a 4px accent-toned left border and italic type, sized to sit comfortably between two paragraphs of body copy without breaking the reading rhythm of the page around it.

Preformatted

i = 0;

while (!deck.isInOrder()) {
print 'Iteration ' + i;
deck.shuffle();
i++;
}

print 'It took ' + i + ' iterations to sort the deck.';

Lists

Unordered

Default browser bullets, no Bootstrap classes.
Line height and spacing come from theme.css.
Nested lists inherit the same type styles.

Alternate

list-flush strips the bullets and adds a divider.
Each item gets its own border-top from theme.css.
A good pattern for a compact link list.

Ordered

Numbers come from the browser, not Bootstrap.
Six items here just to show the counter continuing.
Same spacing rules as the unordered list above.
No line-height overrides beyond the theme default.
Nest an ol inside an li and it re-indents automatically.
That's every list variant this template ships.

Icons

Actions

Small
Small

Small
Small

Small
Small

Table

Default

Name	Description	Price
Item One	Base row style, no border, generous padding.	29.99
Item Two	Zebra-striped body via nth-child(2n+1).	19.99
Item Three	Right-aligned numbers, left-aligned text.	29.99
Item Four	Header row in --fg-bold, no background fill.	19.99
Item Five	Base row style, no border, generous padding.	29.99
		100.00

Alternate

Name	Description	Price
Item One	Same rows, plus a border around every cell.	29.99
Item Two	table-bordered layers onto the base .table.	19.99
Item Three	Border color comes from --border in theme.css.	29.99
Item Four	Zebra striping still applies underneath.	19.99
Item Five	Same rows, plus a border around every cell.	29.99
		100.00

Buttons

Fit

Fit + Small

Icon
Icon

Disabled
Disabled

Form

Low Priority

Normal Priority

High Priority

Email me a copy of this message

I am a human and not a robot

Image

Fit

Left & Right

Sample showcase photograph This paragraph demonstrates float-start on an image capped at 40% width — body text wraps around its right edge until the float clears. Long-form article bodies use this pattern for a lead photo, a pull image, or an inline diagram without breaking the reading column into a grid. The image keeps floating until the paragraph runs out of text tall enough to wrap beside it, and normal block flow resumes below once it does. Swap the class to float-end and the same pattern mirrors to the right, which is exactly what the next paragraph does.

Sample showcase photograph This is the mirror of the paragraph above: float-end pulls the photo to the right edge instead, and text wraps along its left side. Alternating float-start and float-end between paragraphs is a common pattern for photo-heavy articles — it breaks up a column of text without resorting to a full image grid, and reads naturally whichever side the image lands on. Both floats clear at the end of their own paragraph, so the next block starts fresh at full width.