Component: buttons

To add a button:

<a href="#" class="cl-btn">Button text</a>

To add a primary button:

<a href="#" class="cl-btn cl-btn-primary">Button text</a>

Button styles will adapt depending on their location e.g. a button in the content area (.cl-content) will stretch full width while a button in a header (.cl-title) will position itself as you would expect.

Controlling button alignment within .bar elements

You can control button alignment in bars with .align-right and .align-center classes.

<a href="#" class="cl-btn align-right">Button text</a>
<a href="#" class="cl-btn align-center">Button text</a>

Subtle buttons

Add a .cl-btn-subtle class to a regular .cl-btn:

<a href="#" class="cl-btn cl-btn-subtle">Button text</a>

Disabled buttons

Add a .cl-btn-disabled class to a regular .cl-btn:

<a href="#" class="cl-btn cl-btn-disabled">Button text</a>

Icon buttons

Add .cl-btn-icon-only to a .cl-btn to make square buttons that contain icons, like the ones in the footer in the example.

Bell 20:49 3G
20:49
Back

Buttons

Button