Styleguide

Typography

This is an h1

This is an h2

This is an h3

This is an h4

This is an h5

This is a paragraph.

Buttons and links

Basic link
<a href="#">Basic link</a>
Return link
<a class="return-link" href="#">Return link</a>
<button class="btn btn--primary" type="button">Basic button</button>
<button class="btn btn--primary" type="button"><span>Primary</span> button</button>
<button class="btn btn--secondary" type="button">Secondary button</button>
<button class="btn btn--no-animate" type="button">No animation</button>
<button class="btn btn--small" type="button">Small button</button>
<button class="btn btn--large" type="button">Large button</button>
<button class="btn btn--full" type="button">Full button</button>
<button class="btn btn--inverse" type="button">Inverse button</button>
<button class="btn btn--body btn--no-animate" type="button">Matches body bg</button>
<button class="btn btn--circle btn--no-animate" type="button">Circle button</button>
<button class="btn btn--loading btn--no-animate" type="button">Loading button</button>

Form elements

<label for="styleguideText">Text input</label>

<input id="styleguideText" type="text" placeholder="Enter some text">

<label for="styleguideTextarea">Textarea</label>

<textarea id="styleguideTextarea" placeholder="Enter some more text"></textarea>

Table elements

Basic table

Size XXS XS S M L XL XXL
Waist (cm) 71 76 81 86 91 97 104
Waist (inches) 20 30 32 34 36 38 41
Leg Inseam (cm) 73 76 79 82 85 88 88
Leg Inseam (inches) 28.25 29.25 31 32.25 33.5 34.5 34.5

<div class="table-wrapper">

<table> ... </table>

</div>

Sizing table

Size XXS XS S M L XL XXL
Waist (cm) 71 76 81 86 91 97 104
Waist (inches) 20 30 32 34 36 38 41
Leg Inseam (cm) 73 76 79 82 85 88 88
Leg Inseam (inches) 28.25 29.25 31 32.25 33.5 34.5 34.5

<div class="collapsible-content">

<div class="rte">

<div class="table-wrapper">

<table> ... </table>

</div>

</div>

</div>