Pagination & Breadcrumbs

The implementation for pagination should be that when a user is on the first or last page, the respective "Prev" and "Next" buttons should not be rendered. The current page should also be implemented as a "<span />" rather than a "<a />" link for accessibility purposes.

Large Default

Tabs organize content across different screens, data sets, and other interactions.

Usage

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy. Each tab should contain content that is distinct from other tabs in a set. For example, tabs can present differently.

Default Mobile

Alerts

Alert Dialogues Tabs organize content across different screens, data sets, and other interactions.

For technical implementation, the close icon can be added to an alert optionally by simply omitting the button with a class name .alert-close-button.

Success Alert

A task or action has been successfully completed.

Notification Alert

Informative or directive, not critical.

Caution Alert

Proceed or cancel action warning.

Error Alert

Something is wrong and needs your attention now.

Tab Navigation

Tabs organize content across different screens, data sets, and other interactions.

Usage

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy. Each tab should contain content that is distinct from other tabs in a set. For example, tabs can present different sections of categories, different products, or different types of information.

Principles

  1. Scalable
    • As tabs can horizontally scroll, a UI can have as many tabs as needed.
  2. Informative
    • Tabs organize content into categories to help users easily find different types of information.
  3. Peers
    • Tabs are displayed next to each other as peers, in categories of equal importance.

Types

Fixed tabs

Display all tabs on one screen, with each tab at a fixed width. Use fixed tabs when displaying a limited number of categories. When using fixed tabs, ensure they can all be seen on mobile, without truncating their text. Fixed tabs have equal width, which can be calculated either as:

  • The width of the screen divided by the number of tabs
  • The width of the widest tab label
Don’t use more than four fixed tabs at once.

They don’t scroll to reveal more tabs; the visible tab set represents the only tabs available. They are best for switching between related content quickly, such as between sections of information or payment methods. To navigate between fixed tabs, tap an individual tab.

Scrollable tabs

Displayed without fixed widths. They are scrollable, meaning some tabs will remain off-screen until scrolled. When a set of tabs cannot fit on screen, use scrollable tabs. Scrollable tabs can use longer text labels and a larger number of tabs. They are best used for browsing on touch interfaces.

The width of each tab is defined by the length of its text label. To navigate between a set of scrollable tabs, users swipe the set left or right. A tab set can be looped so when a user reaches the last tab in a set, the first tab is shown again. To select an individual tab, tap it. When tapped, a scrollable tab should reposition itself to become fully visible on screen.

Active tab indicators

To differentiate an active tab from an inactive tab, apply an underline and color change to the active tab’s text and icon. Color change should be determined by the brand’s primary color. Ensure ADA compliance color contrast guidelines are followed.

Technical Implemenation

Javascript is required to implement this page element. For details, see Bootstrap Documentation.

Divider

Simply use the base html element "<hr>"


Accordions

Default (Small Breakpoint Shown)
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
No Top Divider (List)
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Open
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Modal

Add relevant classes (shown below) to element with .modal-dialog class to implement sizing and fullscreen options.

Reference: Bootstrap Modal Documentation


Size Options


Full Screen Options



<div class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header bg-light">
                <button type="button" class="btn close px-5 m-1 rounded-0" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">Close</span>
                </button>
                <h3 class="modal-title">Modal Title</h3>
            </div>
            <div class="modal-body px-5">
                <p class="text-muted">Duis volutpat elementum finibus. Donec neque diam, fringilla vel sem sit amet, sodales volutpat dui. Pellentesque aliquet tristique lorem et efficitur. Vestibulum rutrum diam vitae sapien posuere, in mattis neque ultricies. Etiam semper, erat nec luctus sagittis, risus mi venenatis lorem, eu pellentesque dui magna quis velit. Quisque nec enim ac lectus molestie faucibus id sed massa. Mauris posuere hendrerit eros, in sagittis tortor facilisis ac. </p>
            </div>
            <div class="modal-footer px-5">
                <button type="button" class="btn btn-outline-primary btn-block btn-sm" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Loading Spinners

The primary brand color will be used when the background color is white #000000 or light bg grey #F5F5F5. If an overlay is being displayed, the spinner should be white #000000.

Loading...

Dia & Co

Loading...

bg #FFFFFF

Loading...

bg #F5F5F5

Loading...

bg #949494

Loading...

bg #525252

Loading...

bg #000000

<div class="spinner-border text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>

Product Display

Product Tile
product tile
Product Strip Default
product strip default
Product Strip Small
product strip small