NOKSTRAP guide

Example
Smth wrong
Markup
<div class="ErrorMessage ">Smth wrong</div>
Source: src/components/atoms/error-message.less, line 3
Examples
Default styling

Heading 1

.Heading--alternate
alternate font face

Heading 1

.Heading--light
thinner font

Heading 1

Markup
<h1 class="Heading [modifier class]">Heading 1</h1>
Source: src/components/atoms/heading.less, line 5
Examples
Default styling

Firefox 1.0 was released in 2004 and became a big success. - Mozilla's website

.Quote--medium
medium font size

Firefox 1.0 was released in 2004 and became a big success. - Mozilla's website

.Quote--large
big font size

Firefox 1.0 was released in 2004 and became a big success. - Mozilla's website

Markup
<p>
  <q class="Quote [modifier class]">Firefox 1.0 was released in 2004 and became a big success.</q>
  <small class="Quote-author">- Mozilla's website</small>
</p>
Source: src/components/atoms/quote.less, line 3
Examples
Default styling

Lazy fox ...

.Text--small
small text

Lazy fox ...

.Text--medium
medium text

Lazy fox ...

.Text--midlarge
medium large text

Lazy fox ...

.Text--large
large text

Lazy fox ...

Markup
<p class="Text [modifier class]">Lazy fox ...</p>
Source: src/components/atoms/text.less, line 3