Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>Typography
All typography rules are included in wexa.css — no additional stylesheet required.
Headings, body text, inline elements, lists and blockquotes are styled by default.
Colors and font metrics are controlled by CSS variables.
Headings
Six heading levels are available. Each level has its own color variable,
and font size is computed relative to --font-size
so that the scale adapts to all screen sizes and accessibility modes.
Variables
Heading colors are controlled by the theme variables:
| Variable | Role |
|---|---|
--h1-color |
Color of h1 |
--h2-color |
Color of h2 |
--h3-color |
Color of h3 |
--h4-color |
Color of h4 |
--h5-color |
Color of h5 |
--h6-color |
Color of h6 |
Font families
Four font family classes are available: .font-sans, .font-serif,
.font-mono and .font-pre.
Each maps to its corresponding CSS variable and falls back gracefully
when the named font is not installed.
In contrast mode, all families fall back to ContrastFont
for improved legibility.
Sans — Bold. Italic.
Serif — Bold. Italic.
Mono — Bold. Italic.
Pre — Bold. Italic.
<p class="font-sans">Sans text</p>
<p class="font-serif">Serif text</p>
<p class="font-mono">Mono text</p>
<p class="font-pre">Pre text</p>Font weights
Four weight classes are available: .font-weight-thin,
.font-weight-normal, .font-weight-bold
and .font-weight-black.
In contrast mode, the underlying numeric values are automatically increased
so that all weights remain legible at higher contrast levels.
Sans — weight thin
Sans — weight normal
Sans — weight bold
Sans — weight black
Serif — weight thin
Serif — weight normal
Serif — weight bold
Serif — weight black
<p class="font-sans font-weight-thin">weight thin</p>
<p class="font-sans font-weight-normal">weight normal</p>
<p class="font-sans font-weight-bold">weight bold</p>
<p class="font-sans font-weight-black">weight black</p>Inline text elements
Standard HTML inline elements are styled by default. No class is required.
Link
Bold
Italic
Underline
Deleted
Inserted
Strikethrough
Small
Text sub
Text sup
Abbr.
Ctrl+K
Highlighted
<a href="...">Link</a>
<strong>Bold</strong>
<em>Italic</em>
<u>Underline</u>
<del>Deleted</del>
<ins>Inserted</ins>
<s>Strikethrough</s>
<small>Small</small>
<sub>sub</sub> <sup>sup</sup>
<abbr title="...">Abbr.</abbr>
<kbd>Ctrl+K</kbd>
<mark>Highlighted</mark>Blockquote
Use <blockquote> for extended quotations.
An optional <cite> element inside the blockquote
renders the attribution on its own line.
La règle d'or de la conduite est la tolérance mutuelle, car nous ne penserons jamais tous de la même façon, nous ne verrons qu'une partie de la vérité et sous des angles différents. — Mahatma Gandhi
<blockquote>
Quote text.
<cite>— Author</cite>
</blockquote>Lists
Unordered (<ul>), ordered (<ol>)
and description (<dl>) lists are all styled by default.
No class is required.
- First item
- Second item
- Third item with a longer text to show wrapping behavior inside a list.
- First item
- Second item
- Third item with a longer text to show wrapping behavior inside a list.
- Term one
- Definition of the first term.
- Term two
- Definition of the second term.
- A second definition for the same term.
<ul>
<li>Item</li>
</ul>
<ol>
<li>Item</li>
</ol>
<dl>
<dt>Term</dt>
<dd>Description</dd>
</dl>Aside
Use <aside> to display supplementary content
visually distinguished from the main text — a note, a warning, a tip.
This is the main content that follows.
<aside>Supplementary content.</aside>
<p>Main content.</p>