Version 0.40.0

UI Organisms

Datalist

Datalist use flex display to emulate a table render with more flexibility.
By default, all columns are an equal division of the available space.

Refer to the Datalist Design Principle for responsive concept and more details.

Datalist Design Principle

Datalist concept

Elements Class Description
Primary .as--primary Main information in the row, always displayed firstly for easy reading.
Secondary .as--secondary Additional information
Actions no specific class Interaction element always displayed on the right to keep the flow. Not required.

Use this modifiers with responsive suffix for specify when you want to switch to Mobile Datalist concept.
You can use several Primary elements and several Secondary elements according to the information to display, but only one Action element.

Only the primary titles are displayed on mobile view, to display the secondary one you must fill data-label in all relevant sui-o-datalist__col element.

<div class="sui-o-datalist">
    <div class="sui-o-datalist__header">
        <div class="sui-o-datalist__col as--primary@md">
            Column label
        </div>
        <div class="sui-o-datalist__col as--primary@md">
            Column label
        </div>
        <div class="sui-o-datalist__col as--secondary@md">
            Column label
        </div>
        <div class="sui-o-datalist__col as--secondary@md">
            Column label
        </div>
    </div>
    <a href="#" class="sui-o-datalist__row">
        <div class="sui-o-datalist__col as--primary@md">
            Value
        </div>
        <div class="sui-o-datalist__col as--primary@md">
            Value
        </div>
        <div class="sui-o-datalist__col as--secondary@md" data-label="Value">
            Value
        </div>
        <div class="sui-o-datalist__col as--secondary@md" data-label="Value">
            Value
        </div>

    </a>
    <a href="#" class="sui-o-datalist__row as--active">
        <div class="sui-o-datalist__col as--primary@md">
            Value
        </div>
        <div class="sui-o-datalist__col as--primary@md">
            Value
        </div>
        <div class="sui-o-datalist__col as--secondary@md" data-label="Value">
            Value
        </div>
        <div class="sui-o-datalist__col as--secondary@md" data-label="Value">
            Value
        </div>
    </a>
    ...
</div>

Bordered

<div class="sui-o-datalist as--bordered">
    <div class="sui-o-datalist__header">
        <div class="sui-o-datalist__col as--primary@md">
            Column label
        </div>
        <div class="sui-o-datalist__col as--primary@md">
            Column label
        </div>
        <div class="sui-o-datalist__col as--secondary@md">
            Column label
        </div>
        <div class="sui-o-datalist__col as--secondary@md">
            Column label
        </div>
    </div>
    <a href="#" class="sui-o-datalist__row">
        <div class="sui-o-datalist__col as--primary@md">
            Value
        </div>
        <div class="sui-o-datalist__col as--primary@md">
            Value
        </div>
        <div class="sui-o-datalist__col as--secondary@md" data-label="Value">
            Value
        </div>
        <div class="sui-o-datalist__col as--secondary@md" data-label="Value">
            Value
        </div>

    </a>
    <a href="#" class="sui-o-datalist__row as--active">
        <div class="sui-o-datalist__col as--primary@md">
            Value
        </div>
        <div class="sui-o-datalist__col as--primary@md">
            Value
        </div>
        <div class="sui-o-datalist__col as--secondary@md" data-label="Value">
            Value
        </div>
        <div class="sui-o-datalist__col as--secondary@md" data-label="Value">
            Value
        </div>
    </a>
    ...
</div>

Hover effect

Add the as--hover modifier on the datalist to enabled row hover effect.

<div class="sui-o-datalist as--hover">
    <div class="sui-o-datalist__header">
        <div class="sui-o-datalist__col as--primary@md">
            Column label
        </div>
        <div class="sui-o-datalist__col as--primary@md">
            Column label
        </div>
        <div class="sui-o-datalist__col as--secondary@md">
            Column label
        </div>
        <div class="sui-o-datalist__col as--secondary@md">
            Column label
        </div>
    </div>
    <a href="#" class="sui-o-datalist__row">
        <div class="sui-o-datalist__col as--primary@md">
            Value
        </div>
        <div class="sui-o-datalist__col as--primary@md">
            Value
        </div>
        <div class="sui-o-datalist__col as--secondary@md" data-label="Value">
            Value
        </div>
        <div class="sui-o-datalist__col as--secondary@md" data-label="Value">
            Value
        </div>

    </a>
    <a href="#" class="sui-o-datalist__row as--active">
        <div class="sui-o-datalist__col as--primary@md">
            Value
        </div>
        <div class="sui-o-datalist__col as--primary@md">
            Value
        </div>
        <div class="sui-o-datalist__col as--secondary@md" data-label="Value">
            Value
        </div>
        <div class="sui-o-datalist__col as--secondary@md" data-label="Value">
            Value
        </div>
    </a>
    ...
</div>

Add the as--link modifier on a column to display the content as a link (only on hover if as--hover is present on datalist).
Add the as--dimmed modifier to reduce opacity of the column (set back full opacity on hover if as--hover is present on datalist).

<div class="sui-o-datalist as--hover">
    <div class="sui-o-datalist__header">
        <div class="sui-o-datalist__col as--primary@md">
            Column label
        </div>
        <div class="sui-o-datalist__col as--primary@md">
            Column label
        </div>
        <div class="sui-o-datalist__col as--secondary@md">
            Column label
        </div>
        <div class="sui-o-datalist__col as--secondary@md">
            Column label
        </div>
    </div>
    <a href="#" class="sui-o-datalist__row">
        <div class="sui-o-datalist__col as--link as--primary@md">
            Value
        </div>
        <div class="sui-o-datalist__col as--dimmed as--primary@md">
            Value
        </div>
        <div class="sui-o-datalist__col as--secondary@md" data-label="Value">
            Value
        </div>
        <div class="sui-o-datalist__col as--secondary@md" data-label="Value">
            Value
        </div>

    </a>
    <a href="#" class="sui-o-datalist__row as--active">
        <div class="sui-o-datalist__col as--link as--primary@md">
            Value
        </div>
        <div class="sui-o-datalist__col as--dimmed as--primary@md">
            Value
        </div>
        <div class="sui-o-datalist__col as--secondary@md" data-label="Value">
            Value
        </div>
        <div class="sui-o-datalist__col as--secondary@md" data-label="Value">
            Value
        </div>
    </a>
    ...
</div>

Row alignment

You can handle the vertical alignment of the content of a row with as--vertical-X where X is top, middle or bottom.
This modifiers can use a responsive suffix.

<div class="sui-o-datalist">
    <div class="sui-o-datalist__header">
        ...
    </div>
    <a href="#" class="sui-o-datalist__row as--top">
        ...
    </a>
    <a href="#" class="sui-o-datalist__row as--middle">
        ...
    </a>
    <a href="#" class="sui-o-datalist__row as--bottom">
        ...
    </a>
</div>

Column horizontal alignment

You can handle the horizontal alignment of the content of a column with as--align-X where X is left, center or right.
This modifiers can use a responsive suffix.

Column label left
Column label center
Column label right
Value left
Value center
Value right
<div class="sui-o-datalist">
    <div class="sui-o-datalist__header">
        <div class="sui-o-datalist__col as--align-left as--primary@md">
            Column label left
        </div>
        <div class="sui-o-datalist__col as--align-center as--secondary@md">
            Column label center
        </div>
        <div class="sui-o-datalist__col as--align-right">
            Column label right
        </div>
    </div>
    <a href="#" class="sui-o-datalist__row">
        <div class="sui-o-datalist__col as--align-left as--primary@md">
            Value left
        </div>
        <div class="sui-o-datalist__col as--align-center as--secondary@md" data-label="Value center">
            Value center
        </div>
        <div class="sui-o-datalist__col as--align-right">
            Value right
        </div>
    </a>
</div>

Column vertical alignment

You can handle the vertical alignment of the content of a column with as--top, as--middle or as--bottom.
This modifiers can use a responsive suffix.

<div class="sui-o-datalist">
    <div class="sui-o-datalist__header">
        <div class="sui-o-datalist__col as--primary@md">
            Column label
        </div>
        <div class="sui-o-datalist__col as--secondary@md">
            Column label
        </div>
        <div class="sui-o-datalist__col">
            Column label
        </div>
    </div>
    <a href="#" class="sui-o-datalist__row">
        <div class="sui-o-datalist__col as--primary@md">
            <div>
                Value <br />
                Two line
            </div>
        </div>
        <div class="sui-o-datalist__col as--top as--secondary@md" data-label="Value center">
            <div>
                Value top
            </div>
        </div>
        <div class="sui-o-datalist__col">
            <div>
                Value
            </div>
        </div>
    </a>
    <a href="#" class="sui-o-datalist__row">
        <div class="sui-o-datalist__col as--primary@md">
            <div>
                Value <br />
                Two line
            </div>
        </div>
        <div class="sui-o-datalist__col as--middle as--secondary@md" data-label="Value center">
            <div>
                Value middle
            </div>
        </div>
        <div class="sui-o-datalist__col">
            <div>
                Value
            </div>
        </div>
    </a>
    <a href="#" class="sui-o-datalist__row">
        <div class="sui-o-datalist__col as--primary@md">
            <div>
                Value <br />
                Two line
            </div>
        </div>
        <div class="sui-o-datalist__col as--bottom as--secondary@md" data-label="Value center">
            <div>
                Value bottom
            </div>
        </div>
        <div class="sui-o-datalist__col">
            <div>
                Value
            </div>
        </div>
    </a>
</div>

Columns sizes

If you need to change the size of a column, you will need to apply the size modifier on the column on every row (header included).

Fluid size

Add a as--grow-X, where X is a integer between 1 and 8, to change the grow for the column.
Refer to the flex grow property for more informations.
This modifiers can use a responsive suffix.

1
2
3
4
5
6
7
8
<div class="sui-o-datalist">
    <div class="sui-o-datalist__row">
        <div class="sui-o-datalist__col as--grow-1">
            ...
        </div>
        <div class="sui-o-datalist__col as--grow-2">
            ...
        </div>
        <div class="sui-o-datalist__col as--grow-3">
            ...
        </div>
        <div class="sui-o-datalist__col as--grow-4">
            ...
        </div>
        <div class="sui-o-datalist__col as--grow-5">
            ...
        </div>
        <div class="sui-o-datalist__col as--grow-6">
            ...
        </div>
        <div class="sui-o-datalist__col as--grow-7">
            ...
        </div>
        <div class="sui-o-datalist__col as--grow-8">
            ...
        </div>
    </div>
</div>

Fixed size

If you need to set up a fixed column size (ie: icons) add a as--size-X modifier where X is xxs, xs, sm, md, lg, xl or `xxl.
This modifiers can use a responsive suffix.

sm
md
lg
xl
xxl
auto
<div class="sui-o-datalist">
    <div class="sui-o-datalist__row">
        <div class="sui-o-datalist__col as--size-xxs@lg">
            ...
        </div>
        <div class="sui-o-datalist__col as--size-xs@lg">
            ...
        </div>
        <div class="sui-o-datalist__col as--size-sm@lg">
            ...
        </div>
        <div class="sui-o-datalist__col as--size-md@lg">
            ...
        </div>
        <div class="sui-o-datalist__col as--size-lg@lg">
            ...
        </div>
        <div class="sui-o-datalist__col as--size-xl@lg">
            ...
        </div>
        <div class="sui-o-datalist__col as--size-xxl@lg">
            ...
        </div>
        <div class="sui-o-datalist__col">
            ...
        </div>
    </div>
</div>

Advanced examples

Title & Details

<div class="sui-o-datalist as--hover">
    <a href="#" class="sui-o-datalist__row as--middle">
        <div class="sui-o-datalist__col as--primary@md as--size-xs as--align-center as--icon">
            <i class="sui-a-icon">
                ...
            </i>
        </div>
        <div class="sui-o-datalist__col as--primary@md as--grow-2@lg as--link">
            <div class="sui-o-datalist__item-title">
                My über project
            </div>
            <div class="sui-o-datalist__item-details">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliq...
            </div>
        </div>
    </a>
    <a href="#" class="sui-o-datalist__row as--middle">
      ...
    </a>
</div>

Classic

Project name
Last modified
Project lead
atoms/icons/project/project
My über project
Today at 10:32 AM
Julie A
atoms/icons/project/project
Side project
Last monday at 2:30 PM
Connie Reynolds
<div class="sui-o-datalist">
    <div class="sui-o-datalist__header">
        <div class="sui-o-datalist__col as--primary@md as--size-xs as--align-center"></div>
        <div class="sui-o-datalist__col as--primary@md as--grow-2@lg">
            Project name
        </div>
        <div class="sui-o-datalist__col as--secondary@md">
            Last modified
        </div>
        <div class="sui-o-datalist__col as--secondary@md">
            Project lead
        </div>
        <div class="sui-o-datalist__col as--size-md"></div>
    </div>
    <div class="sui-o-datalist__row">
        <div class="sui-o-datalist__col as--primary@md as--size-xs as--align-center as--icon">
            <i class="sui-a-icon">
                ...
            </i>
        </div>
        <a href="#" class="sui-o-datalist__col as--primary@md as--link as--grow-2@lg">
            My über project
        </a>
        <div class="sui-o-datalist__col as--secondary@md" data-label="Last modified">
            <small>Today at 10:32 AM</small>
        </div>
        <a href="#" class="sui-o-datalist__col as--secondary@md as--link" data-label="Project lead">
            <small>Julie A</small>
        </a>
        <div class="sui-o-datalist__col as--size-md as--dimmed">
            <button class="sui-a-button as--contextual as--primary@md as--sm">
                <i class="sui-a-icon as--fa-ellipsis-v as--start"></i> Actions
            </button>
        </div>
    </div>
    <div class="sui-o-datalist__row">
        ...
    </div>
</div>

Bordered

Project name
Last modified
Project lead
atoms/icons/project/project
My über project
Today at 10:32 AM
Julie A
atoms/icons/project/project
Side project
Last monday at 2:30 PM
Connie Reynolds
<div class="sui-o-datalist as--bordered">
    <div class="sui-o-datalist__header">
        <div class="sui-o-datalist__col as--primary@md as--size-xs as--align-center"></div>
        <div class="sui-o-datalist__col as--primary@md as--grow-2@lg">
            Project name
        </div>
        <div class="sui-o-datalist__col as--secondary@md">
            Last modified
        </div>
        <div class="sui-o-datalist__col as--secondary@md">
            Project lead
        </div>
        <div class="sui-o-datalist__col as--size-md"></div>
    </div>
    <div class="sui-o-datalist__row">
        <div class="sui-o-datalist__col as--primary@md as--size-xs as--align-center as--icon">
            <i class="sui-a-icon">
                ...
            </i>
        </div>
        <a href="#" class="sui-o-datalist__col as--primary@md as--link as--grow-2@lg">
            My über project
        </a>
        <div class="sui-o-datalist__col as--secondary@md" data-label="Last modified">
            <small>Today at 10:32 AM</small>
        </div>
        <a href="#" class="sui-o-datalist__col as--secondary@md as--link" data-label="Project lead">
            <small>Julie A</small>
        </a>
        <div class="sui-o-datalist__col as--size-md as--dimmed">
            <button class="sui-a-button as--contextual as--primary@md as--sm">
                <i class="sui-a-icon as--fa-ellipsis-v as--start"></i> Actions
            </button>
        </div>
    </div>
    <div class="sui-o-datalist__row">
        ...
    </div>
</div>

Hover effect

Project name
Last modified
Project lead
atoms/icons/project/project
My über project
Today at 10:32 AM
Julie A
atoms/icons/project/project
Side project
Last monday at 2:30 PM
Connie Reynolds
<div class="sui-o-datalist as--hover">
    <div class="sui-o-datalist__header">
        <div class="sui-o-datalist__col as--primary@md as--size-xs as--align-center"></div>
        <div class="sui-o-datalist__col as--primary@md as--grow-2@lg">
            Project name
        </div>
        <div class="sui-o-datalist__col as--secondary@md">
            Last modified
        </div>
        <div class="sui-o-datalist__col as--secondary@md">
            Project lead
        </div>
        <div class="sui-o-datalist__col as--size-md"></div>
    </div>
    <div class="sui-o-datalist__row">
        <div class="sui-o-datalist__col as--primary@md as--size-xs as--align-center as--icon">
            <i class="sui-a-icon">
                ...
            </i>
        </div>
        <a href="#" class="sui-o-datalist__col as--primary@md as--link as--grow-2@lg">
            My über project
        </a>
        <div class="sui-o-datalist__col as--secondary@md" data-label="Last modified">
            <small>Today at 10:32 AM</small>
        </div>
        <a href="#" class="sui-o-datalist__col as--secondary@md as--link" data-label="Project lead">
            <small>Julie A</small>
        </a>
        <div class="sui-o-datalist__col as--size-md as--dimmed">
            <button class="sui-a-button as--contextual as--primary@md as--sm">
                <i class="sui-a-icon as--fa-ellipsis-v as--start"></i> Actions
            </button>
        </div>
    </div>
    <div class="sui-o-datalist__row">
        ...
    </div>
</div>

Hover effect & Bordered

Project name
Last modified
Project lead
atoms/icons/project/project
My über project
Today at 10:32 AM
Julie A
atoms/icons/project/project
Side project
Last monday at 2:30 PM
Connie Reynolds
<div class="sui-o-datalist as--hover as--bordered">
    <div class="sui-o-datalist__header">
        <div class="sui-o-datalist__col as--primary@md as--size-xs as--align-center"></div>
        <div class="sui-o-datalist__col as--primary@md as--grow-2@lg">
            Project name
        </div>
        <div class="sui-o-datalist__col as--secondary@md">
            Last modified
        </div>
        <div class="sui-o-datalist__col as--secondary@md">
            Project lead
        </div>
        <div class="sui-o-datalist__col as--size-md"></div>
    </div>
    <div class="sui-o-datalist__row">
        <div class="sui-o-datalist__col as--primary@md as--size-xs as--align-center as--icon">
            <i class="sui-a-icon">
                ...
            </i>
        </div>
        <a href="#" class="sui-o-datalist__col as--primary@md as--link as--grow-2@lg">
            My über project
        </a>
        <div class="sui-o-datalist__col as--secondary@md" data-label="Last modified">
            <small>Today at 10:32 AM</small>
        </div>
        <a href="#" class="sui-o-datalist__col as--secondary@md as--link" data-label="Project lead">
            <small>Julie A</small>
        </a>
        <div class="sui-o-datalist__col as--size-md as--dimmed">
            <button class="sui-a-button as--contextual as--primary@md as--sm">
                <i class="sui-a-icon as--fa-ellipsis-v as--start"></i> Actions
            </button>
        </div>
    </div>
    <div class="sui-o-datalist__row">
        ...
    </div>
</div>