Example usage for Kickoff's components

button-sizes.html

Normal buttons
<a href="#" class="btn">Anchor</a>
<input type="submit" value="Primary" class="btn btn--primary" />
<input type="submit" value="Disabled" class="btn" disabled />
<button type="reset" class="btn">Reset</button>

Large buttons
<a href="#" class="btn btn-success btn--large">Success</a>
<input type="submit" value="Primary" class="btn btn--primary btn--large" />
<input type="submit" value="Disabled" class="btn btn--large" disabled />
<button type="reset" class="btn btn--large">Reset</button>

Small buttons
<a href="#" class="btn btn--small">Anchor</a>
<input type="submit" value="Primary" class="btn btn--primary btn--small" />
<input type="submit" value="Disabled" class="btn btn--small" disabled />
<button type="reset" class="btn btn--small">Reset</button>

Kickoff components

Example usage for Kickoff's components

media-object.html

<div class="media clearfix">
	<img src="http://placekitten.com/100/100" alt="" class="media-img">
	<p class="media-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
	sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="media clearfix">
	<img src="http://placekitten.com/100/100" alt="" class="media-img--rev">
	<p class="media-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
	sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

pill-buttons.html

<a href="#" class="btn btn--pill btn--primary">Pill</a>
<a href="#" class="btn btn--pill btn-warning">This is a Pill</a>
<h2>This is <a href="#" class="btn btn--primary btn-natural btn--pill"> a button </a> in a heading!</h2>

<p>This is <a href="#" class="btn btn--primary btn-natural btn--pill"> a button </a> in a paragraph!</p>

tabs.html

<!-- Default, left-aligned tabs -->
<ul class="tabs">
	<li><a href="#tabs-example-1" class="is-active">Tab 1</a></li>
	<li><a href="#tabs-example-2">Tab 2</a></li>
</ul>
<!-- Centre-aligned tabs -->
<ul class="tabs tabs--alignCenter">
	<li><a href="#tabs-example-1" class="is-active">Tab 1</a></li>
	<li><a href="#tabs-example-2">Tab 2</a></li>
</ul>
<!-- Right-aligned tabs -->
<ul class="tabs tabs--alignRight">
	<li><a href="#tabs-example-1" class="is-active">Tab 1</a></li>
	<li><a href="#tabs-example-2">Tab 2</a></li>
</ul>

<!-- Tabs Content -->
<ul class="l-tabsContent">
	<li id="tabs-example-1" class="is-active">
		Tab 1 content
	</li>

	<li id="tabs-example-2">
		Tab 2 content
	</li>
</ul>