Примеры

Icons and sprites

Generated icons and sprites examples

Webfont home icon:

1px sprite:

<p>Webfont home icon: <i class='Icon Icon--home Icon--right'></i></p>

<p>1px sprite: <i class='o-sprite Sprite--test Icon--right'></i></p>

L10n

localeDir(locale)

This site available in following languages:

<p>This site available in following languages:</p>

<ul>
  {% for locale, props in site.locales %}
    <li>
      {% if locale == page.locale %}
        {{ locale }} (current)
      {% else %}
        <a href='{{ localeDir(locale) }}{{ page.url }}'>{{ locale }}</a>
      {% endif %}
    </li>
  {% endfor %}
</ul>

gettext()

Output translation from current locale:

Эта строка будет отображаться на выбранном языке

<p>Output translation from current locale:</p>

<p><code>{{ gettext('This string will be displayd in selected language') }}</code></p>

dgettext()

Output translation from other locales and domains

Display same string from `ru-RU` locale:
Эта строка будет отображаться на выбранном языке

Display same string from `ru-RU` locale and `other` domain:
Эта строка вызвана из домена `other` (this string called from domain `other`)

Display same string from `ru-RU` locale and `nav:bar` domain:
Эта строка вызвана из домена `nav:bar` (this string called from domain `nav:bar`)

Display same string from current locale and `nav:bar` domain:
Эта строка вызвана из домена `nav:bar` (this string called from domain `nav:bar`)

<p>Output translation from other locales and domains</p>

<p>
  Display same string from <code>`ru-RU`</code> locale:<br>
  {{ setLocale('ru-RU') }}
  <code>{{ gettext('This string will be displayd in selected language') }}</code>
</p>
<p>
  Display same string from <code>`ru-RU`</code> locale and <code>`other`</code> domain:<br>
  <code>{{ dgettext('other', 'This string will be displayd in selected language') }}</code>
</p>
<p>
  Display same string from <code>`ru-RU`</code> locale and <code>`nav:bar`</code> domain:<br>
  <code>{{ dgettext('nav/bar', 'This string will be displayd in selected language') }}</code>
</p>
<p>
  {{ setLocale() }}
  Display same string from current locale and <code>`nav:bar`</code> domain:<br>
  <code>{{ dgettext('nav/bar', 'This string will be displayd in selected language') }}</code>
</p>

Plurals

Singular: 1 яблоко

Plural: 2 яблока

Other: 5 яблока

<p>Singular: <code>{{ ngettext('%s apple', '%s apples', 1)|format(1) }}</code></p>
<p>Plural: <code>{{ ngettext('%s apple', '%s apples', 2)|format(2) }}</code></p>
<p>Other: <code>{{ ngettext('%s apple', '%s apples', 5)|format(5) }}</code></p>

Data examples

Inline data

Current year is 2017

Images path is assets/images

<p>Current year is {{ data.currentYear }}</p>

<p>Images path is <code>{{ path.images }}</code></p>

Grids

.o-grid, .o-grid__item
1/2 on tablet+, 1/1 on smaller
1/2 on tablet+, 1/1 on smaller
1/3 on tablet+, 1/1 on smaller
1/3 on tablet+, 1/2 on smaller
1/3 on tablet+, 1/3 on smaller
2/3 on tablet+, 1/3 on smaller
1/3 on tablet+, 2/3 on smaller
1/7 on tablet+, 1/1 on smaller
3/7 on tablet+, 1/1 on smaller
2/7 on tablet+, 1/2 on smaller
1/7 on tablet+, 1/2 on smaller
<div class='o-grid h-bleed-top'>
  <div class='o-grid__item [email protected] h-1/1 h-margin-top'><div class='h-bg-color--primary h-padding-- h-text--'>1/2 on tablet+, 1/1 on smaller</div></div>
  <div class='o-grid__item [email protected] h-1/1 h-margin-top'><div class='h-bg-color--primary h-padding-- h-text--'>1/2 on tablet+, 1/1 on smaller</div></div>
  <div class='o-grid__item [email protected] h-1/1 h-margin-top'><div class='h-bg-color--primary h-padding-- h-text--'>1/3 on tablet+, 1/1 on smaller</div></div>
  <div class='o-grid__item [email protected] h-1/2 h-margin-top'><div class='h-bg-color--primary h-padding-- h-text--'>1/3 on tablet+, 1/2 on smaller</div></div>
  <div class='o-grid__item [email protected] h-1/3 h-margin-top'><div class='h-bg-color--primary h-padding-- h-text--'>1/3 on tablet+, 1/3 on smaller</div></div>
  <div class='o-grid__item [email protected] h-1/3 h-margin-top'><div class='h-bg-color--primary h-padding-- h-text--'>2/3 on tablet+, 1/3 on smaller</div></div>
  <div class='o-grid__item [email protected] h-2/3 h-margin-top'><div class='h-bg-color--primary h-padding-- h-text--'>1/3 on tablet+, 2/3 on smaller</div></div>
  <div class='o-grid__item [email protected] h-1/1 h-margin-top'><div class='h-bg-color--primary h-padding-- h-text--'>1/7 on tablet+, 1/1 on smaller</div></div>
  <div class='o-grid__item [email protected] h-1/1 h-margin-top'><div class='h-bg-color--primary h-padding-- h-text--'>3/7 on tablet+, 1/1 on smaller</div></div>
  <div class='o-grid__item [email protected] h-1/2 h-margin-top'><div class='h-bg-color--primary h-padding-- h-text--'>2/7 on tablet+, 1/2 on smaller</div></div>
  <div class='o-grid__item [email protected] h-1/2 h-margin-top'><div class='h-bg-color--primary h-padding-- h-text--'>1/7 on tablet+, 1/2 on smaller</div></div>
</div>

.o-grid .h-childs-displace0
1/3
1/3
1/3
1/3
1/3
1/3
<div class='o-grid h-childs-displace0 h-bleed-top--'>
  <div class='o-grid__item h-1/3 h-margin-top--'><div class='h-bg-color--primary h-padding-- h-text--'>1/3</div></div>
  <div class='o-grid__item h-1/3 h-margin-top--'><div class='h-bg-color--primary h-padding-- h-text--'>1/3</div></div>
  <div class='o-grid__item h-1/3 h-margin-top--'><div class='h-bg-color--primary h-padding-- h-text--'>1/3</div></div>
  <div class='o-grid__item h-1/3 h-margin-top--'><div class='h-bg-color--primary h-padding-- h-text--'>1/3</div></div>
  <div class='o-grid__item h-1/3 h-margin-top--'><div class='h-bg-color--primary h-padding-- h-text--'>1/3</div></div>
  <div class='o-grid__item h-1/3 h-margin-top--'><div class='h-bg-color--primary h-padding-- h-text--'>1/3</div></div>
</div>

.o-grid .h-childs-displace--
1/3
1/3
1/3
1/3
1/3
1/3
<div class='o-grid h-childs-displace-- h-bleed-top--'>
  <div class='o-grid__item h-1/3 h-margin-top--'><div class='h-bg-color--primary h-padding-- h-text--'>1/3</div></div>
  <div class='o-grid__item h-1/3 h-margin-top--'><div class='h-bg-color--primary h-padding-- h-text--'>1/3</div></div>
  <div class='o-grid__item h-1/3 h-margin-top--'><div class='h-bg-color--primary h-padding-- h-text--'>1/3</div></div>
  <div class='o-grid__item h-1/3 h-margin-top--'><div class='h-bg-color--primary h-padding-- h-text--'>1/3</div></div>
  <div class='o-grid__item h-1/3 h-margin-top--'><div class='h-bg-color--primary h-padding-- h-text--'>1/3</div></div>
  <div class='o-grid__item h-1/3 h-margin-top--'><div class='h-bg-color--primary h-padding-- h-text--'>1/3</div></div>
</div>

.o-grid .h-childs-displace+
1/3
1/3
1/3
1/3
1/3
1/3
<div class='o-grid h-childs-displace+ h-bleed-top+'>
  <div class='o-grid__item h-1/3 h-margin-top+'><div class='h-bg-color--primary h-padding-- h-text--'>1/3</div></div>
  <div class='o-grid__item h-1/3 h-margin-top+'><div class='h-bg-color--primary h-padding-- h-text--'>1/3</div></div>
  <div class='o-grid__item h-1/3 h-margin-top+'><div class='h-bg-color--primary h-padding-- h-text--'>1/3</div></div>
  <div class='o-grid__item h-1/3 h-margin-top+'><div class='h-bg-color--primary h-padding-- h-text--'>1/3</div></div>
  <div class='o-grid__item h-1/3 h-margin-top+'><div class='h-bg-color--primary h-padding-- h-text--'>1/3</div></div>
  <div class='o-grid__item h-1/3 h-margin-top+'><div class='h-bg-color--primary h-padding-- h-text--'>1/3</div></div>
</div>

.o-grid .h-childs-displace++
1/3
1/3
1/3
1/3
1/3
1/3
<div class='o-grid h-childs-displace++ h-bleed-top+'>
  <div class='o-grid__item h-1/3 h-margin-top++'><div class='h-bg-color--primary h-padding-- h-text--'>1/3</div></div>
  <div class='o-grid__item h-1/3 h-margin-top++'><div class='h-bg-color--primary h-padding-- h-text--'>1/3</div></div>
  <div class='o-grid__item h-1/3 h-margin-top++'><div class='h-bg-color--primary h-padding-- h-text--'>1/3</div></div>
  <div class='o-grid__item h-1/3 h-margin-top++'><div class='h-bg-color--primary h-padding-- h-text--'>1/3</div></div>
  <div class='o-grid__item h-1/3 h-margin-top++'><div class='h-bg-color--primary h-padding-- h-text--'>1/3</div></div>
  <div class='o-grid__item h-1/3 h-margin-top++'><div class='h-bg-color--primary h-padding-- h-text--'>1/3</div></div>
</div>

.o-grid. .h-flex--nowrap
No fallback for IE8 and IE9 — childs will always wrap
1/3
2/3
2/3
3/3
<div class='o-grid h-bleed-top h-flex--nowrap'>
  <div class='o-grid__item h-1/3 h-margin-top'><div class='h-bg-color--primary h-padding-- h-text--'>1/3</div></div>
  <div class='o-grid__item h-2/3 h-margin-top'><div class='h-bg-color--primary h-padding-- h-text--'>2/3</div></div>
  <div class='o-grid__item h-2/3 h-margin-top'><div class='h-bg-color--primary h-padding-- h-text--'>2/3</div></div>
  <div class='o-grid__item h-3/3 h-margin-top'><div class='h-bg-color--primary h-padding-- h-text--'>3/3</div></div>
</div>

.o-grid .h-flex-y--stretch
No fallback for IE8 and IE9 — childs won't have similar height and will align to top
1/3
1/3
Second line
Third line
1/3
3/3
<div class='o-grid h-bleed-top h-flex-y--stretch'>
  <div class='o-grid__item h-1/3 h-margin-top'><div class='h-bg-color--primary h-padding-- h-text--' style='height: 100%;'>1/3</div></div>
  <div class='o-grid__item h-1/3 h-margin-top'><div class='h-bg-color--primary h-padding-- h-text--' style='height: 100%;'>1/3<br>Second line<br>Third line</div></div>
  <div class='o-grid__item h-1/3 h-margin-top'><div class='h-bg-color--primary h-padding-- h-text--' style='height: 100%;'>1/3</div></div>
  <div class='o-grid__item h-3/3 h-margin-top'><div class='h-bg-color--primary h-padding-- h-text--' style='height: 100%;'>3/3</div></div>
</div>

.o-grid .h-flex-y--top
Default behaviour on IE8 and IE9
1/3
1/3
Second line
Third line
1/3
3/3
<div class='o-grid h-bleed-top h-flex-y--top'>
  <div class='o-grid__item h-1/3 h-margin-top'><div class='h-bg-color--primary h-padding-- h-text--' style='height: 100%;'>1/3</div></div>
  <div class='o-grid__item h-1/3 h-margin-top'><div class='h-bg-color--primary h-padding-- h-text--' style='height: 100%;'>1/3<br>Second line<br>Third line</div></div>
  <div class='o-grid__item h-1/3 h-margin-top'><div class='h-bg-color--primary h-padding-- h-text--' style='height: 100%;'>1/3</div></div>
  <div class='o-grid__item h-3/3 h-margin-top'><div class='h-bg-color--primary h-padding-- h-text--' style='height: 100%;'>3/3</div></div>
</div>

Media

.o-media .o-media0
Placeholder

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class='o-media o-media0'>
  <img class='o-media__aside' src='https://placekitten.com/100/100' alt='Placeholder'>
  <p class='o-media__content'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

.o-media
Placeholder

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class='o-media'>
  <img class='o-media__aside' src='https://placekitten.com/100/100' alt='Placeholder'>
  <p class='o-media__content'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

.o-media .o-media+
Placeholder

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class='o-media o-media+'>
  <img class='o-media__aside' src='https://placekitten.com/100/100' alt='Placeholder'>
  <p class='o-media__content'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

.o-media .o-media--rev
Placeholder

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class='o-media o-media--rev'>
  <img class='o-media__aside' src='https://placekitten.com/100/100' alt='Placeholder'>
  <p class='o-media__content'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

.o-media .h-flex-y--center
No fallback for IE8 and IE9
Placeholder

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class='o-media h-flex-y--center'>
  <img class='o-media__aside' src='https://placekitten.com/100/100' alt='Placeholder'>
  <p class='o-media__content'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

.o-media .h-flex-y--end
No fallback for IE8 and IE9
Placeholder

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class='o-media h-flex-y--end'>
  <img class='o-media__aside' src='https://placekitten.com/100/100' alt='Placeholder'>
  <p class='o-media__content'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

Alternative markup

.o-media .h-flex-y--center
No fallback for IE8 and IE9
Placeholder

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum.

<div class='o-media h-flex-y--center'>
  <div class='o-media__aside'>
    <img src='https://placekitten.com/100/100' alt='Placeholder'>
  </div>
  <div class='o-media__content'>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Lorem ipsum.</p>
  </div>
</div>

Nav

.o-nav
<ul class='o-nav'>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Home</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>About</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Contact</a></li>
</ul>

<div class='o-nav'>
  <a class='h-border h-bg-color--outer-space' href='#'>Home</a>
  <a class='h-border h-bg-color--outer-space' href='#'>About</a>
  <a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a>
  <a class='h-border h-bg-color--outer-space' href='#'>Contact</a>
</div>

.o-nav .o-nav--space
Default behaviour on IE8 and IE9
<ul class='o-nav o-nav--space'>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Home</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>About</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Contact</a></li>
</ul>

<div class='o-nav o-nav--space'>
  <a class='h-border h-bg-color--outer-space' href='#'>Home</a>
  <a class='h-border h-bg-color--outer-space' href='#'>About</a>
  <a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a>
  <a class='h-border h-bg-color--outer-space' href='#'>Contact</a>
</div>

.o-nav .h-flex-x--end
No fallback for IE8 and IE9. Use .h-float--right and .o-clearfix to get crossbrowser solution.
<ul class='o-nav h-flex-x--end'>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Home</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>About</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Contact</a></li>
</ul>

<div class='o-nav h-flex-x--end'>
  <a class='h-border h-bg-color--outer-space' href='#'>Home</a>
  <a class='h-border h-bg-color--outer-space' href='#'>About</a>
  <a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a>
  <a class='h-border h-bg-color--outer-space' href='#'>Contact</a>
</div>

.o-nav .h-flex-x--around
No fallback for IE8 and IE9
<ul class='o-nav h-flex-x--around'>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Home</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>About</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Contact</a></li>
</ul>

<div class='o-nav h-flex-x--around'>
  <a class='h-border h-bg-color--outer-space' href='#'>Home</a>
  <a class='h-border h-bg-color--outer-space' href='#'>About</a>
  <a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a>
  <a class='h-border h-bg-color--outer-space' href='#'>Contact</a>
</div>

.o-nav .h-flex-x--between
No fallback for IE8 and IE9.
<ul class='o-nav h-flex-x--between'>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Home</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>About</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Contact</a></li>
</ul>

<div class='o-nav h-flex-x--between'>
  <a class='h-border h-bg-color--outer-space' href='#'>Home</a>
  <a class='h-border h-bg-color--outer-space' href='#'>About</a>
  <a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a>
  <a class='h-border h-bg-color--outer-space' href='#'>Contact</a>
</div>

.o-nav .h-{{width}}
No fallback for IE8 and IE9. Use floats to achieve similar effect on IE8 and IE9
<ul class='o-nav'>
  <li class='h-bg-color--black-30 h-1/2'><a class='h-border h-bg-color--outer-space' href='#'>Home</a></li>
  <li class='h-bg-color--black-30 h-1/2'><a class='h-border h-bg-color--outer-space' href='#'>About</a></li>
  <li class='h-bg-color--black-30 h-1/2'><a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a></li>
  <li class='h-bg-color--black-30 h-1/2'><a class='h-border h-bg-color--outer-space' href='#'>Contact</a></li>
</ul>

<div class='o-nav'>
  <a class='h-border h-bg-color--outer-space h-1/2' href='#'>Home</a>
  <a class='h-border h-bg-color--outer-space h-1/2' href='#'>About</a>
  <a class='h-border h-bg-color--outer-space h-1/2' href='#'>Portfolio</a>
  <a class='h-border h-bg-color--outer-space h-1/2' href='#'>Contact</a>
</div>

.o-nav .o-nav--stacked
<ul class='o-nav o-nav--stacked'>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Home</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>About</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Contact</a></li>
</ul>

<div class='o-nav o-nav--stacked'>
  <a class='h-border h-bg-color--outer-space' href='#'>Home</a>
  <a class='h-border h-bg-color--outer-space' href='#'>About</a>
  <a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a>
  <a class='h-border h-bg-color--outer-space' href='#'>Contact</a>
</div>

.o-nav .o-nav--block
<ul class='o-nav o-nav--block'>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Home</a></li>
  <li class='h-bg-color--black-30 h-margin'><a class='h-border h-bg-color--outer-space h-margin' href='#'>About</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Contact</a></li>
</ul>

<nav class='o-nav o-nav--block'>
  <a class='h-border h-bg-color--outer-space' href='#'>Home</a>
  <a class='h-border h-bg-color--outer-space h-margin' href='#'>About</a>
  <a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a>
  <a class='h-border h-bg-color--outer-space' href='#'>Contact</a>
</nav>

.o-nav .o-nav--inline
<ul class='o-nav o-nav--inline'>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Home</a></li>
  <li class='h-bg-color--black-30 h-margin'><a class='h-border h-bg-color--outer-space h-margin' href='#'>About</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Contact</a></li>
</ul>

<nav class='o-nav o-nav--inline'>
  <a class='h-border h-bg-color--outer-space' href='#'>Home</a>
  <a class='h-border h-bg-color--outer-space h-margin' href='#'>About</a>
  <a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a>
  <a class='h-border h-bg-color--outer-space' href='#'>Contact</a>
</nav>

.o-nav .o-nav--keywords
<ul class='o-nav o-nav--keywords'>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Home</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>About</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Contact</a></li>
</ul>

.o-nav .h-anchors-padding--
<ul class='o-nav h-anchors-padding--'>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Home</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>About</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Contact</a></li>
</ul>

<nav class='o-nav h-anchors-padding--'>
  <a class='h-border h-bg-color--outer-space' href='#'>Home</a>
  <a class='h-border h-bg-color--outer-space' href='#'>About</a>
  <a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a>
  <a class='h-border h-bg-color--outer-space' href='#'>Contact</a>
</nav>

.o-nav .h-anchors-padding
<ul class='o-nav h-anchors-padding'>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Home</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>About</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Contact</a></li>
</ul>

<nav class='o-nav h-anchors-padding'>
  <a class='h-border h-bg-color--outer-space' href='#'>Home</a>
  <a class='h-border h-bg-color--outer-space' href='#'>About</a>
  <a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a>
  <a class='h-border h-bg-color--outer-space' href='#'>Contact</a>
</nav>

.o-nav .h-anchors-padding+
<ul class='o-nav h-anchors-padding+'>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Home</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>About</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Contact</a></li>
</ul>

<nav class='o-nav h-anchors-padding+'>
  <a class='h-border h-bg-color--outer-space' href='#'>Home</a>
  <a class='h-border h-bg-color--outer-space' href='#'>About</a>
  <a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a>
  <a class='h-border h-bg-color--outer-space' href='#'>Contact</a>
</nav>

.o-nav .o-nav--pack
Partial fallback for IE8 and IE9 — childs won't wrap
<ul class='o-nav o-nav--pack'>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Home</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>About</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Contact</a></li>
</ul>

<nav class='o-nav o-nav--pack'>
  <a class='h-border h-bg-color--outer-space' href='#'>Home</a>
  <a class='h-border h-bg-color--outer-space' href='#'>About</a>
  <a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a>
  <a class='h-border h-bg-color--outer-space' href='#'>Contact</a>
</nav>

.o-nav .o-nav--fixed-pack
Partial fallback for IE8 and IE9 — childs won't wrap
<ul class='o-nav o-nav--pack'>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Much longer menu entry</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>About</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Contact</a></li>
</ul>
<ul class='o-nav o-nav--fixed-pack'>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Much longer menu entry</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>About</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Contact</a></li>
</ul>

<nav class='o-nav o-nav--pack'>
  <a class='h-border h-bg-color--outer-space' href='#'>Much longer menu entry</a>
  <a class='h-border h-bg-color--outer-space' href='#'>About</a>
  <a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a>
  <a class='h-border h-bg-color--outer-space' href='#'>Contact</a>
</nav>
<nav class='o-nav o-nav--fixed-pack'>
  <a class='h-border h-bg-color--outer-space' href='#'>Much longer menu entry</a>
  <a class='h-border h-bg-color--outer-space' href='#'>About</a>
  <a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a>
  <a class='h-border h-bg-color--outer-space' href='#'>Contact</a>
</nav>

.o-nav o-nav--pack, h-margin-sides--
<div class='o-nav  o-nav--pack'>
  <a class='h-border h-margin-sides--' href='#'>Home</a>
  <a class='h-border h-margin-sides--' href='#'>About</a>
  <a class='h-border h-margin-sides--' href='#'>Portfolio</a>
  <a class='h-border h-margin-sides--' href='#'>Contact</a>
</div>

<ul class='o-nav  o-nav--pack'>
  <li class='h-bg-color--black-30 h-margin-sides--'><a class='h-border h-bg-color--outer-space' href='#'>Home</a></li>
  <li class='h-bg-color--black-30 h-margin-sides--'><a class='h-border h-bg-color--outer-space' href='#'>About</a></li>
  <li class='h-bg-color--black-30 h-margin-sides--'><a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a></li>
  <li class='h-bg-color--black-30 h-margin-sides--'><a class='h-border h-bg-color--outer-space' href='#'>Contact</a></li>
</ul>

.o-nav o-nav--pack, h-margin-sides
<div class='o-nav o-nav--pack'>
  <a class='h-border h-margin-sides' href='#'>Home</a>
  <a class='h-border h-margin-sides' href='#'>About</a>
  <a class='h-border h-margin-sides' href='#'>Portfolio</a>
  <a class='h-border h-margin-sides' href='#'>Contact</a>
</div>

<ul class='o-nav o-nav--pack'>
  <li class='h-bg-color--black-30 h-margin-sides'><a class='h-border h-bg-color--outer-space' href='#'>Home</a></li>
  <li class='h-bg-color--black-30 h-margin-sides'><a class='h-border h-bg-color--outer-space' href='#'>About</a></li>
  <li class='h-bg-color--black-30 h-margin-sides'><a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a></li>
  <li class='h-bg-color--black-30 h-margin-sides'><a class='h-border h-bg-color--outer-space' href='#'>Contact</a></li>
</ul>

.o-nav o-nav--pack, h-margin-sides+
<div class='o-nav o-nav--pack'>
  <a class='h-border h-margin-sides+' href='#'>Home</a>
  <a class='h-border h-margin-sides+' href='#'>About</a>
  <a class='h-border h-margin-sides+' href='#'>Portfolio</a>
  <a class='h-border h-margin-sides+' href='#'>Contact</a>
</div>

<ul class='o-nav o-nav--pack'>
  <li class='h-bg-color--black-30 h-margin-sides+'><a class='h-border h-bg-color--outer-space' href='#'>Home</a></li>
  <li class='h-bg-color--black-30 h-margin-sides+'><a class='h-border h-bg-color--outer-space' href='#'>About</a></li>
  <li class='h-bg-color--black-30 h-margin-sides+'><a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a></li>
  <li class='h-bg-color--black-30 h-margin-sides+'><a class='h-border h-bg-color--outer-space' href='#'>Contact</a></li>
</ul>

Typography helpers

.h-font-size*
Those aren't very useful on it's own, but can be used to set font size on elements like buttons, etc.

Text

Text

Text

Text

Text

Text

Text

Text

Text

Text

Text

Text

Text

Text

Text

Text

Text

Text

Text

Text

Text

Text

<div class='o-show-grid'>
  <p class='h-font-size'>Text</p>
  <p class='h-font-size-'>Text</p>
  <p class='h-font-size--'>Text</p>

  <p class='h-font-size--h1'>Text</p>
  <p class='h-font-size--h2'>Text</p>
  <p class='h-font-size--h3'>Text</p>
  <p class='h-font-size--h4'>Text</p>
  <p class='h-font-size--h5'>Text</p>
  <p class='h-font-size--h6'>Text</p>

  <p class='h-font-size--extra-h++'>Text</p>
  <p class='h-font-size--extra-h+'>Text</p>
  <p class='h-font-size--extra-h'>Text</p>

  <p class='h-font-size--em--'>Text</p>
  <p class='h-font-size--em-'>Text</p>
  <p class='h-font-size--em+---'>Text</p>
  <p class='h-font-size--em+--'>Text</p>
  <p class='h-font-size--em+'>Text</p>
  <p class='h-font-size--em++---'>Text</p>
  <p class='h-font-size--em++--'>Text</p>
  <p class='h-font-size--em++'>Text</p>
  <p class='h-font-size--em+++'>Text</p>
  <p class='h-font-size--em++++'>Text</p>
</div>

.h-line-height*

First line
Second line

First line
Second line

First line
Second line

First line
Second line

First line
Second line

First line
Second line

First line
Second line

First line
Second line

First line
Second line

First line
Second line

First line
Second line

First line
Second line

<div class='o-show-grid'>
  <p class='h-line-height'>First line<br>Second line</p>
  <p class='h-line-height-'>First line<br>Second line</p>
  <p class='h-line-height--'>First line<br>Second line</p>

  <p class='h-line-height--h1'>First line<br>Second line</p>
  <p class='h-line-height--h2'>First line<br>Second line</p>
  <p class='h-line-height--h3'>First line<br>Second line</p>
  <p class='h-line-height--h4'>First line<br>Second line</p>
  <p class='h-line-height--h5'>First line<br>Second line</p>
  <p class='h-line-height--h6'>First line<br>Second line</p>

  <p class='h-line-height--extra-h++'>First line<br>Second line</p>
  <p class='h-line-height--extra-h+'>First line<br>Second line</p>
  <p class='h-line-height--extra-h'>First line<br>Second line</p>
</div>

.h-text*, .h-h*, .h-extra-h*

First line
Second line

First line
Second line

First line
Second line

First line
Second line

First line
Second line

First line
Second line

First line
Second line

First line
Second line

First line
Second line

First line
Second line

First line
Second line

First line
Second line

First line
Second line

First line
Second line

First line
Second line

First line
Second line

First line
Second line

First line
Second line

First line
Second line

First line
Second line

First line
Second line

First line
Second line

<div class='o-show-grid'>
  <p class='h-text'>First line<br>Second line</p>
  <p class='h-text-'>First line<br>Second line</p>
  <p class='h-text--'>First line<br>Second line</p>

  <p class='h-h1'>First line<br>Second line</p>
  <p class='h-h2'>First line<br>Second line</p>
  <p class='h-h3'>First line<br>Second line</p>
  <p class='h-h4'>First line<br>Second line</p>
  <p class='h-h5'>First line<br>Second line</p>
  <p class='h-h6'>First line<br>Second line</p>

  <p class='h-extra-h++'>First line<br>Second line</p>
  <p class='h-extra-h+'>First line<br>Second line</p>
  <p class='h-extra-h'>First line<br>Second line</p>

  <p class='h-text--em--'>First line<br>Second line</p>
  <p class='h-text--em-'>First line<br>Second line</p>
  <p class='h-text--em+---'>First line<br>Second line</p>
  <p class='h-text--em+--'>First line<br>Second line</p>
  <p class='h-text--em+'>First line<br>Second line</p>
  <p class='h-text--em++---'>First line<br>Second line</p>
  <p class='h-text--em++--'>First line<br>Second line</p>
  <p class='h-text--em++'>First line<br>Second line</p>
  <p class='h-text--em+++'>First line<br>Second line</p>
  <p class='h-text--em++++'>First line<br>Second line</p>
</div>

.h-text--tracked*

Headline

Headline

Headline

Headline

<p class='h-text--tracked--'>Headline</p>
<p class='h-text--tracked+'><span class='h-text--tracked0'>Headline</span></p>
<p class='h-text--tracked'>Headline</p>
<p class='h-text--tracked+'>Headline</p>

Opacity helpers

.h-opacity--*, .h-opacity--*:h

Hover me

Hover me

Hover me

Hover me

Hover me

Hover me

Hover me

Hover me

Hover me

Hover me

Hover me

Hover me

<p class='h-opacity--2.5 h-opacity--100:h'>Hover me</p>
<p class='h-opacity--5 h-opacity--90:h'>Hover me</p>
<p class='h-opacity--10 h-opacity--80:h'>Hover me</p>
<p class='h-opacity--20 h-opacity--70:h'>Hover me</p>
<p class='h-opacity--30 h-opacity--60:h'>Hover me</p>
<p class='h-opacity--40 h-opacity--50:h'>Hover me</p>
<p class='h-opacity--50 h-opacity--40:h'>Hover me</p>
<p class='h-opacity--60 h-opacity--30:h'>Hover me</p>
<p class='h-opacity--70 h-opacity--20:h'>Hover me</p>
<p class='h-opacity--80 h-opacity--10:h'>Hover me</p>
<p class='h-opacity--90 h-opacity--5:h'>Hover me</p>
<p class='h-opacity--100 h-opacity--2.5:h'>Hover me</p>

Color helpers

.h-color--*, .h-color--*:h

Hover me

<p class='h-color--ivory h-color--primary:h'>Hover me</p>

.h-bg-color--*, .h-bg-color--*:h

Hover me

<p class='h-bg-color--primary h-bg-color--outer-space:h h-padding--'>Hover me</p>

.h-border-color--*, .h-border-color--*:h

Hover me

<p class='h-border h-border-color--primary h-border-color--outer-space:h h-padding--'>Hover me</p>

Images

.g-image--left

Testing image Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

<p>
  <img class='g-image--left' src='https://placekitten.com/100/100' alt='Testing image'>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>

.g-image--right

Testing image Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

<p>
  <img class='g-image--right' src='https://placekitten.com/100/100' alt='Testing image'>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>

Iconic list

o-iconic-list, o-iconic-list__icon
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  • Has been the industry's standard dummy text ever since the 1500s
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  • Has been the industry's standard dummy text ever since the 1500s
<ul class="o-iconic-list g-list--indent">
  <li><i class="o-iconic-list__icon Icon Icon--home"></i> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
  <li><i class="o-sprite Sprite--test"></i> Has been the industry's standard dummy text ever since the 1500s</li>
</ul>

<ul class='g-list--indent'>
  <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
  <li>Has been the industry's standard dummy text ever since the 1500s</li>
</ul>

Spacing helpers

h-childs-space-top
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  • Has been the industry's standard dummy text ever since the 1500s
    • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    • Has been the industry's standard dummy text ever since the 1500s
    • Has been the industry's standard dummy text ever since the 1500s
1
2
3
<ul class='h-childs-space-top--'>
  <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
  <li>Has been the industry's standard dummy text ever since the 1500s</li>
  <li>
    <ul>
      <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
      <li>Has been the industry's standard dummy text ever since the 1500s</li>
      <li>Has been the industry's standard dummy text ever since the 1500s</li>
    </ul>
  </li>
</ul>

<nav class='h-childs-space-top+ h-margin-bottom'>
  <a class='h-inline-block' href='#'>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a>
  <a class='h-inline-block' href='#'>Has been the industry's standard dummy text ever since the 1500s</a>
</nav>

<form class='h-childs-space-top++'>
  <fieldset>1</fieldset>
  <fieldset>2</fieldset>
  <fieldset>3</fieldset>
</form>

h-childs-displace
1/2
1/2
1/2
1/2
Aside

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class='o-grid h-text-- h-childs-displace++ h-childs-margin-top++ h-bleed-top++ h-margin-bottom'>
  <div class='o-grid__item h-1/2'><div class='h-bg-color h-bg-color--primary'>1/2</div></div>
  <div class='o-grid__item h-1/2'><div class='h-bg-color h-bg-color--primary'>1/2</div></div>
  <div class='o-grid__item h-1/2'><div class='h-bg-color h-bg-color--primary'>1/2</div></div>
  <div class='o-grid__item h-1/2'><div class='h-bg-color h-bg-color--primary'>1/2</div></div>
</div>

<div class='o-media h-childs-displace+ o-media--rev'>
  <div class='o-media__aside'>Aside</div>
  <p class='o-media__content'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

h-childs-margin
<nav class='o-nav h-childs-margin'>
  <a class='h-border' href='#'>Home</a>
  <a class='h-border' href='#'>About</a>
  <a class='h-border' href='#'>Portfolio</a>
  <a class='h-border' href='#'>Contact</a>
</nav>

<ul class='o-nav h-childs-margin'>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Home</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>About</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Contact</a></li>
</ul>

h-childs-padding
<nav class='o-nav h-childs-padding'>
  <a class='h-border' href='#'>Home</a>
  <a class='h-border' href='#'>About</a>
  <a class='h-border' href='#'>Portfolio</a>
  <a class='h-border' href='#'>Contact</a>
</nav>

<ul class='o-nav h-childs-padding'>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Home</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>About</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Contact</a></li>
</ul>

h-anchors-margin
<nav class='o-nav h-anchors-margin'>
  <a class='h-border' href='#'>Home</a>
  <a class='h-border' href='#'>About</a>
  <a class='h-border' href='#'>Portfolio</a>
  <a class='h-border' href='#'>Contact</a>
</nav>

<ul class='o-nav h-anchors-margin'>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Home</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>About</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Contact</a></li>
</ul>

h-anchors-padding
<nav class='o-nav h-anchors-padding'>
  <a class='h-border' href='#'>Home</a>
  <a class='h-border' href='#'>About</a>
  <a class='h-border' href='#'>Portfolio</a>
  <a class='h-border' href='#'>Contact</a>
</nav>

<ul class='o-nav h-anchors-padding'>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Home</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>About</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Portfolio</a></li>
  <li class='h-bg-color--black-30'><a class='h-border h-bg-color--outer-space' href='#'>Contact</a></li>
</ul>

h-cells-padding
Header 1 Header 2
Value 1 Value 2
<table class='h-cells-padding'>
  <thead>
    <th>Header 1</th>
    <th>Header 2</th>
  </thead>
  <tbody>
    <td>Value 1</td>
    <td>Value 2</td>
  </tbody>
</table>

Forms

Input with placeholder

<form>
  <label>Label</label>
  <input type='text' placeholder="Placeholder" />
</form>

Input with value

<form>
  <label>Label</label>
  <input type='text' value="Pretyped in value" />
</form>

.o-extra-help
.edu emails only
<form>
  <label>Label</label>
  <input type='email' class='g-input'>
  <small class='o-extra-help'>.edu emails only</small>
</form>

Buttons

.Btn o-btn--inherit
<div class='o-show-grid h-padding-bottom'>
  <p><a class='Btn o-btn--inherit' href='#'>Button label</a></p>
  <p><a class='Btn o-btn--inherit' href='#'>First line<br>Second line</a></p>
</div>

.Btn Btn--
<div class='o-show-grid h-padding-bottom'>
  <p><a class='Btn Btn--' href='#'>Button label</a></p>
  <p><a class='Btn Btn--' href='#'>First line<br>Second line</a></p>
</div>

.Btn Btn-
<div class='o-show-grid h-padding-bottom'>
  <p><a class='Btn Btn-' href='#'>Button label</a></p>
  <p><a class='Btn Btn-' href='#'>First line<br>Second line</a></p>
</div>

.Btn
<div class='o-show-grid h-padding-bottom'>
  <p><a class='Btn Btn' href='#'>Button label</a></p>
  <p><a class='Btn Btn' href='#'>First line<br>Second line</a></p>
</div>

.Btn Btn+
<div class='o-show-grid h-padding-bottom'>
  <p><a class='Btn Btn+' href='#'>Button label</a></p>
  <p><a class='Btn Btn+' href='#'>First line<br>Second line</a></p>
</div>

.Btn Btn++
<div class='o-show-grid h-padding-bottom'>
  <p><a class='Btn Btn++' href='#'>Button label</a></p>
  <p><a class='Btn Btn++' href='#'>First line<br>Second line</a></p>
</div>

.Btn Btn--wide--
<div class='o-show-grid h-padding-bottom'>
  <p><a class='Btn Btn--wide--' href='#'>Button label</a></p>
  <p><a class='Btn Btn--wide--' href='#'>First line<br>Second line</a></p>
</div>

.Btn Btn--wide
<div class='o-show-grid h-padding-bottom'>
  <p><a class='Btn Btn--wide' href='#'>Button label</a></p>
  <p><a class='Btn Btn--wide' href='#'>First line<br>Second line</a></p>
</div>

.Btn Btn--wide++
<div class='o-show-grid h-padding-bottom'>
  <p><a class='Btn Btn--wide++' href='#'>Button label</a></p>
  <p><a class='Btn Btn--wide++' href='#'>First line<br>Second line</a></p>
</div>

.Btn o-btn--full
<div class='o-show-grid h-padding-bottom'>
  <p><a class='Btn o-btn--full' href='#'>Button label</a></p>
  <p><a class='Btn o-btn--full' href='#'>First line<br>Second line</a></p>
</div>

.Btn

Disabled a.button

<div class='o-show-grid h-padding-bottom'>
  <p><button class='Btn' disabled>Disabled button</button></p>
  <p><a class='Btn is-disabled' href='#'>Disabled a.button</a></p>
</div>

Links

a, .g-link
<a class="g-link" href='#'>Base link</a>

.g-link--inherit
<a class="g-link--inherit" href='#' >Flushed link</a>

.g-link--inherit
<p class='h-bg-color--primary'><a class="g-link--inherit" href='g-link--inherit' >Flushed link on background</a></p>

.h-text--underline
<a class='h-border0 h-text--underline' href='#'>Underline link</a>

.h-text--underline:h
<a class='h-text--underline0 h-text--underline:h' href='#'>Underline on hover link</a>

.h-border-bottom:h
<a class='h-border-bottom0 h-border-bottom:h' href='#'>Border on hover link</a>

.o-relink
<a class="o-relink" href='#'>
  :3 <span class="o-relink__to">Relinked link</span> and <span class="o-relink__to">same link</span>
</a>

.o-relink-rev
<a class="o-relink-rev" href='#'>
  :3 <span class="o-relink-rev__to">Relinked--rev link</span>
</a>

.o-reline
<a class="o-reline" href='#'>
  :3 <span class="o-reline__to">Relined link</span> and <span class="o-reline__to">same link</span>
</a>

.o-reline--rev
<a class="o-reline--rev" href='#'>
  :3 <span class="o-reline__to">Relined--rev link</span>
</a>

.o-reline-border-bottom
<a class="o-reline-border-bottom" href='#'>
  :3 <span class="o-reline-border-bottom__to">Border relined link</span>
</a>

.o-reline-border-bottom, .h-border--inherit
<a class="o-reline-border-bottom" href='#'>
  :3 <span class="o-reline-border-bottom__to h-border--inherit">Border relined link with inherit</span>
</a>

.o-reline-border-bottom--rev
<a class="o-reline-border-bottom--rev" href='#'>
  :3 <span class="o-reline-border-bottom__to">Border relined--rev link</span>
</a>

.o-reline-border-bottom--rev, .h-border--inherit
<a class="o-reline-border-bottom--rev" href='#'>
  :3 <span class="o-reline-border-bottom__to h-border--inherit">Border relined--rev link with inherit</span>
</a>