Components
Each component is a live preview, the rules for using it, and the markup to copy. Their styles live in /styles/system.css.
Buttons
A button starts an action. A link that only navigates stays a link.
| Variant | Class | Use |
|---|---|---|
| Primary | .button | The one action a view exists for; at most one per view |
| Secondary | .button.button--secondary | Every other action beside or below the primary |
<button class="button" type="button">Primary action</button> <button class="button button--secondary" type="button">Secondary</button>
Form fields
A field is a label, a control, and optional help text, in that order.
Keep help text close to the control.
| Part | Element | Rule |
|---|---|---|
| Label | label | Always visible and tied to the control with for; a placeholder is not a label |
| Control | input | At least 3rem tall so it is easy to hit on touch screens |
| Help text | small | One sentence directly under the control |
<div class="field"> <label for="email">Email address</label> <input id="email" type="email"> <small>Keep help text close to the control.</small> </div>
Site layout
The pieces a whole page is composed from. The website design under Designs uses only these and the components above, so a page needs nothing a product does not already get from /styles/system.css.
| Piece | Class | Use |
|---|---|---|
| Wrap | .wrap | Centers a band of the page at the content width with side gutters; the header, main content, and footer each sit in one |
| Site header | .site-header, .site-header__brand, .site-nav | The brand link and the site navigation at the top of every page |
| Hero | .hero | The opening band: one heading, one paragraph, then the actions |
| Section | .section | Each further band of a page, with a heading and short copy; give it an id so the page can link to it |
| Form | .form | Stacks fields and their submit button |
| Notice | .notice | A confirmation or status message in its own panel |
| Site footer | .site-footer | The closing line of every page |