Components

Reusable, standardized UI building blocks ensure consistency and efficiency across all digital experiences. Each component includes visual specifications, code implementation, usage guidelines, and accessibility requirements, allowing teams to build cohesive interfaces without recreating common elements from scratch. From basic buttons and form inputs to complex navigation patterns and data displays, these modular elements serve as the foundation for scalable, high-quality user interfaces that maintain brand consistency while reducing development time and effort.

Buttons


<button class="button button-primary">Primary Button</button>


<button class="button button-secondary">Secondary Button</button>


<button class="button button-icon button-icon-left">
    <svg>
    Icon Left Button
</button>


<button class="button button-icon button-icon-right">
    Icon Right Button
    <svg>
</button>

Links

Text Link

Forms

Examples

Glossary

Term One

Definition of the first term with additional descriptive text to demonstrate wrapping behavior and visualize line height.

Term Two

Definition of the second term.

Term Three

Definition of the third term with some additional context to show how longer definitions look in the glossary format.


<div class="glossary">
    <div class="glossary-item">
        <div class="glossary-term">
            <h3 class="font-size-base font-weight-bold">Term One</h3>
        </div>
        <div class="glossary-definition">
            <p>Definition of the first term with additional descriptive text to demonstrate wrapping behavior and visualize line height.</p>
        </div>
    </div>
    <div class="glossary-item">
        <div class="glossary-term">
            <h3 class="font-size-base font-weight-bold">Term Two</h3>
        </div>
        <div class="glossary-definition">
            <p>Definition of the second term.</p>
        </div>
    </div>
    <div class="glossary-item">
        <div class="glossary-term">
            <h3 class="font-size-base font-weight-bold">Term Three</h3>
        </div>
        <div class="glossary-definition">
            <p>Definition of the third term with some additional context to show how longer definitions look in the glossary format.</p>
        </div>
    </div>
</div>

Unordered List

First item in the list
Second item with additional descriptive text to demonstrate wrapping behavior and visualize line height
Third item in the list


<ul>
    <li>First item in the list</li>
    <li>Second item with additional descriptive text to demonstrate wrapping behavior and visualize line height</li>
    <li>Third item in the list</li>
</ul>

Unordered List - Plain

First item in the list
Second item with additional descriptive text to demonstrate wrapping behavior and visualize line height
Third item in the list


<ul class="plain">
    <li>First item in the list</li>
    <li>Second item with additional descriptive text to demonstrate wrapping behavior and visualize line height</li>
    <li>Third item in the list</li>
</ul>