Components

Button

Why: A button draws attention to important actions with a large selectable surface.

How:

• To add to a content file, enter this line: {% include button.html label="Create" link="index.html" %}.
• Note that the button component uses the a (link) element, not the button element, because for most prototyping purposes it's more useful to simply enter a link of a page you want to go to when pressing the button.
• Other settings:
  • id
  • new-tab (true or false)
  • style

Header

Why: A header helps users identify where they are and provide a quick, organized way to reach the main sections of a website.

How:

• In the settings (front matter) of a content (markdown) page, add header: true.
• To remove it, change the setting to header: false or remove it.

Where: See Article template.

Link

Why: A link connects users to a different page or further information.

How:

• To add to a content file, enter this line: {% include link.html label="Link text" link="index.html" %}.
• Set new-tab to true if you want the link to open in a new window.
• Other settings:
  • id
  • new-tab (true or false)
  • style

Icon

Why: Icons help communicate meaning, actions, status, or feedback.

How:

• Use the filter on the Icon component page to find the name of the icon you want to use.
• Add it to the page, like this: {% include components/icon.html icon="info" %}.
• You can change the size by adding a setting between 3 and 9 to multiply the size by that amount, like this: size="4".
• You can use style settings. For example, to change the color, add this setting: style="text-base".
• Note that icons are added to the page as inline elements, but if they are at the beginning of a paragraph, the paragraph will start on a new line. You can use the float utility to move it next to paragraph text instead of above or below it, like this: style="float-left".

Where: See Create account template.

Prose

Why: Format a block of running text.

How:

• In the settings (front matter) of a content (markdown) page, add prose: true.
• To remove it, change the setting to prose: false or remove it.

Where: See Article template.

Text input

Why: A text input allows users to enter any combination of letters, numbers, or symbols.

How:

• To add to a content file, enter this line: {% include text-input.html label="The Label" id="the-label" type="text" %}.
• The label is the text that appears above the input.
• The id is useful for referring to the input for different interactions.
• The default type is text, but there are other options that affect the behavior of the input:
  • Password
  • Email
  • Phone
  • Date
  • Number
• Other settings:
  • style

Where: See Create account template.

Tooltip

Why: A tooltip provides additional context when hovering over or focusing on an interactive element.

How:

• To add a tooltip to a button or link component, add the usa-tooltip style and text using the tooltip setting, like this: {% include button.html label="Create" link="#" style="usa-tooltip" tooltip="Click me to create an account" %}
• Change the position by adding the tooltip-position setting, like this: tooltip-position="right".