---
title: CSS Components
---

{{! Sections
============================================== }}
<div class="page-header">
  <div class="container">
    <h1>CSS Sections</h1> {{github 'css-section'}}
  </div>
</div>

{{> css-section css-section.white }}
{{> css-section css-section.blue }}
{{> css-section css-section.aqua }}
{{> css-section css-section.slate }}
{{> css-section css-section.violet }}
{{> css-section css-section.gray }}


{{! Buttons
============================================== }}
<div class="page-header">
  <div class="container">
    <h1>CSS Buttons</h1> {{github 'css-button'}}
  </div>
</div>

<h2>Base</h2>

{{> css-button css-button.danger }}
{{> css-button css-button.info }}
{{> css-button css-button.primary }}
{{> css-button css-button.jade }}
{{> css-button css-button.success }}
{{> css-button css-button.warning }}
{{> css-button css-button.default }}
{{> css-button css-button.inverse }}

<h2>Small Buttons</h2>

{{> css-button css-button.danger-small }}
{{> css-button css-button.info-small }}
{{> css-button css-button.primary-small }}
{{> css-button css-button.jade-small }}
{{> css-button css-button.success-small }}
{{> css-button css-button.warning-small }}
{{> css-button css-button.default-small }}
{{> css-button css-button.inverse-small }}

<h2>Large Buttons</h2>

{{> css-button css-button.danger-large }}
{{> css-button css-button.info-large }}
{{> css-button css-button.primary-large }}
{{> css-button css-button.jade-large }}
{{> css-button css-button.success-large }}
{{> css-button css-button.warning-large }}
{{> css-button css-button.default-large }}
{{> css-button css-button.inverse-large }}

<h2>Jumbo Buttons</h2>

{{> css-button css-button.danger-jumbo }}
{{> css-button css-button.info-jumbo }}
{{> css-button css-button.primary-jumbo }}
{{> css-button css-button.jade-jumbo }}
{{> css-button css-button.success-jumbo }}
{{> css-button css-button.warning-jumbo }}
{{> css-button css-button.default-jumbo }}
{{> css-button css-button.inverse-jumbo }}