Buttons

Button

.a-button

Button
<a class="a-button">Button</a>
<button class="a-button">Button</button>

Button

.a-button--primary

Button
<a class="a-button--primary">Button</a>
<button class="a-button--primary">Button</button>

Button

.a-button--invert

Button
<div class="h-cb-dark h-padding-05">
  <a class="a-button--invert">Button</a>
  <button class="a-button--invert">Button</button>
</div>

Button

.a-button--plain-dark

Button
<div class="h-cb-dark h-padding-05">
  <a class="a-button--plain-dark">Button</a>
  <button class="a-button--plain-dark">Button</button>
</div>

Button

.a-button--clear

Button
<a class="a-button--clear">Button</a>
<button class="a-button--clear">Button</button>

Button

.a-button--small

Button
<a class="a-button--small">Button</a>
<button class="a-button--small">Button</a>

Button

.a-button--chop-left

Button
<a class="a-button--small button--chop-left">Button</a>
<button class="a-button--small button--chop-left">Button</a>

Text

Spaced text

.a-altspaced

Sample
<span class="a-altspaced">Sample</span>

Background Colours

Base colours

white #fff black #000
<span class="h-cb-white styleguide-colorblock">white #fff</span>
<span class="h-cb-black styleguide-colorblock">black #000</span>

Brand colours

primary #5e15ec calm #e5e3e3 cream #f9f7f7
<span class="h-cb-primary styleguide-colorblock">primary #5e15ec</span>
<span class="h-cb-calm styleguide-colorblock">calm #e5e3e3</span>
<span class="h-cb-cream styleguide-colorblock">cream #f9f7f7</span>

Additonal colours

alert #af3535 success #1cc374 warning #eadc17 dark #121121 light #f8f8f8
<span class="h-cb-alert styleguide-colorblock">alert #af3535</span>
<span class="h-cb-success styleguide-colorblock">success #1cc374</span>
<span class="h-cb-warning styleguide-colorblock">warning #eadc17</span>
<span class="h-cb-dark styleguide-colorblock">dark #121121</span>
<span class="h-cb-light styleguide-colorblock">light #f8f8f8</span>

Primary shades

primary-50 primary-100 primary-200 primary-300 primary-400 primary-500 primary-600 primary-800 primary-900
<span class="h-cb-primary-50 styleguide-colorblock">primary-50</span>
<span class="h-cb-primary-100 styleguide-colorblock">primary-100</span>
<span class="h-cb-primary-200 styleguide-colorblock">primary-200</span>
<span class="h-cb-primary-300 styleguide-colorblock">primary-300</span>
<span class="h-cb-primary-400 styleguide-colorblock">primary-400</span>
<span class="h-cb-primary-500 styleguide-colorblock">primary-500</span>
<span class="h-cb-primary-600 styleguide-colorblock">primary-600</span>
<span class="h-cb-primary-800 styleguide-colorblock">primary-800</span>
<span class="h-cb-primary-900 styleguide-colorblock">primary-900</span>

Form Elements

Input

<input type="text" placeholder="Your name" />

Textarea

<textarea type="text" placeholder="Your name"></textarea>

Select

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Page break

.pr-page-break


<br class="pr-page-break" />

Tables

Table

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Text Elements

Paragraphs

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>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>

Lists

  • Item one
  • Item two
  • Item three
  1. Item one
  2. Item two
  3. Item three
<ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>
<ol>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ol>

Headers

Aa Header Text

Aa Header Text

Aa Header Text

Aa Header Text

Aa Header Text
Aa Header Text
<h1>Aa Header Text</h1>
<h2>Aa Header Text</h2>
<h3>Aa Header Text</h3>
<h4>Aa Header Text</h4>
<h5>Aa Header Text</h5>
<h6>Aa Header Text</h6>

Blockquotes

Here we can display a blockquote> Google.com
<blockquote cite="www.google.com">Here we can display a blockquote>
  <cite>Google.com</cite>
</blockquote>

Keyboard

alt
<kbd>
  alt
</kbd>

Embeds m-embeds.scss

Embed

...
PLAY
<div class="m-embed--container" onclick="toggleVideo();">
  <div class="m-embed--content">
    <div class="row collapse h-padding-tb05">
      <div class="large-12 medium-12 small-12 columns h-tx-center">
        <div class="m-embed--loading">
          ...
        </div>
        <div class="m-embed--ready h-display-none">
          PLAY
        </div>
      </div>
    </div>
  </div>
</div>
<div class='m-embed'>
  <div id="player"></div>
</div>