Utility classes

• Introduction
• Link
• List
• Description-list
• Table
• Button
• Button-group
• Message
• Input
• Select
• Textarea
• Checkbox
• Radio-group
• Segmented-control
• Content-container
• Form-container
• Media
• Summary
• Skip-link
• Header
• Footer
• Icons

Message

The message component provides small inline containers to hold help and error messages.

Overall usage

Used to apply additional information to form controls.

Accessibility

These messages must be programatically associated with their relevant form control.

---

.message--help

Used to apply help information associaed with a form controls.

<span class="message--help">Help message</span>

---

.message--help--radio-group

Used to apply help information associaed with a radio-group only.

<p class="message--help--radio-group">Help message</p>

---

.message--error

Used to apply an error message associated with a form control.

<span class="message--error">
  <span class="fas fa-times">
    <span class="u-hidden">Error</span>
  </span>
  Error message
</span>

---

.message--error--radio-group

Used to apply an error message associaed with a radio-group only.

<p class="message--error--radio-group">
  <span class="fas fa-times">
    <span class="u-hidden">Error</span>
  </span>
  Error message
</p>

---

.message--required

Used to notify users of required fields.

<span class="message--required">(Required)</span>