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
<a href="#">Basic link</a>
<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>