Atoms

Global

Fonts

Primary font

Primary font bold

Primary font italic

Serif font

Mono font

<p class="base-font-family">
	Primary font
</p>

<p class="base-font-family">
	<strong>Primary font bold</strong>
</p>

<p class="base-font-family">
	<em>Primary font italic</em>
</p>

<p class="font-family-serif">
	Serif font
</p>

<p class="font-family-mono">
	Mono font
</p>

Buttons

Button

<button class="c-btn">
  Button
</button>

Button Icon

<a class="c-btn c-btn--primary c-btn--link" href="javascript:void()">
  Link Button

  <svg class="c-btn__icon c-icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
    <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
  </svg>
</a>

Button Sizes

<div class="l l--fill">
	<div class="l__row">
		<div class="l__col-2">
			<button class="c-btn c-btn--xsmall c-btn--primary">
        Extra Small Button
      </button>
		</div>

		<div class="l__col-2">
			<button class="c-btn c-btn--small c-btn--primary">
        Small Button
      </button>
		</div>
	</div>

	<div class="l__row">
		<div class="l__col-2">
			<button class="c-btn c-btn--medium c-btn--primary">
        Medium Button
      </button>
		</div>

		<div class="l__col-2">
			<button class="c-btn c-btn--large c-btn--primary">
        Large Button
      </button>
		</div>
	</div>

	<div class="l__col-12">
		<button class="c-btn c-btn--xlarge c-btn--primary">
      Extra Large Button
    </button>
	</div>
</div>

Images

Cn Tower

CN Tower
<svg class="c-cn-tower " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 640" style="height:10rem">
  <title>CN Tower</title>
  <g id="c-cn-tower__container">
    <path d="M28.71,0V66.37H26.47q.79,26.13,1,52.37H25.05v2.5c-2.25,1-3.7,2.69-3.7,4.55,0,2.46,2.57,4.53,6.12,5.3q.09,35.57-.75,71.33h-4v7.39h3.81c-.07,2.71-.15,5.42-.22,8.14H14.38v10.64C10.76,230,8.52,232,8.52,234.12a3,3,0,0,0,.07.52H5.08v3.17H6.35v2.65h.9v1.42h-.9v3.17h.9v1.38h-.9V249H8.18c.12,1.33,1.08,2.6,2.76,3.7v5.19c-2,1.09-3.21,2.34-3.21,3.7,0,3.37,7.17,6.17,16.83,7C19.42,391.77,8.51,516.11-.1,640H60.1C52.17,516.15,42.45,392.31,37.41,268.46c8.93-1,15.38-3.67,15.38-6.87,0-1.24-1-2.38-2.69-3.4v-5.37c1.81-1.13,2.9-2.42,3-3.81h.67v-2.58H52.41v-1.38H53.8v-3.17H52.41v-1.42H53.8v-2.65h1.27v-3.17H52.19a3,3,0,0,0,.07-.52c0-1.84-1.66-3.56-4.44-4.93V218H35.65c-.08-2.71-.15-5.42-.22-8.14h3.1v-7.39H35.24q-.92-35.72-1.16-71.44c3.29-.85,5.6-2.84,5.6-5.19,0-1.89-1.51-3.56-3.81-4.59v-2.46H34q0-26.18.34-52.37h-2V0Z" class="c-cn-tower__property-fill" />
  </g>
</svg>

Heart

Heart
<svg xmlns="http://www.w3.org/2000/svg" class="c-heart " viewBox="0 0 128 128" style="height:10rem">
  <title>Heart</title>
  <g class="c-heart__container">
    <path d="M118.041 9.959c-6.152-6.153-14.652-9.959-24.041-9.959-9.389 0-17.889 3.805-24.041 9.959-2.361 2.36-4.372 5.068-5.959 8.037-1.587-2.969-3.597-5.677-5.959-8.037-6.152-6.153-14.652-9.959-24.041-9.959-9.389 0-17.889 3.805-24.041 9.959-6.154 6.152-9.959 14.652-9.959 24.041 0 9.389 3.805 17.889 9.959 24.041l54.041 53.959 54.041-53.959c6.154-6.152 9.959-14.652 9.959-24.041 0-9.389-3.805-17.889-9.959-24.041z" class="c-heart__property-fill"></path>
  </g>
</svg>

Inputs

Checkbox

<input class="c-input-checkbox" type="checkbox" checked="checked" />

Radio

<input class="c-input-radio" type="radio" checked="checked">

Select

<select class="c-select">
  <option class="c-select__option" value="0">Option 0</option>
  <option class="c-select__option" value="1">Option 1</option>
  <optgroup class="c-select__group" label="Group 0">
    <option class="c-select__option" value="0">
      Option 0
    </option>
    <option class="c-select__option" value="1">
      Option 1
    </option>
    <option class="c-select__option" value="2">
      Option 2
    </option>
    <option class="c-select__option" value="3">
      Option 3
    </option>
    <option class="c-select__option" value="4">
      Option 4
    </option>
  </optgroup>
  <optgroup class="c-select__group" label="Group 1">
    <option class="c-select__option" value="0">
      Option 0
    </option>
    <option class="c-select__option" value="1">
      Option 1
    </option>
    <option class="c-select__option" value="2">
      Option 2
    </option>
    <option class="c-select__option" value="3">
      Option 3
    </option>
    <option class="c-select__option" value="4">
      Option 4
    </option>
  </optgroup>
  <optgroup class="c-select__group" label="Group 2">
    <option class="c-select__option" value="0">
      Option 0
    </option>
    <option class="c-select__option" value="1">
      Option 1
    </option>
    <option class="c-select__option" value="2">
      Option 2
    </option>
    <option class="c-select__option" value="3">
      Option 3
    </option>
    <option class="c-select__option" value="4">
      Option 4
    </option>
  </optgroup>
</select>

Text

<input class="c-input-text " id="" type="text" placeholder="Text Input">

Textarea

<textarea class="c-textarea " id="" placeholder="Text Area"></textarea>

Text

Headings

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six
<h1 class="heading-1">Heading One</h1>
<h2 class="heading-2">Heading Two</h2>
<h3 class="heading-3">Heading Three</h3>
<h4 class="heading-4">Heading Four</h4>
<h5 class="heading-5">Heading Five</h5>
<h6 class="heading-6">Heading Six</h6>

Displays

Display One

Display Two

Display Three

Display Four

<h1 class="display-1">Display One</h1>
<h2 class="display-2">Display Two</h2>
<h3 class="display-3">Display Three</h3>
<h4 class="display-4">Display Four</h4>

Paragraph

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

<p class="paragraph">A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax
	of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>

Lead

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a interdum tellus. Phasellus sit amet quam id orci porttitor ullamcorper eu bibendum neque. Donec aliquet, mi id malesuada ultricies, tellus lectus dictum turpis, id sollicitudin risus nunc sit amet ex.

<p class="paragraph paragraph--lead">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a interdum tellus. Phasellus sit amet quam id orci porttitor ullamcorper eu bibendum neque. Donec aliquet, mi id malesuada ultricies, tellus lectus dictum turpis, id sollicitudin risus nunc
	sit amet ex.
</p>

Unordered List

  • List Item 0
  • List Item 1
  • List Item 2
  • Item with an unordered list.
    • List Item 0
    • List Item 1
  • List Item 0
  • List Item 1
<ul>
	<li>List Item 0</li>
	<li>List Item 1</li>
	<li>List Item 2</li>
	<li>
		Item with an unordered list.
		<ul>
			<li>List Item 0</li>
			<li>List Item 1</li>
		</ul>
	</li>
	<li>List Item 0</li>
	<li>List Item 1</li>
</ul>

Ordered List

  1. List Item 0
  2. List Item 1
  3. List Item 2
  4. Item with an unordered list.
    1. List Item 0
    2. List Item 1
  5. List Item 0
  6. List Item 1
<ol>
	<li>List Item 0</li>
	<li>List Item 1</li>
	<li>List Item 2</li>
	<li>
		Item with an unordered list.
		<ol>
			<li>List Item 0</li>
			<li>List Item 1</li>
		</ol>
	</li>
	<li>List Item 0</li>
	<li>List Item 1</li>
</ol>

Definition List

Term 0
Definition 0
Term 1
Definition 1
Term 2
Definition 2
Term 3
Definition 3
Term 4
Definition 4
<dl>
	<dt>Term 0</dt>
	<dd>Definition 0</dd>
	<dt>Term 1</dt>
	<dd>Definition 1</dd>
	<dt>Term 2</dt>
	<dd>Definition 2</dd>
	<dt>Term 3</dt>
	<dd>Definition 3</dd>
	<dt>Term 4</dt>
	<dd>Definition 4</dd>
</dl>

Definition List Horizontal

Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et sagittis massa. Vestibulum condimentum libero quis sapien imperdiet, vitae consequat sem pellentesque.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et sagittis massa. Vestibulum condimentum libero quis sapien imperdiet, vitae consequat sem pellentesque.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et sagittis massa. Vestibulum condimentum libero quis sapien imperdiet, vitae consequat sem pellentesque.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et sagittis massa. Vestibulum condimentum libero quis sapien imperdiet, vitae consequat sem pellentesque.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et sagittis massa. Vestibulum condimentum libero quis sapien imperdiet, vitae consequat sem pellentesque.
<div class="dl-horizontal">
	<dl>
		<dt>Lorem Ipsum</dt>

		<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et sagittis massa. Vestibulum condimentum libero quis sapien imperdiet, vitae consequat sem pellentesque.</dd>
		<dt>Lorem Ipsum</dt>

		<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et sagittis massa. Vestibulum condimentum libero quis sapien imperdiet, vitae consequat sem pellentesque.</dd>
		<dt>Lorem Ipsum</dt>

		<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et sagittis massa. Vestibulum condimentum libero quis sapien imperdiet, vitae consequat sem pellentesque.</dd>
		<dt>Lorem Ipsum</dt>

		<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et sagittis massa. Vestibulum condimentum libero quis sapien imperdiet, vitae consequat sem pellentesque.</dd>
		<dt>Lorem Ipsum</dt>

		<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et sagittis massa. Vestibulum condimentum libero quis sapien imperdiet, vitae consequat sem pellentesque.</dd>
	</dl>
</div>

Code


s = """Gur Mra bs Clguba, ol Gvz Crgref

Ornhgvshy vf orggre guna htyl.
Rkcyvpvg vf orggre guna vzcyvpvg.
Fvzcyr vf orggre guna pbzcyrk.
Pbzcyrk vf orggre guna pbzcyvpngrq.
Syng vf orggre guna arfgrq.
Fcnefr vf orggre guna qrafr.
Ernqnovyvgl pbhagf.
Fcrpvny pnfrf nera'g fcrpvny rabhtu gb oernx gur ehyrf.
Nygubhtu cenpgvpnyvgl orngf chevgl.
Reebef fubhyq arire cnff fvyragyl.
Hayrff rkcyvpvgyl fvyraprq.
Va gur snpr bs nzovthvgl, ershfr gur grzcgngvba gb thrff.
Gurer fubhyq or bar-- naq cersrenoyl bayl bar --boivbhf jnl gb qb vg.
Nygubhtu gung jnl znl abg or boivbhf ng svefg hayrff lbh'er Qhgpu.
Abj vf orggre guna arire.
Nygubhtu arire vf bsgra orggre guna *evtug* abj.
Vs gur vzcyrzragngvba vf uneq gb rkcynva, vg'f n onq vqrn.
Vs gur vzcyrzragngvba vf rnfl gb rkcynva, vg znl or n tbbq vqrn.
Anzrfcnprf ner bar ubaxvat terng vqrn -- yrg'f qb zber bs gubfr!"""

d = {}
for c in (65, 97):
    for i in range(26):
        d[chr(i+c)] = chr((i+13) % 26 + c)

print "".join([d.get(c, c) for c in s])
  def fact(n, acc=1): return acc if not n else fact(n-1, n*acc)
<pre class="code-block"><code class="python">
s = """Gur Mra bs Clguba, ol Gvz Crgref

Ornhgvshy vf orggre guna htyl.
Rkcyvpvg vf orggre guna vzcyvpvg.
Fvzcyr vf orggre guna pbzcyrk.
Pbzcyrk vf orggre guna pbzcyvpngrq.
Syng vf orggre guna arfgrq.
Fcnefr vf orggre guna qrafr.
Ernqnovyvgl pbhagf.
Fcrpvny pnfrf nera'g fcrpvny rabhtu gb oernx gur ehyrf.
Nygubhtu cenpgvpnyvgl orngf chevgl.
Reebef fubhyq arire cnff fvyragyl.
Hayrff rkcyvpvgyl fvyraprq.
Va gur snpr bs nzovthvgl, ershfr gur grzcgngvba gb thrff.
Gurer fubhyq or bar-- naq cersrenoyl bayl bar --boivbhf jnl gb qb vg.
Nygubhtu gung jnl znl abg or boivbhf ng svefg hayrff lbh'er Qhgpu.
Abj vf orggre guna arire.
Nygubhtu arire vf bsgra orggre guna *evtug* abj.
Vs gur vzcyrzragngvba vf uneq gb rkcynva, vg'f n onq vqrn.
Vs gur vzcyrzragngvba vf rnfl gb rkcynva, vg znl or n tbbq vqrn.
Anzrfcnprf ner bar ubaxvat terng vqrn -- yrg'f qb zber bs gubfr!"""

d = {}
for c in (65, 97):
    for i in range(26):
        d[chr(i+c)] = chr((i+13) % 26 + c)

print "".join([d.get(c, c) for c in s])
</code></pre>

<pre class="code-block">
  <code class="highlight"><span></span><span class="k">def</span> <span class="nf">fact</span><span class="p">(</span><span class="n">n</span><span class="p">,</span> <span class="n">acc</span><span class="o">=</span><span class="mi">1</span><span class="p">):</span> <span class="k">return</span> <span class="n">acc</span> <span class="k">if</span> <span class="ow">not</span> <span class="n">n</span> <span class="k">else</span> <span class="n">fact</span><span class="p">(</span><span class="n">n</span><span class="o">-</span><span class="mi">1</span><span class="p">,</span> <span class="n">n</span><span class="o">*</span><span class="n">acc</span><span class="p">)</span>
</code></pre>

Horizontal Rule


<hr class="horizontal-rule" />

Inline Elements

This is a text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

This text is deleted and This text is inserted

This text is deleted and This text is inserted

This text has a strikethrough

Superscript®

Subscript for things like H2O

This small text is small for for fine print, etc.

Abbreviation: HTML

Keybord input: Cmd

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight

This is what inline code looks like.

This is sample output from a computer program

The variarble element, such as x = y

<p><a href="javascript:void()">This is a text link</a></p>

<p><strong>Strong is used to indicate strong importance</strong></p>

<p><em>This text has added emphasis</em></p>

<p>The <b>b element</b> is stylistically different text from normal text, without any special importance</p>

<p>The <i>i element</i> is text that is set off from the normal text</p>

<p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p>

<p>This text is deleted and This text is inserted</p>

<p><del>This text is deleted</del> and <ins>This text is inserted</ins></p>

<p><s>This text has a strikethrough</s></p>

<p>Superscript<sup>®</sup></p>

<p>Subscript for things like H<sub>2</sub>O</p>

<p><small>This small text is small for for fine print, etc.</small></p>

<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>

<p>Keybord input: <kbd>Cmd</kbd></p>

<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p>

<p><cite>This is a citation</cite>

</p>
<p>The <dfn>dfn element</dfn> indicates a definition.</p>

<p>The <mark>mark element</mark> indicates a highlight</p>

<p><code>This is what inline code looks like.</code></p>

<p><samp>This is sample output from a computer program</samp></p>

<p>The <var>variarble element</var>, such as <var>x</var> = <var>y</var></p>

Preformatted Text

P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
<pre>
P R E F O R M A T T E D T E X T
! " # $ % &amp; ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
</pre>