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

Hello

This is a tray.

  • Tray item
  • Another tray item

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

Hello

This is a tray.

Content

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

Some actions

Content

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>