Elements
Every working widget this template ships, annotated in place
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
This h3/p pairing is the pattern every page-level heading in this template uses — a title, then one muted sentence of support.
Body copy below runs at the page's base type scale: 1.25rem at desktop, stepping down to 1.1rem under 1680px and 0.95rem under 1280px, via the two font-size media queries in theme.css.
Heading with a Subtitle
Same pairing, one level down — h4 for a subsection inside a longer article rather than a whole page.
Font weight holds at 300 through every heading level; only size changes, from h2's 2em down to h4's 1.1em.
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
Blockquote
A blockquote gets a thick left border in a low-opacity white and italic type — this line runs long enough to wrap onto a second line so the indent holds there too, not just on the first.
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, spaced by .article-body's list rule.
- Line height and margin come from theme.css, not browser defaults.
- Nested lists inherit the same type styles automatically.
Alternate
- Same .article-body class as the list above.
- Harbor keeps one list treatment rather than a second style.
- Five items here instead of three, to show a longer run.
- Spacing holds regardless of item count.
- Swap the ul for an ol to get numbers instead of bullets.
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 page demonstrates.
Icons
Plain .icon-row — no border, hover shifts to the accent color.
.icon-row-outline adds an inset ring — the variant used in every page footer.
Actions
Table
Default
| Name | Description | Price |
|---|---|---|
| Item 1 | Default row — a border-bottom only, no fill. | 29.99 |
| Item 2 | Same class as row one, no striping applied. | 19.99 |
| Item 3 | table-responsive wraps this table on narrow screens. | 29.99 |
| Item 4 | Five rows total, just to show the pattern repeat. | 19.99 |
| Item 5 | The footer row below sums the price column. | 29.99 |
| 100.00 | ||
Alternate
| Name | Description | Price |
|---|---|---|
| Item 1 | table-bordered adds a border to every cell. | 29.99 |
| Item 2 | Same --bs-border-color token as the default table. | 19.99 |
| Item 3 | No striping in this bordered variant. | 29.99 |
| Item 4 | Identical column widths to the default table above. | 19.99 |
| Item 5 | The footer total repeats here too. | 29.99 |
| 100.00 | ||
Buttons
- Special
- Default
Form
Image
Fit
Left & Right
This paragraph floats a 170×170 image to its left with .textured-image and float-start, then wraps text around it — the classic float pattern, still valid in Bootstrap 5 with me-4/mb-2 doing the spacing a manual margin used to. The overlay.png grain from theme.css layers over the photo itself, the same texture used on the hero and spotlight panels, so an inline image reads as part of this template rather than a plain <img> pasted into the copy.
The same treatment, mirrored to the right with float-end and ms-4 in place of me-4 — .textured-image doesn't care which side it floats to, only that a float utility sits next to it in the markup. Both paragraphs use the same source photo as the hero avatar on the homepage, cropped square instead of circular.