Typography — Sam Foreman

The Typography stylesheet provides styles for headings and inline elements

Import

@import '@webtui/css/components/typography.css';

Usage

`<h1>`-`<h6>`

Headings

1	<h1>Heading 1</h1>
2	<h2>Heading 2</h2>
3	<h3>Heading 3</h3>
4	<h4>Heading 4</h4>
5	<h5>Heading 5</h5>
6	<h6>Heading 6</h6>

`<p>`

Paragraphs

1	<p>
2	Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit Sed Do Eiusmod Tempor Incididunt Ut Labore Et Dolore Magna
3	</p>

Inline Elements

Includes <strong>, <em>, <code>, and <a> tags

1	<p>
2	Lorem
3	<strong>Ipsum</strong>
4	<em>Dolor</em>
5	<code>Sit</code>
6	<a href="https://example.com">Amet</a>
7	</p>

`<blockquote>`

Block Quotes

1
2	<blockquote>
3	Lorem Ipsum Dolor Sit Amet
4	</blockquote>
5

`<ol>`

Ordered Lists

1
2	<ol>
3	<li>One</li>
4	<li>Two</li>
5	<li>Three</li>
6	</ol>
7

`<ul>`

Unordered Lists

1
2	<ul>
3	<li>One</li>
4	<li>Two</li>
5	<li>Three</li>
6	</ul>
7

`<ul>` Markers

Add the marker- attribute to a <ul> element to customize its list markers

<ul marker-="bullet">
    <ul marker-="tree"></ul>
</ul>

1
2	<ul>
3	<li>List</li>
4	<li>With</li>
5	<li><code>default</code> Markers</li>
6	</ul>
7	<ul marker-="bullet">
8	<li>List</li>
9	<li>With</li>
10	<li><code>bullet</code> Markers</li>
11	</ul>
12	<ul marker-="tree">
13	<li>List</li>
14	<li>With</li>
15	<li><code>tree</code> Markers</li>
16	</ul>
17

Use the open keyword at the start and/or end of the marker- attribute to leave the top/bottom tree markers open

<ul marker-="tree open">
    <ul marker-="open tree">
        <ul marker-="open tree open"></ul>
    </ul>
</ul>

1
2	<ul marker-="tree open">
3	<li>Tree</li>
4	<li>With</li>
5	<li><code>marker-="tree open"</code></li>
6	</ul>
7	<ul marker-="open tree">
8	<li>Tree</li>
9	<li>With</li>
10	<li><code>marker-="open tree"</code></li>
11	</ul>
12	<ul marker-="open tree open">
13	<li>Tree</li>
14	<li>With</li>
15	<li><code>marker-="open tree open"</code></li>
16	</ul>
17

`[is-="typography-block"]`

Apply typography styles to an element’s children

<div is-="typography-block">Typography block</div>

Scope

All HTML heading elements
paragraphs, blockquotes, lists, list items, elements with is-="typography-block" and their respective inline elements

h1,
h2,
h3,
h4,
h5 {
    /* ... */
}

ul {
    /* ... */
}
ol {
    /* ... */
}

p,
blockquote,
li,
[is-~='typography-block'] {
    /* ... */

    strong {
        /* ... */
    }
    a {
        /* ... */
    }
    code {
        /* ... */
    }
}

Hover Sandbox

A collection of hover-effect variants for body links. Each row uses a different animation for its <a> — hover or tab to one to compare.

hover sandbox

Spring overshoot: Hover the link — brackets snap into place from further out with a slight bounce.

Vim block-cursor: Hover the link — a colored block fills the link area, brackets follow.

Vertical drop: Hover the link — brackets fall into place from above.

Glitch flicker: Hover the link — brackets stutter through opacity before settling.

Shell prompt: Hover the link — a "$ " prompt appears before it, like the link is a command being typed.

Visual selection: Hover the link — block-character borders ░▒▓ sweep in like a vim visual-mode selection.

Underscore scan: Hover the link — a blinking underscore _ scans left-to-right under the text.

ANSI rainbow: Hover the link — characters flicker through ANSI colors then settle on the accent.

Angle brackets: Hover the link — angle brackets < > slide in from outside instead of square ones.

Pointer arrow: Hover the link — a "→" arrow appears pointing at it from the right margin.

Spring + rainbow: Hover the link — brackets spring in from wider out while the text cycles through ANSI colors and settles on accent.

Cursor + rainbow: Hover the link — a rainbow block sweeps across vim-cursor style, blinks, then brackets spring in.

Cursor + rainbow (text): Hover the link — text takes on the rainbow gradient as a vim cursor sweeps across, then brackets spring in.

Cursor + rainbow (cycling): Hover the link — rainbow block sweeps in, then keeps cycling colors while filled.

Cursor + spring: Hover the link — accent block sweeps across, blinks, then brackets spring in.

Cursor + spring (no blink): Hover the link — accent block sweeps across, then brackets spring in. No blink.

Visual-mode sweep (wrap-safe): Hover this long link that wraps across multiple lines of text intentionally so you can see the effect — vim visual-mode highlight wipes across cleanly even on wrap.

Block cursor at end (wrap-safe): Hover this long link that wraps across multiple lines of text intentionally so you can see the effect — a single blinking █ block cursor appears at the true end.

ASCII underline type-in (wrap-safe): Hover this long link that wraps across multiple lines of text intentionally so you can see the effect — an ASCII underline types in under every wrapped line.

Reverse-video flash (wrap-safe): Hover this long link that wraps across multiple lines of text intentionally so you can see the effect — fg/bg invert in vim-selection style.

← [b]ack

webtui/ Textarea [n]ext → webtui/ View

Import

Usage

<h1>-<h6>

<p>

Inline Elements

<blockquote>

<ol>

<ul>

<ul> Markers

[is-="typography-block"]