Components

• 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

Icons

Simplex includes all Font Awesome icons.

Overall usage

Used to add icons to static content, lists and buttons.

Accessibility

• The <span> element should be used for the icons as this element is a generic inline element.
• If the icon is decorative, aria-hidden="true" should be included.
• If the icon adds meaning to the content, additional information should be included for screen readers using the hidden class.

---

Decorative icons

Icons that are purely decorative should be hidden from screen readers to avoid verbal clutter. This is achieved using the aria-hidden attribute.

<span class="fas fa-chevron-left" aria-hidden="true"></span>
<span class="fas fa-chevron-right" aria-hidden="true"></span>
<span class="fas fa-times" aria-hidden="true"></span>
<span class="fas fa-plus" aria-hidden="true"></span>

---

Non-decorative icons

Icons that convey important information should contain a description for screen readers. This is achieved using hidden content.

<span class="fas fa-chevron-left">
  <span class="u-hidden">Left</span>
</span>

<span class="fas fa-chevron-right">
  <span class="u-hidden">Right</span>
</span>

<span class="fas fa-times">
  <span class="u-hidden">Close</span>
</span>

<span class="fas fa-plus">
  <span class="u-hidden">Open</span>
</span>

---

Adding color

Color can be added to any static icon using color utility classes.

<span class="fas fa-chevron-left c-primary"></span>
<span class="fas fa-chevron-right c-gray-40"></span>
<span class="fas fa-times c-red"></span>
<span class="fas fa-plus c-green"></span>

---

Adding icons to buttons

The .button--icon-left needs to be added beside the Font-awesome icon class. This shifts the icons slighty to the left.

<button type="button" class="button--primary">
  <span class="fas fa-chevron-left button--icon-left" aria-hidden="true"></span>
  Back
</button>

The .button--icon-right needs to be added beside the Font-awesome icon class. This shifts the icons slighty to the right.

<button type="button" class="button--primary">
  Forward
  <span class="fas fa-chevron-right button--icon-right" aria-hidden="true"></span>
</button>

Icons can be used inside small buttons. As there is no supporting text for these icons, hidden text must be provided for screen readers

<button type="button" class="button--primary button-small">
  <span class="fas fa-times" aria-hidden="true">
    <span class="u-hidden">Close</span>
  </span>
</button>
<button type="button" class="button--secondary button-small">
  <span class="fas fa-plus" aria-hidden="true">
    <span class="u-hidden">Open</span>
  </span>
</button>
<button type="button" class="button--link button-small">
  <span class="fas fa-chevron-right" aria-hidden="true">
    <span class="u-hidden">Right</span>
  </span>
</button>