Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Example usage for Kickoff's components
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>
Example usage for Kickoff's components
<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>
<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>
<!-- 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment