Marquee

A Marquee is an area introducing a section of content that has a title, optional actions, and optional tabs.

General Guidelines

Marquees are most applicable to desktop interfaces. The Marquee component is fixed on the page (usually at the top) to provide a constant section title and other elements across the entire website.

Actions placed on the Marquee should apply consistently to the widget content beneath it. For Alkami, the marquee is the anchor of the ORB desktop application and spans all other parts of the User Interface (UI). The functionality of the ORB marquee is applicable across all contexts in the desktop ecosystem.

Anatomy

A visual of a Marquee, H1 widget title, three primary tabs with color bar on top for selected state, 4 action buttons that span across tabs in widgets. optional buttons include an education, an article, and a help button

Voice and Tone

Marquees include a title. These should be clear and concise and universally applicable to the widget.

Grammar and Mechanics

  • Marquees are required for all widgets.
  • Placement is at the top of a widget and is used primarily for desktop application.
  • Marquees should be title case.

Usage

Configurations When
Use a marquee When you have a widget.
Use a marquee with actions When you need to provide a consistent set of actions .
Use a marquee with tabs When you need to have a consistent set of content divisions.

Do's and Don'ts

Do use a marquee with widgets
Do use an h1 element for the title section of the Marquee
Don't use components other than the buttons and tabs standard to Marquee
A Marquee is an area introducing a section of content that has a title, optional actions, and optional tabs.

Size and Padding

A visual of three Marquee examples. The first example is a panel marquee includes a H1 titles, that is sometimes themed, padding on top and bottom is 20 pixels, left and right padding is 15 pixels. The second visual includes a floating marquee with Title and 3 buttons justified right. The third marquee is a panel with tabs, a title, an add payee action button, three buttons and three primary tabs
A Marquee is an area introducing a section of content that has a title, optional actions, and optional tabs.

Examples

For details on when to use this component, see the Usage tab.

Marquee - Without Tabs

Title

<div class="iris-marquee">
    <div class="iris-marquee__row">
        <h1 class="iris-marquee__title">Title</h1>

        <div class="iris-marquee__action-group">
            <button class="iris-button iris-button--action" aria-label="Messages">
                <span class="font-icon-envelope iris-button__icon"></span>
            </button>

            <button class="iris-button iris-button--action" aria-label="Education">
                <span class="font-icon-fi iris-button__icon"></span>
            </button>

            <button class="iris-button iris-button--action">
                <span class="iris-button__text">Example</span>
            </button>
        </div>
    </div>
</div>

Marquee - With Tabs

<div class="iris-marquee">
    <div class="iris-marquee__row">
        <h1 class="iris-marquee__title">Title</h1>

        <div class="iris-marquee__action-group">
            <button class="iris-button iris-button--action" aria-label="Messages">
                <span class="font-icon-envelope iris-button__icon"></span>
            </button>

            <button class="iris-button iris-button--action" aria-label="Education">
                <span class="font-icon-fi iris-button__icon"></span>
            </button>

            <button class="iris-button iris-button--action">
                <span class="iris-button__text">Example</span>
            </button>
        </div>
    </div>

    <div class="iris-marquee__row">
        <nav class="iris-tabs iris-tabs--main" aria-label="some tabs">
            <div class="iris-tabs__inner">
                <ul class="iris-tabs__list">
                    <li class="iris-tabs__list-item">
                        <a class="iris-tabs__link" href="#">Accounts</a>
                    </li>
                    <li class="iris-tabs__list-item ">
                        <a class="iris-tabs__link active" href="#">Statements</a>
                    </li>
                    <li class="iris-tabs__list-item">
                        <a class="iris-tabs__link" href="#">Tax Information</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>

Accessibility

As always, we want all of the components in the application to be accessible. Please keep the following notes in mind while using this component:

  • Always use a <h1> element for the title of this section to maintain heirarchy for screenreaders.

Variables

The variables used in this component are as follows:

// Background color variables
$marquee-background: $gallery;

// Border variables
$marquee-border: $alto;

Themeability

Nothing is themeable in this component.

Variant: *Standard** *

Title

<div class="iris-marquee">
    <div class="iris-marquee__row">
        <h1 class="iris-marquee__title">Title</h1>

        <div class="iris-marquee__action-group">
            <button class="iris-button iris-button--action" aria-label="Messages">
                <span class="font-icon-envelope iris-button__icon"></span>
            </button>

            <button class="iris-button iris-button--action" aria-label="Education">
                <span class="font-icon-fi iris-button__icon"></span>
            </button>

            <button class="iris-button iris-button--action">
                <span class="iris-button__text">Example</span>
            </button>
        </div>
    </div>
</div>

Variant: *With Tabs** *

<div class="iris-marquee">
    <div class="iris-marquee__row">
        <h1 class="iris-marquee__title">Title</h1>

        <div class="iris-marquee__action-group">
            <button class="iris-button iris-button--action" aria-label="Messages">
                <span class="font-icon-envelope iris-button__icon"></span>
            </button>

            <button class="iris-button iris-button--action" aria-label="Education">
                <span class="font-icon-fi iris-button__icon"></span>
            </button>

            <button class="iris-button iris-button--action">
                <span class="iris-button__text">Example</span>
            </button>
        </div>
    </div>

    <div class="iris-marquee__row">
        <nav class="iris-tabs iris-tabs--main" aria-label="some tabs">
            <div class="iris-tabs__inner">
                <ul class="iris-tabs__list">
                    <li class="iris-tabs__list-item">
                        <a class="iris-tabs__link" href="#">Accounts</a>
                    </li>
                    <li class="iris-tabs__list-item ">
                        <a class="iris-tabs__link active" href="#">Statements</a>
                    </li>
                    <li class="iris-tabs__list-item">
                        <a class="iris-tabs__link" href="#">Tax Information</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>