Typography
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> |
Theme
<p>
Paragraphs
| 1 | |
| 2 | <p> |
| 3 | Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit Sed Do Eiusmod Tempor Incididunt Ut Labore Et Dolore Magna |
| 4 | </p> |
| 5 |
Theme
Inline Elements
Includes <strong>, <em>, <code>, and <a> tags
| 1 | |
| 2 | <p> |
| 3 | Lorem |
| 4 | <strong>Ipsum</strong> |
| 5 | <em>Dolor</em> |
| 6 | <code>Sit</code> |
| 7 | <a href="https://example.com">Amet</a> |
| 8 | </p> |
| 9 |
Theme
<blockquote>
Block Quotes
| 1 | |
| 2 | <blockquote> |
| 3 | Lorem Ipsum Dolor Sit Amet |
| 4 | </blockquote> |
| 5 |
Theme
<ol>
Ordered Lists
| 1 | |
| 2 | <ol> |
| 3 | <li>One</li> |
| 4 | <li>Two</li> |
| 5 | <li>Three</li> |
| 6 | </ol> |
| 7 |
Theme
<ul>
Unordered Lists
| 1 | |
| 2 | <ul> |
| 3 | <li>One</li> |
| 4 | <li>Two</li> |
| 5 | <li>Three</li> |
| 6 | </ul> |
| 7 |
Theme
<ul> Markers
Add the marker- attribute to a <ul> element to customize its list markers
<ul marker-="bullet">
<ul marker-="tree">| 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 |
Theme
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">| 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 |
Theme
[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 {/* ... */}
}