Headings

h2 through h6 all share the same bold, uppercase, letter-spaced treatment — only size changes, so hierarchy stays obvious without the voice changing.

Body Copy

Paragraph text runs at 300-weight Source Sans Pro with 1.6 line-height — light enough to read in long stretches, dense enough not to waste vertical space.

Spacing

Every section uses Bootstrap's spacing utilities — g-4, mb-3, and the rest — instead of one-off margins, so the rhythm holds even if sections get reordered.

Text

This line is bold and this one is strong. This word is italic and this one is emphasized. Version numbers use ^superscript the way Bootstrap 5^.3 does, and footnote-style markers use _subscript. This is underlined for old time's sake, and this is inline code: document.documentElement.dataset.theme. Finally, this is a link, styled with a dotted underline so it doesn't fight with real underlined text above.

---

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

---

This paragraph exists to show body copy sitting under a heading stack, the way it would in a real article — same weight, same line-height as everywhere else on the page.

Lists

Definition

Accent

The single CSS custom property — --accent, plus --accent-rgb for translucent glows — that every themed color in this template reads from. Change it and everything recolors.

Banner Grid

The homepage's photo section: one full-width tile stacked over two half-width tiles, each with a dark tint layered under the headline so white type stays legible.

Post Card

The repeating unit of the card grid — a photo, a headline, sample meta, a short excerpt, and a ghost button. Six of them fill the homepage grid below the in-depth feature.

Actions

• Default
• Default

• Small
• Small

Blockquote

A template is only as good as the paragraph you're willing to delete without asking permission.

Table

Default

Alternate

Buttons

• Special
• Default

• Big
• Default

• Icon
• Icon

• Special
• Default

Form

Name

Email

Category - Category - General Inquiry Feedback Bug Report Feature Request

Low

Normal

High

Email me a copy

I am a human

Message

• Send Message
• Reset

Image

Fit

Left & Right

Floating an image left or right inside a paragraph is the oldest trick in the book, and it still works in a Bootstrap 5 world — .float-start (or .float-end) plus a max-width on the image is the entire mechanism, no custom classes required beyond .text-wrap-image, which caps the image at 40% of the paragraph's width so the wrap doesn't collapse to one word per line. Text keeps flowing around the image at whatever width remains, exactly like it would in a printed magazine column, right up until the paragraph ends. It's a small thing, but it's the difference between a page that reads like a document and a page that reads like a memo.

The right-floated version uses the same two classes with .float-end swapped in, and nothing else changes — the image still respects its max-width, the text still wraps around it, and the paragraph still ends whenever it ends. This is deliberately the least original component on this page: browsers have supported float-based text wrap for decades, and there's no reason to reinvent it just because the rest of the layout is newer. Sometimes the boring solution is the correct one, and this is one of those times.

Box

Preformatted

i = 0;

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

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