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" style="usa-button--big" new-tab=false %}.
• Set new-tab to true if you want the link to open in a new window.
• 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.

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

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

Where: See Create account template.