Content Header

General Guidelines

Content headers are used at the top of a section and placed above the content they refer to. They delineate or label data or a section of content (for example a column header in a table).

Voice and Tone

Content Headers should be clear, concise, and descriptive of the content they relate to. Content Headers should generally not exceed three words in order to facilitate scannability and maintain the clarity of the design.

Grammar and Mechanics

• Column headers should be presented in ALL CAPS.
• Section headers should be title case.
• Content headers should be limited to two or three words.

Usage

Do's and Don'ts

Do use ALL CAPS

Do use a sorting icon (triangles)

Don’t use carets

spacing, size, padding, and typography

Examples

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

Variants

The variants of this component are as follows:

Static Header

<div class="iris-content-header">
    <div class="container-fluid">
        <div class="row">
            <div class="col-3">
                <div class="iris-content-header__item">Date</div>
            </div>
            <div class="col-3">
                <div class="iris-content-header__item">Description</div>
            </div>
            <div class="col-3">
                <div class="iris-content-header__item">Account</div>
            </div>
            <div class="col-3">
                <div class="iris-content-header__item">Amount</div>
            </div>
        </div>
    </div>
</div>

Decorators

Sortable

When the column can be sorted by a specifc header, adding data-sortable will add the sorting arrows to the right of the item.

<div class="iris-content-header">
    <div class="container-fluid">
        <div class="row">
            <div class="col-3">
                <button class="iris-content-header__item" data-sortable>
                    Unsorted
                    <div class="iris-content-header__sorter"></div>
                </button>
            </div>
            <div class="col-3">
                <button class="iris-content-header__item iris-content-header__item--descending" data-sortable>
                    Descending
                    <div class="iris-content-header__sorter"></div>
                </button>
            </div>
            <div class="col-3">
                <button class="iris-content-header__item iris-content-header__item--ascending" data-sortable>
                    Ascending
                    <div class="iris-content-header__sorter"></div>
                </button>
            </div>
            <div class="col-3">
                <div class="iris-content-header__item">Static</div>
            </div>
        </div>
    </div>
</div>

Section Header

Sometimes a simple header is needed to proceed content. Use the content header with an h-tag to get a static header for a group of content.

<div class="iris-content-header">
    <h4 class="iris-content-header__title">Section Header</h4>
</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 <button> element for a header item that is sortable to attach the roles and interactions for a screenreader.

Accessibility that ContentHeader provides for you:

• Handles creating an aria-describedby element to describe the sorting interaction.
• Adds the aria-label attribute and updates based on sorted state.
• Automatically changes the describedby text to indicate what the sort action is.

API

Examples

Getting the ContentHeaderComponent Object of an Element

var element = document.getElementById('iris_content_header');
var ContentHeaderComponent = Alkami.Iris.ContentHeaderComponent.componentForElement(element);

Event listener to parent content header or any of their children

const contentHeaderElement = document.getElementById('content_header');
const contentHeaderChildElement = document.getElementById('content_header_child');

// Add an event listener to any of the children
contentHeaderChildElement.addEventListener('iris.sort.after', (event) => {
    event.detail.component; // => Content header instance
    event.detail.childComponent; // => Content header active child instance
});

// Or add an event to the parent content header element itself
contentHeaderElement.addEventListener('iris.contentHeader.sort.after', (event) => {
    event.detail.component; // => Content header instance
    event.detail.childComponent; // => Content header active child instance
});

Events

A sorted event will fire when a iris-content-header__item element is clicked.

Constructors

new ContentHeaderComponent(element)

• element - The iris-content-header Element.
• options - Options passed to the Content header.

Creates a new content header component.

Methods

static ContentHeaderComponent.init(node?)

Initializes any new content header Components found if node is not passed in, otherwise initializes only on the node. Returns an array of ContentHeaderComponent.

static ContentHeaderComponent.destroy(node)

Destroys the ContentHeaderComponent viewmodel associated with the node.

static ContentHeaderComponent.refresh(nodes)

Initializes any new content header components on the node(s) passed in.. Returns an array of ContentHeaderComponent.

static ContentHeaderComponent.componentForElement(sourceElement)

• sourceElement - The element that may be a ContentHeaderComponent.

Checks if a DOM element has a ContentHeaderComponent object associated with it. Returns the ContentHeaderComponent object if one exists or null if one is not found.

Properties

contentHeader.activeChildComponent

• ContentHeaderItem Get the 'activeChildComponent' of the content header.

contentHeader.childrenComponents

• ContentHeaderItem[] Get all of the 'childrenComponents' instances of the content header.

Variables

The variables used in this component are as follows:

// Border variables
$content-header-border-default: $alto;

// Font variables
$content-header-item-weight: 500;
$content-header-item-color: $dove-gray;
$content-header-item-color-hover: darken($dove-gray, 30%);

// Color Variables
$content-header-sorter-color-default: transparentize($dove-gray, 0.5);
$content-header-sorter-color-active: $mine-shaft;

Themeability

Nothing is themeable in this component.