1. components
  2. buttons


Buttons are simple controls for executing specific on-page actions and code. Buttons are most commonly used in forms, dialogs, and modals to facilitate required user actions.

Primary Button c-btn

Primary button description

                <ComponentExample component="button" />


This is a text passage to describe some of the usage for this pattern.

  • When to use

    Usage description

  • When to consider an alternative

    Alternative usage

Class NameDescription

Apply to the hero block's containing HTML element. This class sets up the background-image handling and text color for the unit. The c-hero element should have just one immediate child, the c-hero__body element. Note, too, that the unit's hero image should be applied as a background image to this c-hero element.


Add to the c-hero element to remove the default gradient overlay from the hero image.


Add to the c-hero element to replace the default gradient overlay with a solid, uniform tint.


Apply to the container for the card body, Which typically includes a title and description (see below) but can include any arbitrary markup including buttons for a call to action. The class manages the card's background gradient.


Apply to the card's heading inside the card body. The recommended element for this class is <h1>.


Apply to the card's description text inside the card body. The recommended element for this class is <p>.

    Fine print

    • Version: 0.3
    • Last Updated: April 27, 2017
    • Owner: Jane Doe
    Discuss this component