Atoms

Table of content

What are Atoms?

Buttons
Headings
Links
Lists
Typography

Atoms are the very basic elements of the stylesheet. Imagine every single-class element or selector rules as an atom. Examples could be buttons, links, headlines, inputs ... you get it, right?

To mark an element as an atom, annotate it with the @atom tag, followed by the name of the component. Special atoms are @icons.

Buttons

Show example

Copy markup

Brand Button

<a href="#" class="c-button c-button--brand">
  Brand Button
  <svg class="c-button__svg" xmlns="http://www.w3.org/2000/svg" width="7px" height="11px" viewBox="0 0 6 10">
    <path d="M6.33,5,1.51.56a.64.64,0,0,0-.84,0,.52.52,0,0,0,0,.77L5.08,5.38.67,9.48a.5.5,0,0,0,0,.76.61.61,0,0,0,.42.16.61.61,0,0,0,.42-.16L6.33,5.76a.5.5,0,0,0,0-.76Z" transform="translate(-0.5 -0.4)"/>
  </svg>
</a>

Ghost Buttons

Show example

Copy markup

Ghost Button

Ghost Button Brand

<div style="padding: 10px; background: #72797F; display: inline-block; margin: 0 1em 0 0;">
  <a href="#" class="c-button c-button--ghost">
    Ghost Button
    <svg class="c-button__svg" xmlns="http://www.w3.org/2000/svg" width="7px" height="11px" viewBox="0 0 6 10">
      <path d="M6.33,5,1.51.56a.64.64,0,0,0-.84,0,.52.52,0,0,0,0,.77L5.08,5.38.67,9.48a.5.5,0,0,0,0,.76.61.61,0,0,0,.42.16.61.61,0,0,0,.42-.16L6.33,5.76a.5.5,0,0,0,0-.76Z" transform="translate(-0.5 -0.4)"/>
    </svg>
  </a>
</div>
<a href="#" class="c-button c-button--ghost-brand">
  Ghost Button Brand
  <svg class="c-button__svg" xmlns="http://www.w3.org/2000/svg" width="7px" height="11px" viewBox="0 0 6 10">
    <path d="M6.33,5,1.51.56a.64.64,0,0,0-.84,0,.52.52,0,0,0,0,.77L5.08,5.38.67,9.48a.5.5,0,0,0,0,.76.61.61,0,0,0,.42.16.61.61,0,0,0,.42-.16L6.33,5.76a.5.5,0,0,0,0-.76Z" transform="translate(-0.5 -0.4)"/>
  </svg>
</a>

Headings

Show example

Copy markup

Headline 1 Large

Headline 1 Large Class

Headline 1

Headline 1 Class

Headline 2

Headline 2 Class

Headline 3

Headline 3 Class

Headline 4

Headline 4 Class

Headline 5

Headline 5 Class

<h1 class="c-heading--h1-large">Headline 1 Large</h1>
<p class="c-heading--h1-large">Headline 1 Large Class</p>
<h1 class="c-heading">Headline 1</h1>
<p class="c-heading--h1">Headline 1 Class</p>
<h2 class="c-heading">Headline 2</h2>
<p class="c-heading--h2">Headline 2 Class</p>
<h3 class="c-heading">Headline 3</h3>
<p class="c-heading--h3">Headline 3 Class</p>
<h4 class="c-heading">Headline 4</h4>
<p class="c-heading--h4">Headline 4 Class</p>
<h5 class="c-heading">Headline 5</h5>
<p class="c-heading--h5">Headline 5 Class</p>

Links

Link

Show example

Copy markup

Normal Link

Link Modifiers

Modifier

Description

.c-link

Normal Link

.c-link.c-link--more

More Link

<div style="margin-bottom: 20px">
  <a href="#" class="c-link">Normal Link</a>
</div>
<div>
  <a href="#" class="c-link c-link--more"> More Link
    <svg class="c-link__svg" xmlns="http://www.w3.org/2000/svg" width="7px" height="11px" viewBox="0 0 6 10">
      <path d="M6.33,5,1.51.56a.64.64,0,0,0-.84,0,.52.52,0,0,0,0,.77L5.08,5.38.67,9.48a.5.5,0,0,0,0,.76.61.61,0,0,0,.42.16.61.61,0,0,0,.42-.16L6.33,5.76a.5.5,0,0,0,0-.76Z" transform="translate(-0.5 -0.4)"/>
    </svg>
  </a>
</div>

Lists

Unordered List

Show example

Copy markup

Wildcard #1
Wildcard #2
- Wildcard #2.1
- Wildcard #2.2
Wildcard #3
Wildcard #4

<ul class="c-list c-list--unordered">
  <li class="c-list__item">Wildcard #1</li>
  <li class="c-list__item">Wildcard #2
    <ul class="c-list c-list--unordered">
      <li class="c-list__item">Wildcard #2.1</li>
      <li class="c-list__item">Wildcard #2.2</li>
    </ul>
  </li>
  <li class="c-list__item">Wildcard #3</li>
  <li class="c-list__item">Wildcard #4</li>
</ul>

Ordered List

Show example

Copy markup

Wildcard #1
Wildcard #2
1. Wildcard #2.1
2. Wildcard #2.2
Wildcard #3
Wildcard #4

<ol class="c-list c-list--ordered">
  <li class="c-list__item">Wildcard #1</li>
  <li class="c-list__item">Wildcard #2
    <ol class="c-list c-list--ordered">
      <li class="c-list__item">Wildcard #2.1</li>
      <li class="c-list__item">Wildcard #2.2</li>
    </ol>
  </li>
  <li class="c-list__item">Wildcard #3</li>
  <li class="c-list__item">Wildcard #4</li>
</ol>

Typography

Paragraph

Show example

Copy markup

Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla.

<p class="c-paragraph">Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla.</p>

Text

Show example

Copy markup

Lorem ipsum dolor sit amet

Highlight – Lorem ipsum dolor sit amet

Quiet – Lorem ipsum dolor sit amet

Loud – Lorem ipsum dolor sit amet

Text Modifiers

Modifier

Description

.c-text.c-text--highlight

Highlighted Text

.c-text.c-text--quiet

Quiet Text

.c-text.c-text--loud

Loud Text

<p><span class="c-text">Lorem ipsum dolor sit amet</span></p>
<p><span class="c-text c-text--highlight">Highlight – Lorem ipsum dolor sit amet</span></p>
<p><span class="c-text c-text--quiet">Quiet – Lorem ipsum dolor sit amet</span></p>
<p><span class="c-text c-text--loud">Loud – Lorem ipsum dolor sit amet</span></p>

Blockquote

Show example

Copy markup

Maecenas faucibus mollis interdum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum.

Max Mustermann

<blockquote class="c-blockquote">
  <div class="c-blockquote__body">
     Maecenas faucibus mollis interdum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum.
  </div>
  <footer class="c-blockquote__footer">Max Mustermann</footer>
</blockquote>