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
The .section-heading wrapper pairs a bold title with one muted line underneath
Body copy on this page runs in Open Sans at 1.1rem, with 0.02em letter-spacing and 1.65 line-height — the same values every dark section on the template inherits, carried over here onto the light content panel.
Heading with a Subtitle
Same wrapper, one size down
Headings on this page are always bold, uppercase, and letter-spaced — that rule lives once on h1 through h6 in theme.css, so a heading looks the same whether it opens a page or a single paragraph inside it.
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
Blockquote
Every accent color on this page traces back to six custom properties — recolor those six, and the whole template follows, down to the last button.
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.
- Spacing and line-height come from theme.css.
- Nested lists inherit the same type styles.
Alternate
- list-unstyled strips the bullets and padding.
- Each item adds its own border-top and py-2.
- A compact pattern for a 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 another ol inside an li and it re-indents on its own.
- That's every list variant this template ships.
Icons
Actions
Table
Default
| Name | Description | Price |
|---|---|---|
| Item 1 | Base row style, transparent background, generous padding. | 29.99 |
| Item 2 | Zebra striping via nth-child(2n+1) reading --border-bg. | 19.99 |
| Item 3 | Header cells sit at 0.85em, semi-bold, no fill. | 29.99 |
| Item 4 | On this light panel the same rules read --accent-7 instead. | 19.99 |
| Item 5 | The bordered variant below adds table-bordered for full rules. | 29.99 |
| 100.00 | ||
Alternate
| Name | Description | Price |
|---|---|---|
| Item 1 | Base row style, transparent background, generous padding. | 29.99 |
| Item 2 | Zebra striping via nth-child(2n+1) reading --border-bg. | 19.99 |
| Item 3 | Header cells sit at 0.85em, semi-bold, no fill. | 29.99 |
| Item 4 | On this light panel the same rules read --accent-7 instead. | 19.99 |
| Item 5 | The bordered variant below adds table-bordered for full rules. | 29.99 |
| 100.00 | ||
Buttons
- Special
- Default
Form
Image
Fit
Left & Right
This paragraph demonstrates .inline-photo-start on a rounded, 40%-wide image — text wraps around its right edge once the float clears. Long-form pages use this pattern for a lead photo or a pull image 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 .inline-photo-end and the same pattern mirrors to the right, which is exactly what the next paragraph does.
This is the mirror of the paragraph above: .inline-photo-end pulls the photo to the right edge instead, and text wraps along its left side. Alternating the two classes between paragraphs is a common pattern for photo-heavy articles — it breaks up a column of text without a full image grid, and reads naturally whichever side the photo lands on. Both floats clear at the end of their own paragraph, so the next block starts fresh at full width.