WebTUI

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

Use the --blockquote-indent-color CSS variable to change the color of the indentation

blockquote {
    --blockquote-indent-color: red;
}

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

1
2	blockquote {
3	--blockquote-indent-color: red;
4	}
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>
<ul marker-="tree"></ul>
<ul marker-="round-tree"></ul>

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

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>
<ul marker-="open tree"></ul>
<ul marker-="open tree open"></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	<ul marker-="round-tree open">
18	<li>round-tree</li>
19	<li>With</li>
20	<li><code>marker-="round-tree open"</code></li>
21	</ul>
22	<ul marker-="open round-tree">
23	<li>round-tree</li>
24	<li>With</li>
25	<li><code>marker-="open round-tree"</code></li>
26	</ul>
27	<ul marker-="open round-tree open">
28	<li>round-tree</li>
29	<li>With</li>
30	<li><code>marker-="open round-tree open"</code></li>
31	</ul>
32

Use the --list-marker-color CSS variable to change the color of list markers

li {
    --list-marker-color: red;
}

1	<ul>
2	<li>red</li>
3	<li>hot</li>
4	<li>list markers</li>
5	</ul>

1
2	li {
3	--list-marker-color: red;
4	}
5

`[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 {
        /* ... */
    }
}

← <C-p> Previous

installation/ Astro Next <C-n> → components/ Accordion

Import

Usage

<h1>-<h6>

<p>

Inline Elements

<blockquote>

<ol>

<ul>

<ul> Markers

[is-="typography-block"]