Components
Reusable UI components and patterns for the design system.
Forms
Text Input
Checkboxes
Select
Radio Buttons
Cards
Info Card
Card with an info border for active or interactive emphasis.
Header
With Header
Card with a separate header section.
Accordions
Note: When accordion labels act as section titles, use an appropriate heading level for each .accordion-header to preserve document structure.
This is the body content for the first accordion item.
This is the body content for the second accordion item.
This is the body content for the third accordion item.
Two-Column Accordion Layout
For larger collections of accordion items, use .accordion-two-column to create a responsive two-column layout at the md breakpoint. Wrap items in a .row, then wrap each .accordion-item inside a .col-md-6 div. Bootstrap's gutter provides horizontal gap (default 1.5rem), and custom row-gap: 0.5rem provides vertical gap.
Content for item 1.
Content for item 2.
Content for item 3.
Content for item 4.
Lists
List Group
- Item 1
- Item 2
- Item 3
List Group with Links
Tables
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Data 1 | Data 2 | Data 3 |
| Data 4 | Data 5 | Data 6 |
| Data 7 | Data 8 | Data 9 |
Icons (FontAwesome)
FontAwesome icons can be used in various sizes and styles:
Larger Icons
Badges & Pills
Badges
Primary (CTA) Info Secondary Success DangerPills
Primary CTA Pill Info Pill Secondary Pill Success PillPagination
When an
<a> element is styled as a button but triggers in-page behavior rather than navigation, add role="button" so assistive technologies announce the correct purpose.
Only one
.btn-primary should appear per view. Additional actions use .btn-default to maintain clear visual hierarchy.
Every form control requires an associated
<label> via matching for/id attributes. Placeholder text is not a substitute for a label.
The wrapping container sets
data-ga-category and data-ga-subcategory. The CTA link adds data-ga-label to identify the action. The event name (click) is determined automatically by the tracking script.
When accordion labels act as section titles, wrap them in an appropriate heading level (e.g.
<h3>) inside .accordion-header to preserve document structure.
The tracking script detects accordion buttons automatically via selector matching and fires a tab event. No
data-ga-action attribute is needed — event type is inferred from the element's role.
.accordion-two-column uses .col-md-6 to arrange items in two columns at the md breakpoint. Below that, items stack into a single column.
data-ga-position records each item's numeric index. This reveals whether users click top results or scroll further down. The label is derived automatically from the link text.
The
.active class is visual only. Add aria-current="true" to the active item so assistive technologies convey its state.
.table-responsive adds horizontal scrolling on narrow viewports, preventing the table from overflowing the layout.
Decorative icons must include
aria-hidden="true" so screen readers skip them. Icons that convey meaning need an accessible text alternative (e.g. <span class="visually-hidden">).
Badge colors convey meaning visually but are not accessible alone. Ensure surrounding context or text provides the same information for users who cannot perceive color.
Navigation links use
data-ga-label for Previous/Next and data-ga-position for numbered pages. The tracking script fires a click event automatically.
The
<nav> element with aria-label="Pagination" creates a navigational landmark, helping screen-reader users locate and identify the pagination controls.