Typography

The Typography stylesheet provides styles for headings and inline elements

Import

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

Usage

<h1>-<h6>

Headings

<p>

Paragraphs

Inline Elements

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

<blockquote>

Block Quotes

<ol>

Ordered Lists

<ul>

Unordered Lists

<ul> Markers

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

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

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>

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