Viewing: Elements

Elements are fundamental to every website. We're styling them early on, so we can easily overwrite them with classes - when needed

code

our code snippet
<code>our code snippet</code>

When to use

We can use <code> when we're in need to display code. Per default <code> is an inline-block element, so we can apply margin to it. <code>can be extended with an utility-class like sdi-block.

Last modified: 19 Apr 2019

figure

Figure
Photo by Christopher Gower on Unsplash
<figure>
	<img src="/assets/images/figure.jpg" loading="lazy" alt="Figure" width="380">
	<figcaption>
		Photo by Christopher Gower on
		<a href="https://unsplash.com/photos/m_HRfLhgABo">Unsplash</a>
	</figcaption>
</figure>

When to use

Figure is used to display images. we can extend it with figcaption to add an description.

Last modified: 25 Apr 2019

headings

Heading 1 / .h1

Heading 2 / .h2

Heading 3 / .h3

Heading 4 / .h4

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

When to use

These are the 6 available headings (h1-h6). We can overwrite the font-size with heading classes. So <h1 class="h2">...</h1> will make an h1 appear as an h2. This way we are decoupling the semantics from the layout.

Last modified: 14 Apr 2019

hr

<hr />

When to use

Use an <hr/> to separate content-blocks.

Last modified: 14 Apr 2019

lists

  • item in a list
  • item in a list
  • item in a list
  1. item in a list
  2. item in a list
  3. item in a list
<ul>
	<li>item in a list</li>
	<li>item in a list</li>
	<li>item in a list</li>
</ul>


<ol>
	<li>item in a list</li>
	<li>item in a list</li>
	<li>item in a list</li>
</ol>

When to use

This is the default layout for lists. If we're in need for things like breadcrumbs or a vertical navigation, extend the with the classes sdi-ui-list & sdi-ui-list--vertical. See here: ui-lists

Last modified: 14 Apr 2019

main

the main element
<main>the main element</main>

When to use

The main-element is used to place our main-content in.

Last modified: 14 Apr 2019

section

The section element
<section>The section element</section>

When to use

We can use a section to slice our content/article into several topics.

Last modified: 14 Apr 2019

⇧