Typography
The Typography stylesheet provides styles for headings and inline elements
Import
@import "@webtui/css/components/typography.css";Usage
<h1>-<h6>
Headings
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6> Theme
<p>
Paragraphs
<p>
Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit Sed Do Eiusmod Tempor Incididunt Ut Labore Et Dolore Magna
</p> Theme
Inline Elements
Includes <strong>, <em>, <code>, and <a> tags
<p>
Lorem
<strong>Ipsum</strong>
<em>Dolor</em>
<code>Sit</code>
<a href="https://example.com">Amet</a>
</p> Theme
<blockquote>
Block Quotes
<blockquote>
Lorem Ipsum Dolor Sit Amet
</blockquote> Theme
<ol>
Ordered Lists
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol> Theme
<ul>
Unordered Lists
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul> Theme
<ul> Markers
Add the marker- attribute to a <ul> element to customize its list markers
<ul marker-="bullet">
<ul marker-="tree"><ul>
<li>List</li>
<li>With</li>
<li><code>default</code> Markers</li>
</ul>
<ul marker-="bullet">
<li>List</li>
<li>With</li>
<li><code>bullet</code> Markers</li>
</ul>
<ul marker-="tree">
<li>List</li>
<li>With</li>
<li><code>tree</code> Markers</li>
</ul> 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"><ul marker-="tree open">
<li>Tree</li>
<li>With</li>
<li><code>marker-="tree open"</code></li>
</ul>
<ul marker-="open tree">
<li>Tree</li>
<li>With</li>
<li><code>marker-="open tree"</code></li>
</ul>
<ul marker-="open tree open">
<li>Tree</li>
<li>With</li>
<li><code>marker-="open tree open"</code></li>
</ul> 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 {/* ... */}
}