Cirrus

#Tiles

Tiles are the flexbox alternative to cards that tile child elements horizontally and more closely resemble horizontal cards in Android. These get displayed in card card--slide-up to show an avatar, text, or buttons.

#Basic

This is a standard tile with buttons located at the bottom of tile__container.

avatar

Robert Downey Jr. shared a post from Stark Industries.

Robert shared: 'Stark Industries is proud to announce its brand new suit.'

23 minutes ago
<div class="tile">
    <div class="tile__icon">
        <figure class="avatar"><img src="https://www.seoclerk.com/pics/319222-1IvI0s1421931178.png"></figure>
    </div>
    <div class="tile__container">
        <p class="tile__title m-0">Robert Downey Jr. shared a post from <b>Stark Industries</b>.</p>
        <p class="tile__subtitle m-0">Robert shared: 'Stark Industries is proud to announce its brand new suit.'</p><span class="info">23 minutes ago</span>
        <div class="tile__buttons m-0">
            <button class="btn-primary btn-small uppercase">View</button>
            <button class="btn-small uppercase">Dismiss</button>
        </div>
    </div>
</div>
Right Side Buttons

To move the buttons to the right of the tile rather than the bottom, move the tile__buttons container outside of tile__container.

avatar

Robert Downey Jr. shared a post from Stark Industries.

Robert shared: 'Stark Industries is proud to announce its brand new suit.'

23 minutes ago
<div class="tile">
    <div class="tile__icon">
        <figure class="avatar"><img src="https://www.seoclerk.com/pics/319222-1IvI0s1421931178.png"></figure>
    </div>
    <div class="tile__container">
        <p class="tile__title m-0">Robert Downey Jr. shared a post from <b>Stark Industries</b>.</p>
        <p class="tile__subtitle m-0">Robert shared: 'Stark Industries is proud to announce its brand new suit.'</p><span class="info">23 minutes ago</span></div>
    <div class="tile__buttons m-0">
        <button class="btn-primary btn-small uppercase">View</button>
        <button class="btn-small uppercase">Dismiss</button>
    </div>
</div>
Text Ellipsis

To prevent text from wrapping, add u-text-no-wrap to the text element.

avatar

Robert Downey Jr. shared a post from Stark Industries.

Robert shared: 'Stark Industries is proud to announce its brand new suit.'

23 minutes ago
<div style="max-width: 350px;">
    <div class="tile">
        <div class="tile__icon">
            <figure class="avatar"><img src="https://www.seoclerk.com/pics/319222-1IvI0s1421931178.png"></figure>
        </div>
        <div class="tile__container">
            <p class="tile__title m-0 u-text-no-wrap">Robert Downey Jr. shared a post from <b>Stark Industries</b>.</p>
            <p class="tile__subtitle m-0">Robert shared: 'Stark Industries is proud to announce its brand new suit.'</p><span class="info">23 minutes ago</span>
            <div class="tile__buttons m-0">
                <button class="btn-primary btn-small uppercase">View</button>
                <button class="btn-small uppercase">Dismiss</button>
            </div>
        </div>
    </div>
</div>
Vertical Centering
Added
0.6.0

To align the items in the middle, use the u-items-center modifier class with the tile class.

avatar

Robert Downey Jr. shared a post from Stark Industries.

Robert shared: 'Stark Industries is proud to announce its brand new suit.'

23 minutes ago

In addition, the u-overflow-hidden utility class could be used on the tile-container to keep the tile height consistent. This prevents wrapping that would normally occur on smaller screens (decrease browser width to see effect).

avatar

Robert Downey Jr. shared a post from Stark Industries.

Robert shared: 'Stark Industries is proud to announce its brand new suit.'

23 minutes ago
<div class="tile u-items-center">
    <div class="tile__icon">
        <figure class="avatar"><img src="https://www.seoclerk.com/pics/319222-1IvI0s1421931178.png"></figure>
    </div>
    <div class="tile__container u-overflow-hidden">
        <p class="tile__title m-0 u-text-no-wrap">Robert Downey Jr. shared a post from <b>Stark Industries</b>.</p>
        <p class="tile__subtitle m-0">Robert shared: 'Stark Industries is proud to announce its brand new suit.'</p><span class="info">23 minutes ago</span></div>
    <div class="tile__buttons m-0">
        <button class="btn-primary btn-small uppercase">View</button>
        <button class="btn-small uppercase">Dismiss</button>
    </div>
</div>

#Examples

Below are a couple of examples to help you get started.

avatar

Robert Downey Jr. just poked you.

Poke him back or view on Facebook.

6 seconds ago
<div class="tile u-items-center mb-3"">
    <div class="tile__icon">
        <figure class="avatar">
            <img src="https://www.seoclerk.com/pics/319222-1IvI0s1421931178.png">
        </figure>
    </div>
    <div class="tile__container">
        <p class="tile__title m-0">Robert Downey Jr. just poked you.</p>
        <p class="tile__subtitle m-0">Poke him back or view on Facebook.</p>
        <span class="info">6 seconds ago</span>
    </div>
    <div class="tile__buttons">
        <button class="btn-transparent p-0"><span class="icon"><i class="fa fa-wrapper small fa-ellipsis-h" aria-hidden="true"></i></span></button>
    </div>
</div>
avatar

Polarity.exe

953KB / 1.1MB - 3 seconds...

<div class="tile u-items-center mb-3">
    <div class="tile__icon">
        <figure class="avatar"><img class="padded" src="..."></figure>
    </div>
    <div class="tile__container">
        <p class="tile__title m-0">Polarity.exe</p>
        <p class="tile__subtitle m-0">953KB / 1.1MB - 3 seconds...</p>
    </div>
    <div class="tile__buttons">
        <button class="btn-transparent p-0"><span class="icon"><i class="fa fa-wrapper small fa-ellipsis-v" aria-hidden="true"></i></span></button>
    </div>
</div>
avatar

Meeting Scheduled

You have a scheduled meeting in 1 hour.

<div class="tile u-items-center mb-3">
    <div class="tile__icon">
        <figure class="avatar"><img class="padded" src="..."></figure>
    </div>
    <div class="tile__container">
        <p class="tile__title m-0">Meeting Scheduled</p>
        <p class="tile__subtitle m-0">You have a scheduled meeting in 1 hour.</p>
    </div>
    <div class="tile__buttons">
        <button class="btn-primary p-0"><span class="icon"><i class="fa fa-wrapper small fa-check" aria-hidden="true"></i></span></button>
        <button class="btn-transparent p-0"><span class="icon"><i class="fa fa-wrapper small fa-times" aria-hidden="true"></i></span></button>
    </div>
</div>

Robert Downey Jr. shared a post from Stark Industries.

Robert shared: 'Stark Industries is proud to announce its brand new suit.'

23 minutes ago
<div class="tile p-1 bg-gray-200 u-round">
    <div class="tile__icon">
        <figure class="avatar"><img src="https://www.seoclerk.com/pics/319222-1IvI0s1421931178.png" /></figure>
    </div>
    <div class="tile__container">
        <p class="tile__title m-0">Robert Downey Jr. shared a post from <b>Stark Industries</b>.</p>
        <p class="tile__subtitle m-0">Robert shared: 'Stark Industries is proud to announce its brand new suit.'</p>
        <span class="info">23 minutes ago</span>
    </div>
    <div class="tile__buttons m-0 u-text-right">
        <div class="list-dropdown dropdown-right">
            <button class="btn-transparent btn-dropdown m-0">
                <i class="icon fad fa-ellipsis-v" aria-hidden="true"></i>
            </button>
            <ul class="menu u-text-left u-absolute">
                <li class="menu-item">
                    <a href="#"><i class="icon fas fa-folder-open" aria-hidden="true"></i> Open</a>
                </li>
                <li class="menu-item">
                    <a href="#"><i class="icon fas fa-check" aria-hidden="true"></i> Mark as read</a>
                </li>
                <li class="menu-item">
                    <a href="#"><i class="icon fas fa-cog" aria-hidden="true"></i> Notification settings</a>
                </li>
            </ul>
        </div>
    </div>
</div>