Elements
Every demo widget on this page, restyled with Bootstrap 5 utilities — still fully functional.
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 .heading-plain modifier drops the underline flourish every other heading gets
Every h1–h6 in Graphite grows a short underline from its own ::after pseudo-element by default — a typographic signature that repeats across every page. Add .heading-plain when a heading is really a subtitle sitting under a bigger one, like this pairing, and you don't want two underlines stacked on top of each other.
One Level Down
Same modifier, sized for a subsection instead of a page header
The pattern holds at any heading level — pair an h4–weight heading with an h5.heading-plain subtitle, or an h5 with an h6.heading-plain, and the underline only ever appears once per pair.
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
Blockquote
A blockquote gets a 4px solid left border in var(--border) and italic type — this line runs long enough to wrap onto a second line so the indent holds there too, not just against 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, no Bootstrap classes.
- Line height and spacing 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.
- 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.
- 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
Table
Default — .table-graphite
| Name | Description | Price |
|---|---|---|
| Item One | Base row style — no border, generous padding. | 29.99 |
| Item Two | Header row gets a 2px border-bottom, not a fill. | 19.99 |
| Item Three | Footer row mirrors it with a 2px border-top. | 29.99 |
| Item Four | Column headers use the Raleway heading font. | 19.99 |
| Item Five | --bs-table-border-color reads the theme border token. | 29.99 |
| 100.00 | ||
Alternate — adds .table-graphite-alt
| Name | Description | Price |
|---|---|---|
| Item One | Odd rows get a var(--border-bg) fill. | 29.99 |
| Item Two | Even rows stay transparent, so the stripe reads. | 19.99 |
| Item Three | Same thead/tfoot borders as the default table. | 29.99 |
| Item Four | One extra class, nothing else changes. | 19.99 |
| Item Five | Good for longer, denser data tables. | 29.99 |
| 100.00 | ||
Buttons
Form
Image
Fit
Left & Right
.inline-photo-start floats a square-cropped image to the left at a 40% max-width and lets text wrap along its right edge. Long-form article bodies use this pattern for a lead image, a pull photo, 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 .inline-photo-end and the same pattern mirrors to the right, which is exactly what the next paragraph does.
.inline-photo-end is the mirror of the paragraph above: the photo pulls to the right edge instead, and text wraps along its left side. Alternating start and end floats 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.