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

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

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

Size and Padding

Examples

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

Marquee - Without 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>

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.