Molecules
Alerts
Alert
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
<div class="c-alert c-alert--success" role="alert">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="c-alert c-alert--info" role="alert">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="c-alert c-alert--warning" role="alert">
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="c-alert c-alert--danger" role="alert">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>Alert Dismissible
Oh snap! Change a few things up and try submitting again.
<div class="c-alert c-alert--danger" role="alert">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>Block
Hero
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate enim vitae purus accumsan aliquet. Aenean iaculis nec ex sed finibus. Morbi sit amet lobortis nisl, vel placerat mi.
<div class="c-block-hero " href="javascript:void()">
<div class="c-block-hero__wrapper">
<h1 class="c-block-hero__headline ">
Lorem ipsum dolor sit amet.
</h1>
<p class="c-block-hero__copy ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate enim vitae purus accumsan aliquet. Aenean iaculis nec ex sed finibus. Morbi sit amet lobortis nisl, vel placerat mi.
</p>
</div>
</div>Hero Image
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate enim vitae purus accumsan aliquet. Aenean iaculis nec ex sed finibus. Morbi sit amet lobortis nisl, vel placerat mi.
<div class="c-block-hero ">
<img class="c-block-hero__image " src="holder.js/1280x720?auto=yes&theme=sky">
<div class="c-block-hero__wrapper">
<h1 class="c-block-hero__headline ">
Lorem ipsum dolor sit amet.
</h1>
<p class="c-block-hero__copy ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate enim vitae purus accumsan aliquet. Aenean iaculis nec ex sed finibus. Morbi sit amet lobortis nisl, vel placerat mi.
</p>
<div class="c-block-hero__btn-group">
<a class="c-btn c-btn--link" href="javascript:void()">
Link Button
</a> </div>
</div>
</div>Hero Link
<a class="c-block-hero " href="javascript:void()">
<div class="c-block-hero__wrapper">
<h1 class="c-block-hero__headline ">
Lorem ipsum dolor sit amet.
</h1>
<p class="c-block-hero__copy ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate enim vitae purus accumsan aliquet. Aenean iaculis nec ex sed finibus. Morbi sit amet lobortis nisl, vel placerat mi.
</p>
</div>
</a>Forms
Fields
<div class="c-field">
<label class="c-field__label" for="id-input">Label</label>
<input class="c-input-text c-field__input" id="id-input" type="text" placeholder="Text Input"></div>Search
<form class="c-search-form" method="post">
<label class="c-search-form__label u-sr-only" for="id-search">Search the site</label>
<input class="c-search-form__input" type="search" id="id-search" placeholder="Search the site">
</form>Fields Textarea
<div class="c-field c-field--textarea">
<label class="c-field__label" for="id-textarea">Label</label>
<textarea class="c-textarea c-field__input" id="id-textarea" placeholder="Text Area"></textarea></div>Layout
Layout
l__col-1
l__col-2
l__col-2
l__col-3
l__col-3
l__col-3
l__col-4
l__col-4
l__col-4
l__col-4
l__col-5
l__col-5
l__col-5
l__col-5
l__col-5
l__col-6
l__col-6
l__col-6
l__col-6
l__col-6
l__col-6
l__col-7
l__col-7
l__col-7
l__col-7
l__col-7
l__col-7
l__col-7
l__col-8
l__col-8
l__col-8
l__col-8
l__col-8
l__col-8
l__col-8
l__col-8
l__col-9
l__col-9
l__col-9
l__col-9
l__col-9
l__col-9
l__col-9
l__col-9
l__col-9
l__col-10
l__col-10
l__col-10
l__col-10
l__col-10
l__col-10
l__col-10
l__col-10
l__col-10
l__col-10
11
11
11
11
11
11
11
11
11
11
11
12
12
12
12
12
12
12
12
12
12
12
12
<div class="l">
<div class="l__row">
<div class="l__col-1 bg-colour-big-stone">
l__col-1
</div>
</div>
<div class="l__row">
<div class="l__col-2 bg-colour-chambray">
l__col-2
</div>
<div class="l__col-2 bg-colour-chambray">
l__col-2
</div>
</div>
<div class="l__row">
<div class="l__col-3 bg-colour-lochmara">
l__col-3
</div>
<div class="l__col-3 bg-colour-lochmara">
l__col-3
</div>
<div class="l__col-3 bg-colour-lochmara">
l__col-3
</div>
</div>
<div class="l__row">
<div class="l__col-4 bg-colour-caribbean-green">
l__col-4
</div>
<div class="l__col-4 bg-colour-caribbean-green">
l__col-4
</div>
<div class="l__col-4 bg-colour-caribbean-green">
l__col-4
</div>
<div class="l__col-4 bg-colour-caribbean-green">
l__col-4
</div>
</div>
<div class="l__row">
<div class="l__col-5 bg-colour-paris-daisy">
l__col-5
</div>
<div class="l__col-5 bg-colour-paris-daisy">
l__col-5
</div>
<div class="l__col-5 bg-colour-paris-daisy">
l__col-5
</div>
<div class="l__col-5 bg-colour-paris-daisy">
l__col-5
</div>
<div class="l__col-5 bg-colour-paris-daisy">
l__col-5
</div>
</div>
<div class="l__row">
<div class="l__col-6 bg-colour-saffron">
l__col-6
</div>
<div class="l__col-6 bg-colour-saffron">
l__col-6
</div>
<div class="l__col-6 bg-colour-saffron">
l__col-6
</div>
<div class="l__col-6 bg-colour-saffron">
l__col-6
</div>
<div class="l__col-6 bg-colour-saffron">
l__col-6
</div>
<div class="l__col-6 bg-colour-saffron">
l__col-6
</div>
</div>
<div class="l__row">
<div class="l__col-7 bg-colour-carnation">
l__col-7
</div>
<div class="l__col-7 bg-colour-carnation">
l__col-7
</div>
<div class="l__col-7 bg-colour-carnation">
l__col-7
</div>
<div class="l__col-7 bg-colour-carnation">
l__col-7
</div>
<div class="l__col-7 bg-colour-carnation">
l__col-7
</div>
<div class="l__col-7 bg-colour-carnation">
l__col-7
</div>
<div class="l__col-7 bg-colour-carnation">
l__col-7
</div>
</div>
<div class="l__row">
<div class="l__col-8 bg-colour-mulberry">
l__col-8
</div>
<div class="l__col-8 bg-colour-mulberry">
l__col-8
</div>
<div class="l__col-8 bg-colour-mulberry">
l__col-8
</div>
<div class="l__col-8 bg-colour-mulberry">
l__col-8
</div>
<div class="l__col-8 bg-colour-mulberry">
l__col-8
</div>
<div class="l__col-8 bg-colour-mulberry">
l__col-8
</div>
<div class="l__col-8 bg-colour-mulberry">
l__col-8
</div>
<div class="l__col-8 bg-colour-mulberry">
l__col-8
</div>
</div>
<div class="l__row">
<div class="l__col-9 bg-colour-trendy-pink">
l__col-9
</div>
<div class="l__col-9 bg-colour-trendy-pink">
l__col-9
</div>
<div class="l__col-9 bg-colour-trendy-pink">
l__col-9
</div>
<div class="l__col-9 bg-colour-trendy-pink">
l__col-9
</div>
<div class="l__col-9 bg-colour-trendy-pink">
l__col-9
</div>
<div class="l__col-9 bg-colour-trendy-pink">
l__col-9
</div>
<div class="l__col-9 bg-colour-trendy-pink">
l__col-9
</div>
<div class="l__col-9 bg-colour-trendy-pink">
l__col-9
</div>
<div class="l__col-9 bg-colour-trendy-pink">
l__col-9
</div>
</div>
<div class="l__row">
<div class="l__col-10 bg-colour-brink-pink">
l__col-10
</div>
<div class="l__col-10 bg-colour-brink-pink">
l__col-10
</div>
<div class="l__col-10 bg-colour-brink-pink">
l__col-10
</div>
<div class="l__col-10 bg-colour-brink-pink">
l__col-10
</div>
<div class="l__col-10 bg-colour-brink-pink">
l__col-10
</div>
<div class="l__col-10 bg-colour-brink-pink">
l__col-10
</div>
<div class="l__col-10 bg-colour-brink-pink">
l__col-10
</div>
<div class="l__col-10 bg-colour-brink-pink">
l__col-10
</div>
<div class="l__col-10 bg-colour-brink-pink">
l__col-10
</div>
<div class="l__col-10 bg-colour-brink-pink">
l__col-10
</div>
</div>
<div class="l__row">
<div class="l__col-11 bg-colour-keppel">
11
</div>
<div class="l__col-11 bg-colour-keppel">
11
</div>
<div class="l__col-11 bg-colour-keppel">
11
</div>
<div class="l__col-11 bg-colour-keppel">
11
</div>
<div class="l__col-11 bg-colour-keppel">
11
</div>
<div class="l__col-11 bg-colour-keppel">
11
</div>
<div class="l__col-11 bg-colour-keppel">
11
</div>
<div class="l__col-11 bg-colour-keppel">
11
</div>
<div class="l__col-11 bg-colour-keppel">
11
</div>
<div class="l__col-11 bg-colour-keppel">
11
</div>
<div class="l__col-11 bg-colour-keppel">
11
</div>
</div>
<div class="l__row">
<div class="l__col-12 bg-colour-malibu">
12
</div>
<div class="l__col-12 bg-colour-malibu">
12
</div>
<div class="l__col-12 bg-colour-malibu">
12
</div>
<div class="l__col-12 bg-colour-malibu">
12
</div>
<div class="l__col-12 bg-colour-malibu">
12
</div>
<div class="l__col-12 bg-colour-malibu">
12
</div>
<div class="l__col-12 bg-colour-malibu">
12
</div>
<div class="l__col-12 bg-colour-malibu">
12
</div>
<div class="l__col-12 bg-colour-malibu">
12
</div>
<div class="l__col-12 bg-colour-malibu">
12
</div>
<div class="l__col-12 bg-colour-malibu">
12
</div>
<div class="l__col-12 bg-colour-malibu">
12
</div>
</div>
</div>