Button


                <ComponentExample component="button" />

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

Class Name	Description
`c-hero`	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.
`c-hero--bare`	Add to the `c-hero` element to remove the default gradient overlay from the hero image.
`c-hero--tinted`	Add to the `c-hero` element to replace the default gradient overlay with a solid, uniform tint.
`c-hero__body`	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.
`c-hero__title`	Apply to the card's heading inside the card body. The recommended element for this class is `<h1>`.
`c-hero__desc`	Apply to the card's description text inside the card body. The recommended element for this class is `<p>`.

Primary Button `c-btn`