Button

Button styles can be applied to anything with the .btn class applied. However, typically you’ll want to apply these to only <a> and <button> elements for the best rendering.

<!-- Normal button with default colour -->
<a href="#" class="btn">Button</a>

Button variant

We provide only one button style variant because we think you should define your own. This variant, the primary button, uses the .btn--primary modifier class. We suggest setting up your own buttons in the same way, .

The colours used by this button are defined in our file.

<!-- Add .btn--primary to use the primary colours -->
<a href="#" class="btn btn--primary">Button</a>

Block-level buttons

To make buttons span to 100% width, add the .btn--block modifier class. You can also see that we are using the .btn--primary modifier class as well as .btn--block.

<!-- Add .btn--block to use the block colours -->
<a href="#" class="btn btn--block btn--primary">Button</a>

Media Object

Place any image and text-like content side-by-side, as per: . We now use our grid to create media objects because of greater flexibility.

See the Pen by Zander Martineau () on .

Fluid video

This is an external component, hosted at . Wrap any iframed video embed (from Youtube or Vimeo etc) in a .fluidVideo container. We assume 16:9 ratio so if you need anything else you will have to modify the or use a script like .

<div class="fluidVideo">
	<iframe class="fluidVideo-item" width="560" height="315" src="//www.youtube-nocookie.com/embed/-5Ae-LhMIG0" frameborder="0" allowfullscreen></iframe>
</div>

Block grids

As of Kickoff v7.0.0, layouts that were previously handled by our block grid classes can now be easily achieved using the new flexbox grid classes and modifiers.

To find out more on the new Kickoff Grid, see our Grid documentation.

Lists

For centred lists, add the .l-list--centred class to an [un]ordered list. For floated lists, add the .l-list--floated class.

<!-- Centre-aligned lists -->
<ul class="l-list--centred">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
</ul>

<!-- Floated lists -->
<ul class="l-list--floated">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
</ul>

Tables

As tables should mainly be used for content, we have included a default set of styles that can easily be changed. See the demo below for default styling.

Default table

<table cellpadding="0" cellspacing="0">
	<thead>
		<tr>
			<th>Table head</th>
			<th>Table head</th>
			<th>Table head</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Table cell</td>
			<td>Table cell</td>
			<td>Table cell</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>Table foot</td>
			<td>Table foot</td>
			<td>Table foot</td>
		</tr>
	</tfoot>
</table>

Table modifiers

A table can be modified in the following ways.

• To add even/odd stripes, add the .table--striped modifier class
• To add a hover affect, simply change the $table-bgColor--hover variable in _tables.scss to the hover colour you would like

<table class="table--striped" cellpadding="0" cellspacing="0">
	<thead>
		<tr>
			<th>Table head</th>
			<th>Table head</th>
			<th>Table head</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Table cell</td>
			<td>Table cell</td>
			<td>Table cell</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>Table foot</td>
			<td>Table foot</td>
			<td>Table foot</td>
		</tr>
	</tfoot>
</table>

Responsive tables

We have included a simple way to make your tables responsive, wrap your tables in .responsiveTable and we’ll make them mobile friendly by enabling horizontal scrolling. Only applies below the $bp-single-col scss variable. Everything above that will display normally.

If you need more responsive tables, consider by the Filament Group.

<div class="responsiveTable">
	<table cellpadding="0" cellspacing="0">
		<thead>
			<tr>
				<th>Table Cell</th>
				<th>Table Cell</th>
				<th>Table Cell</th>
				<th>Table Cell</th>
				<th>Table Cell</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Table Cell</td>
				<td>Table Cell</td>
				<td>Table Cell</td>
				<td>Table Cell</td>
				<td>Table Cell</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td>Table Cell</td>
				<td>Table Cell</td>
				<td>Table Cell</td>
				<td>Table Cell</td>
				<td>Table Cell</td>
			</tr>
		</tfoot>
	</table>
</div>