Trays
.Tray
Trays can be used for information or actions that should not be shown all the time.
Trays will stack below their previous sibling. They are closed by default and require JavaScript like the jQuery slide
functions to open.
By default they will push down any content below when they open.
You can use the descendant Tray-list
with Tray-link
for placing a list of actions in the tray.
The Tray-list--horiz
modifier makes the tray list horizontal instead of vertical.
You can of course also fill the tray with any other content you want.
Example
Content
Markup
<!-- Sibling that the Tray stacks under --> <div style="background-color: #C90062;padding: 0 1rem;"> <button id="TrayExample1Trigger" class="Btn">Toggle the tray</button> </div> <!-- The actual Tray --> <div id="TrayExample1" class="Tray"> <h3 class="Tray-title">Hello</h3> <p>This is a tray.</p> <div> <ul class="Tray-list"> <li> <a class="Tray-link Icon Icon--large Icon--search" href="javascript:void(0);"> <span class="Icon-label">Tray link</span> </a> </li> <li> <a class="Tray-link Icon Icon--large Icon--email2" href="javascript:void(0);"> <span class="Icon-label">Tray link 2</span> </a> </li> </ul> <ul class="Tray-list u-right"> <li> <a class="Tray-link Icon Icon--large Icon--search" href="javascript:void(0);"> <span class="Icon-label">Tray link</span> </a> </li> <li> <a class="Tray-link Icon Icon--large Icon--email2" href="javascript:void(0);"> <span class="Icon-label">Tray link 2</span> </a> </li> </ul> </div> <div> <ul class="Tray-list Tray-list--horiz"> <li> <span class="Btn">Tray item</span> </li> <li> <span class="Btn">Another tray item</span> </li> </ul> </div> </div> <!-- Content that the tray pushes down. --> <h2>Content</h2>
Trays covering content
.Tray--cover
You can use the Tray--cover
modifier to make the tray cover any content below instead of pushing it down.
The covering tray will also take up 100% width of its closest positioned parent.
Example
Markup
<!-- Sibling that the Tray stacks under --> <div class="NavBar" style="background-color: #C90062;"> <button id="TrayExample2Trigger" class="Btn u-left">Toggle the tray</button> </div> <!-- The actual Tray --> <div id="TrayExample2" class="Tray Tray--cover"> <h3 class="Tray-title">Hello</h3> <p>This is a tray.</p> <div> <ul class="Tray-list"> <li> <a class="Tray-link Icon Icon--large Icon--search" href="javascript:void(0);"> <span class="Icon-label">Tray link</span> </a> </li> <li> <a class="Tray-link Icon Icon--large Icon--email2" href="javascript:void(0);"> <span class="Icon-label">Tray link 2</span> </a> </li> </ul> </div> </div> <!-- Content that the tray covers. --> <h2>Content</h2>
Action tray
.Tray--actions
A right-aligned tray styled to be a good fit for an action menu, like clicking the profile link in the primary navigation bar.
Example
Markup
<!-- Sibling that the Tray stacks under --> <div class="NavBar" style="background-color: #C90062;"> <button id="TrayExample3Trigger" class="Btn u-left">Toggle the tray</button> </div> <!-- The actual Tray --> <div id="TrayExample3" class="Tray Tray--actions"> <h3 class="Tray-title">Some actions</h3> <div> <ul class="Tray-list"> <li> <a class="Tray-link Icon Icon--large Icon--search" href="javascript:void(0);"> <span class="Icon-label">Tray link</span> </a> </li> <li> <a class="Tray-link Icon Icon--large Icon--email2" href="javascript:void(0);"> <span class="Icon-label">Tray link 2</span> </a> </li> </ul> </div> </div> <!-- Content that the tray pushes down. --> <h2>Content</h2>
Action tray
.Tray--info
A left-aligned tray styled to be a good fit for showing information, like the meters in the secondary navigation bar.
Example
Hello
Some informational text.
- A meter 10
- Another meter 20
- Informational item.
- Informational item.
Content
Markup
<!-- Sibling that the Tray stacks under --> <div class="NavBar" style="background-color: #C90062;"> <button id="TrayExample4Trigger" class="Btn u-left">Toggle the tray</button> </div> <!-- The actual Tray --> <div id="TrayExample4" class="Tray Tray--info"> <h3 class="Tray-title">Hello</h3> <p>Some informational text.</p> <ul class="Tray-list Tray-list--horiz"> <li> <span class="Meter"> <strong class="Meter-label">A meter</strong> <span class="Meter-value">10</span> </span> </li> <li> <span class="Meter"> <strong class="Meter-label">Another meter</strong> <span class="Meter-value">20</span> </span> </li> </ul> <ul class="Tray-list Tray-list--horiz"> <li> Informational item. </li> <li> Informational item. </li> </ul> </div> <!-- Content that the tray pushes down. --> <h2>Content</h2>