Atoms

Button

Usage : {{> button }}
Options :
  • modifiers - String
  • attributes - String
  • label - String
<button class="btn">button</button>

Button Variations

Buttons Active

Example : {{> button modifiers="btn-primary active" label="Active button"}}
<button class="btn btn-primary active">Active button</button>

Buttons Block

Example : {{> button modifiers="btn-primary btn-block" label="Block button"}}
<button class="btn btn-primary btn-block">Block button</button>
<button class="btn btn-default btn-block">Block button</button>

Buttons Colors

Example : {{> button modifiers="btn-primary" label="Primary"}}
<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-link">Link</button>

Buttons Disabled

Example : {{> button modifiers="btn-primary" attributes="disabled" label="Active button"}}
<button class="btn btn-primary" disabled>Disabled button</button>

Buttons Size

Example : {{> button modifiers="btn-primary btn-lg" label="Large button"}}

<p>
	<button class="btn btn-primary btn-lg">Large button</button>
</p>
<p>
	<button class="btn btn-primary">Default button</button>
</p>
<p>
	<button class="btn btn-primary btn-sm">Small button</button>
</p>
<p>
	<button class="btn btn-primary btn-xs">Extra small button</button>
</p>

Figure

Usage : {{> figure }}
Options :
  • figure-img - String
  • figure-alt - String
  • figure-caption - String
Caption content
image description 
<figure>
	<figcaption>Caption content</figcaption>
	<img src="https://unsplash.it/800/450/?random" alt="image description" class="img-responsive">
</figure>

Icon

Usage : {{> icon }}
Options :
  • class - String
<i class="glyphicon glyphicon-heart"></i>

Icon Button

Usage : {{> thumbnail-cover }}
Options :
  • button-link - boolean
  • button-plain - boolean
  • button-outlined - boolean
  • button-outlined-gray - boolean
  • button-large - boolean
  • button-small - boolean
  • button-label - String
  • button-voticon - String
<button class="icon-button">
	<span class="button-label-wrapper">
    <span class="button-label">
      label
    </span>
	</span>
	<i class="voticons voticons-heart"></i>
</button>

Inline Elements

The small element
The abbreviation element and abbr element with title examples
The bold element example
The citation element example
The code element example
The deleted element example
The definition element and dfn element with title examples
The em element example
The italic element example
The image element image description example
The insert element example
The keyboard element example
The marked element example
The quote element inside a q element example
The strikethrough element example
The sample element example
The small element example
The span element example
The strong element example
The sub element example
The sup element example
The variable element example
The underline element example The underline element example 

<p>
	The <small>small element</small>
	<br> The <abbr>abbreviation element</abbr> and <abbr title="Title text">abbr element with title</abbr> examples
	<br> The <b>bold element</b> example
	<br> The <cite>citation element</cite> example
	<br> The <code>code element</code> example
	<br> The <del>deleted element</del> example
	<br> The <dfn>definition element</dfn> and <dfn title="Title text">dfn element with title</dfn> examples
	<br> The <em>em element</em> example
	<br> The <i>italic element</i> example
	<br> The image element <img src="http://placehold.it/120x25" alt="image description"> example
	<br> The <ins>insert element</ins> example
	<br> The <kbd>keyboard element</kbd> example
	<br> The
	<mark>marked element</mark> example
	<br> The <q>quote element <q>inside</q> a q element</q> example
	<br> The <s>strikethrough element</s> example
	<br> The <samp>sample element</samp> example
	<br> The <small>small element</small> example
	<br> The <span>span element</span> example
	<br> The <strong>strong element</strong> example
	<br> The <sub>sub element</sub> example
	<br> The <sup>sup element</sup> example
	<br> The <var>variable element</var> example
	<br> The <u>underline element</u> example The <span class="text-uppercase">underline element</span> example
</p>

Partner

Usage : {{> thumbnail-cover }}
Options :
  • partner-logo - String
  • partner-url - String
<div class="partner">
	<a href="#">
		<img src="https://unsplash.it/104/104/?random" class="img-responsive">
	</a>
</div>

Separator

Usage : {{> separator }}
Options :
  • separator-size - String (lg, md, sm, xs)
<hr class="separator">

Video

Usage : {{> video }}
Options :
  • video-source - String
<div class="embed-responsive embed-responsive-16by9">
	<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/NfL978hwzvE" allowfullscreen></iframe>
</div>