Typography

All website have some typographic elements, here some basic styling.

@use '@natachah/vanilla-frontend/scss/base/typography'

Headings

The headings use the default <h*> tags.

html

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

css properties

--font-size-h*
--heading-font-weight
--heading-line-height
--heading-color

Paragraph

The paragraph use the default <h*> tags.

As each website is uniq, there is no default margin-block for the paragraph.

Anchor

Use the default <a> tag to create links.

You can add the aria-current or aria-selected attribute to make the link with an active state.

By default if there is no href attribute, it will render as disabled state. And if it's an external link with target="_blank" attribute, the anchor will have an icon for accessibility.

html

<a href="#">Anchor</a>
<a href="#" aria-current="page">Active</a>
<a>Disabled</a>
<a href="#" target="_blank" title="This link opens in a new window" aria-label="This link opens in a new window">Anchor</a>

css properties

--anchor-decoration
--anchor-color
--anchor-hover-color
--anchor-focus-color
--anchor-active-color
--anchor-disabled-opacity
--anchor-outline-size
--anchor-outline-style
--anchor-outline-color
--anchor-outline-offset

--icon-external

Inline

html

<p><abbr title="Abbreviation">Abbr.</abbr></p>
<p><small>Small</small></p>
<p><q>An inline quote</q></p>
<p><b>Bold</b></p>
<p><b>b</b></p>
<p><em>Emphasis</em></p>
<p><i>Idiomatic</i></p>
<p><s>Strikethrough</s></p>
<p><u>Underline</u></p>
<p><span>Text <sub>Sub</sub></span></p>
<p><span>Text <sup>Sup</sup></span></p>
<p><cite>Citation</cite></p>
<p><mark>Highlight</mark></p>
<p><kbd>Ctrl + S</kbd></p>
<p><code>&lt;Code&gt;</code></p>
<p><ins>Inserted</ins></p>
<p><del>Deleted</del></p>

css properties

--mark-padding-block
--mark-padding-inline
--mark-background
--kbd-padding-block
--kbd-padding-inline
--kbd-font-family
--kbd-color
--kbd-background
--kbd-border-radius
--code-padding-block
--code-padding-inline
--code-font-family
--code-color
--code-background
--code-border-radius

Blockquote

The quotes use the default <blockquote> tags. Because the blockquote is usully design per website, their is no custom properties for them.

<blockquote>
    <p>
        “It's only after we've lost everything that we're free to do anything.”
    </p>
    <footer>
        - Chuck Palahniuk, <cite>Fight Club</cite>
    </footer>
</blockquote>

Code

Use the <pre> tag with a <code> tag inside. The design of a block of code is not the same as the inline element.

html

<pre><code><!--
-->&lt;p&gt;Sample text here...&lt;/p&gt;<br><!--
-->&lt;p&gt;And another line of sample text here...&lt;/p&gt;</code></pre>

css properties

--pre-padding-block
--pre-padding-inline
--pre-font-family
--pre-color
--pre-background
--pre-border-radius

List

The lists use the default <ul>, <ol> and <dl> tags. Because the lists are usully design per website/situation, their is not too much custom properties for them.

html

<ul>
    <li><p>Coffee</p></li>
    <li><p>Milk</p></li>
    <li><p>...</p></li>
</ul>

<ol>
    <li><p>Make coffee</p></li>
    <li><p>Add the milk</p></li>
    <li><p>Drink it !</p></li>
</ol>

<dl>
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

css properties

--list-bullet
--list-offset

Break line

Use the default <hr> tag render a horizontal line.

html

<hr>

css properties

--hr-border-size
--hr-border-style
--hr-border-color