Sets

.Set

Sets are collections of other elements like menus. Each element must be wrapped in a Set-item element.

The Set module also contains a few built in descendants that can be used with Set-item:

  • Set-action for clickable things
  • Set-label for text items

Multiple sets are lined-up inline with spacing between.

By default any Set-item within a Set will inherit "skin" properties like background-color, border-radius, color and text-transform from the Set. This means you can use one modifier class for the entire Set and get a uniform look for the Set-items.

Example

Markup

<ul class="Set ">
    <li class="Set-item">
        <a class="Set-action" href="#">Action 1</a>
    </li>
    <li class="Set-item">
        <span class="Set-label">Label</span>
    </li>
    <li class="Set-item">
        <a class="Set-action" href="#">Action 2</a>
    </li>
    <li class="Set-item">
        <a class="Set-action" href="#">Action 3</a>
    </li>
</ul>
<ul class="Set ">
    <li class="Set-item">
        <a class="Set-action" href="#">Action 1</a>
    </li>
    <li class="Set-item">
        <span class="Set-label">Label</span>
    </li>
    <li class="Set-item">
        <a class="Set-action" href="#">Action 2</a>
    </li>
    <li class="Set-item">
        <a class="Set-action" href="#">Action 3</a>
    </li>
</ul>

Action sets

These sets can be used for generic action in different contexts.

Modifiers

Set--actions
A generic action set
Set--bulk
A set with items used for bulk actions
Set--smallActions
A small generic action set

Markup

<ul class="Set [modifier class]">
    <li class="Set-item">
        <a class="Set-action" href="#">Action 1</a>
    </li>
    <li class="Set-item">
        <span class="Set-label">Label</span>
    </li>
    <li class="Set-item">
        <a class="Set-action" href="#">Action 2</a>
    </li>
    <li class="Set-item">
        <a class="Set-action" href="#">Action 3</a>
    </li>
</ul>
<ul class="Set [modifier class]">
    <li class="Set-item">
        <a class="Set-action" href="#">Action 1</a>
    </li>
    <li class="Set-item">
        <span class="Set-label">Label</span>
    </li>
    <li class="Set-item">
        <a class="Set-action" href="#">Action 2</a>
    </li>
    <li class="Set-item">
        <a class="Set-action" href="#">Action 3</a>
    </li>
</ul>

Primary NavBar sets

.Set--apps

This modifier is used for a set that fits within the context of NavBar--apps.

It also defines a special descendant is-active state class to mark the current application.

Example

Markup

<ul class="Set Set--apps">
    <li class="Set-item">
        <a class="Set-action Icon Icon--billing Icon--collapsible" href="#">
            <span class="Icon-label">Billing</span>
        </a>
    </li>
    <li class="Set-item is-active">
        <a class="Set-action Icon Icon--hosting Icon--collapsible" href="#">
            <span class="Icon-label">Web Hosting</span>
        </a>
    </li>
    <li class="Set-item">
        <a class="Set-action Icon Icon--cloud Icon--collapsible" href="#">
            <span class="Icon-label">Cloud</span>
        </a>
    </li>
    <li class="Set-item">
        <a id="UserProfile" class="Set-label Icon Icon--collapsible Icon--customer" href="#">
            <span class="Icon-label">example@atomia.com</span>
        </a>
    </li>
</ul>

Section menus set

.Set--sections

This modifier is used for the set that holds the section menus within the context of NavBar--sections.

This type of set will stack the set items on top of each other when the viewport gets smaller. In the smaller sizes it will also hide the entire set unless the is-opened state class is applied.

Note: Resize the browser window to see it in action.

Example

Markup

<ul class="Set Set--sections is-opened">
    <li class="Set-item">
        <a class="Set-action" href="#">Home</a>
    </li>
    <li class="Set-item">
        <div class="Menu Menu--sections">
            <span class="Menu-button">Email</span>
            <ul class="Menu-list">
                <li><a class="Menu-item" href="#">Email accounts</a></li>
                <li><a class="Menu-item" href="#">Email forwards</a></li>
                <li><a class="Menu-item" href="#">Default email account</a></li>
                <li><a class="Menu-item" href="#">Mailing lists</a></li>
                <li><a class="Menu-item Icon Icon--msexchange" href="#"><span class="Icon-label">Microsoft Exchange</span></a></li>
            </ul>
        </div>
    </li>
    <li class="Set-item">
        <div class="Menu Menu--sections">
            <span class="Menu-button">SMS</span>
            <ul class="Menu-list">
                <li><a class="Menu-item" href="#">SMS central</a></li>
                <li><a class="Menu-item" href="#">Channel manager</a></li>
            </ul>
        </div>
    </li>
</ul>

Section utils set

.Set--utils

This modifier is used for the set that holds the utility icons within the context of NavBar--sections.

Example

Markup

<ul class="Set Set--utils">
    <li class="Set-item Set-item--meters">
        <a id="Meters" class="Set-action Icon Icon--gauge Icon--large Icon--standalone" title="Meters">
            <span class="Icon-label">Meters</span>
        </a>
    </li>
    <li class="Set-item Set-item--search">
        <form class="Set-action SearchBox" action="global_search_results.html" title="Search domain name">
            <p class="SearchBox-wrapper">
                <input class="SearchBox-input" type="text" placeholder="Search domain" />
                <button class="SearchBox-submit Icon Icon--search"></button>
            </p>
        </form>
    </li>
</ul>