3.1 #Typography.ErrorMessage Error message
Styling for error message text
Example
Smth wrong
Markup
<div class="ErrorMessage ">Smth wrong</div>
Source:
components/atoms/error-message.less
, line 3
3.2 #Typography.Headings Heading
Styling for different heading sizes
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:
components/atoms/heading.less
, line 5
3.3 #Typography.Quote Quote
Styling for a quote
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:
components/atoms/quote.less
, line 3
3.4 #Typography.Text Text
Styling for different heading sizes
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:
components/atoms/text.less
, line 3