Sample component page

Intro: Describe this component in 1-3 sentences. Explain why the page exists and what users will get out of the content on this page. Be brief. Limit to around 400 characters with spaces.

Standard [component name] or Types

Optional description. 1-3 sentences, 200-350 characters.

Instructions

Use the following prompts to get started on your component page:

First, add a variation group.

1) In the “Variation group name” field,

  • Use the label “Standard [component]” if there is one standard default component. See checkboxes and tables as examples.

  • Use the label “Types” if there is more than one standard component with different use cases. See buttons as an example.

2) Click on the “Add variations” button below.

  • If there’s one standard component, leave the “Variation name” field blank.
  • If there are types, add as many variations as needed. Add the name of each type to the “Variation name” field.

3) If there are states, add a single code snippet showing them, as shown in this example. If necessary, you can add an image instead of a code snippet, but live samples are strongly preferred.

4) If you have them, add implementation notes to the “Implementation details” tab. Add design, production, and style notes to the “Optional specs” tab.






HTML code snippet

<div class="m-form-field m-form-field__checkbox">
    <input class="a-checkbox" type="checkbox" id="test_checkbox">
    <label class="a-label" for="test_checkbox">Default</label>
</div>
<br>
<!--Hover-->
<div class="m-form-field m-form-field__checkbox">
    <input class="a-checkbox hover" type="checkbox" id="test_checkbox_basic_hover">
    <label class="a-label" for="test_checkbox_basic_hover">Hover</label>
</div>
<br>
<!--Focus-->
<div class="m-form-field m-form-field__checkbox">
    <input class="a-checkbox focus" type="checkbox" id="test_checkbox_basic_focus">
    <label class="a-label" for="test_checkbox_basic_focus">Focus</label>
</div>
<br>
<!--Selected-->
<div class="m-form-field m-form-field__checkbox">
    <input class="a-checkbox" type="checkbox" id="test_checkbox_basic_checked" checked>
    <label class="a-label" for="test_checkbox_basic_checked">Selected</label>
</div>
<br>
<!--Disabled-->
<div class="m-form-field m-form-field__checkbox">
    <input class="a-checkbox" type="checkbox" id="test_checkbox_basic_disabled" disabled>
    <label class="a-label" for="test_checkbox_basic_disabled">Disabled</label>
</div>
<br>
<!--Disabled/selected-->
<div class="m-form-field m-form-field__checkbox">
    <input class="a-checkbox" type="checkbox" id="test_checkbox_basic_disabled_selected" disabled checked>
    <label class="a-label" for="test_checkbox_basic_disabled_selected">Disabled/selected</label>
</div>

Implementation details

This is developer-focused stuff. Be sure to add the .o-blahblah class to blahblah if you’re doing this or that, otherwise this bad thing will happen.

Specs

You can add images here too.

Default checkbox

  • Height: 20 px
  • Width: 20 px
  • Margin right: 10 px
  • Border: 1 px, Gray 60 (#919395)
  • Background: White (#ffffff)
  • Avenir Next Regular, 16 px, Black (#101820)

Hover

  • Border: 2 px, Pacific (#0072ce)

Focus

  • Border: 2 px, Pacific (#0072ce)
  • Outline: Dotted 1px, Pacific (#0072ce)
  • Outline offset: 1px

Selected

  • Border: 1 px, Gray 60 (#919395)
  • Minicon: 18 px, Black (#101820)

Disabled

  • Border: 1 px, Gray 60 (#919395)
  • Background: Gray 10 (#e7e8e9)
  • Avenir Next Regular, 16 px, Gray (#5a5d61)

Variations

Optional descriptive text. 1-3 sentences, 200-350 characters.

If your component has further variations beyond what’s shown in the Standard/Types group above, add an additional “Variation group”, and name it using the “Variation group name” field.

The name of this group may vary depending on use case. For example:

  • Use the label “Groups” if you’re showing component groupings. See expandables for an example.
  • Use the label “Sizes” if you’re showing alternate component sizes. See checkboxes for an example.
  • One-off labels may also be appropriate (for example, “Responsive tables”, “Links with icons)
  • If in doubt, use the label “Variations”

Once you’ve done that, click on the “Add variations” button, label each variation, and add implementation and specs details as needed.

Feathered checkbox

Brief statement of what this is, if needed. Sample would appear below.

Striped checkbox

Brief statement of what this is, if needed. Sample would appear below.

Pleated checkbox

Brief statement of what this is, if needed. Sample would appear below.

Use cases

Provide details on when and where to use this component. Use active voice. No character limit. Paragraph content is optional.

Guidelines

Content guidelines

Include character count restrictions/recommendations, casing guidelines, voice, etc. No character limit. Paragraph content is optional.

Stylistic guidelines

If applicable, include information on how the component is styled or used. This is not used often in component pages, mostly foundations pages.

Behavior

Responsive guidelines.

Above 600 px Below 601 px
Image showing what component looks like at tablet/desktop breakpoint Image showing what component looks like at mobile breakpoint

Restrictions

Do

Words or photos

Do not

Words or photos

Edit page