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 thingsSet-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
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>