site/_src/styleguide.md

layout	title	sitemap
page	Style Guide	false

Colors

Primary

{% for color in site.data.colors.primary %}

${{ color.name }} #{{ color.hex }}

{% endfor %}

Grays

{% for color in site.data.colors.grays %}

${{ color.name }} #{{ color.hex }}

{% endfor %}

Errors

{% for color in site.data.colors.errors %}

${{ color.name }} #{{ color.hex }}

{% endfor %}

Typography

Body Copy

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis <a href="#">parturient montes</a>, nascetur ridiculus mus. Nullam id dolor id nibh <strong>ultricies vehicula</strong>.</p>

<p>Donec <em>ullamcorper nulla</em> non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.

<p class="large">Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.</p>

Maecenas sed diam eget risus varius blandit sit amet non magna.

<small>Maecenas sed diam eget risus varius blandit sit amet non magna.</small>

Maecenas sed diam eget risus varius blandit sit amet non magna.

<p class="mini">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Lists

• Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
• Est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
• Maecenas sed diam eget risus varius blandit sit amet non magna.

1. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
2. Est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
3. Maecenas sed diam eget risus varius blandit sit amet non magna.

Components

Buttons

Button Button Button Button

<a class="btn btn-primary">Button</a>
<a class="btn btn-primary btn-xs">Button</a>
<a class="btn btn-primary btn-sm">Button</a>
<a class="btn btn-primary btn-lg">Button</a>

Button Button Button Button

<a class="btn btn-primary-outline">Button</a>
<a class="btn btn-primary-outline btn-xs">Button</a>
<a class="btn btn-primary-outline btn-sm">Button</a>
<a class="btn btn-primary-outline btn-lg">Button</a>

Alerts

Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus

Lucas ipsum Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus

Lucas ipsum Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus

Lucas ipsum Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus

<div class="alert alert-success"><strong class="alert__title">Lucas ipsum</strong>Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus</div>

<div class="alert alert-info"><strong class="alert__title">Lucas ipsum</strong>Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus</div>

<div class="alert alert-warning"><strong class="alert__title">Lucas ipsum</strong>Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus</div>

<div class="alert alert-danger"><strong class="alert__title">Lucas ipsum</strong>Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus</div>