Tilecomponent

General info

Tiles are the representation of your app or sub module. The content shown on your tile can, and ideally should, change regularly, especially if your tile can communicate new, real-time information to your user. Tiles can show a combination of text and images, and a badge to show status. Tile is a block object and can be placed in any container (see the Start-Screen demonstration).

<div class="tile"></div>
<div class="tile double"></div>
<div class="tile selected"></div>

Tile sizes

Metro UI 4 Jekyll supports these tiles sizes with build-in tile subclasses: half, double, triple and quadro.

<div class="tile half"></div>
<div class="tile"></div>
<div class="tile double"></div>
<div class="tile triple"></div>
<div class="tile quadro"></div>

To change vertical size use these sub classes: double-vertical, triple-vertical and quadro-vertical.

<div class="tile double-vertical"></div>
<div class="tile triple-vertical"></div>
<div class="tile quadro-vertical"></div>

Tile Badges

A badge can display either a number from 1-99 or a status glyph. Badge is positioned in tile status container on the bottom right corner. Metro UI 4 Jekyll supports main Windows 8 badges: activity, alert, available, away, busy, newMessage, paused, playing, unavailable, error and attention. Badge background color can be changed with built-in classes bg-*.

<div class="tile bg-cyan">
    <div class="brand">
        <div class="badge">99</div>
    </div>
</div>

<div class="tile bg-cyan">
    <div class="brand">
        <div class="badge activity"></div>
    </div>
</div>

You can create a custom bage with <i class="icon-*">

<div class="tile bg-cyan">
    <div class="brand">
        <div class="badge"><i class="icon-rocket"></i></div>
    </div>
</div>
<div class="tile bg-darkRed">
    <div class="brand">
        <div class="badge bg-red"><i class="icon-broadcast"></i></div>
    </div>
</div>

Tile status (brand)

Status provides additional information for tiles. This may be: name, label, text or badge. Tile status container can be created with tile-status or brand classes.

<div class="tile bg-darkPink">
    <div class="tile-content icon">
        <i class="icon-cart-2"></i>
    </div>
    <div class="tile-status">
        <span class="name">Store</span>
    </div>
</div>

<div class="tile double bg-amber">
    <div class="tile-content icon">
        <i class="icon-play-alt"></i>
    </div>
    <div class="brand bg-black">
        <span class="label fg-white">Player</span>
        <div class="badge bg-darkRed paused"></div>
    </div>
</div>

<div class="tile">
    <div class="tile-content image">
        <img src="images/author.jpg">
    </div>
    <div class="brand">
        <span class="label fg-white">Images</span>
        <span class="badge bg-orange">12</span>
    </div>
</div>

<div class="tile double">
    <div class="tile-content image">
        <img src="images/4.jpg">
    </div>
    <div class="brand bg-dark opacity">
        <span class="text">
            This is a desert eagle. He is very hungry and angry bird.
        </span>
    </div>
</div>

Tile content

Tile content can be placed in sub container with class .tile-content. Tiles content can be organized with built-in subclasses: icon, image, image-set.

<div class="tile bg-cyan">
    <div class="tile-content icon">
        <i class="icon-rocket"></i>
    </div>
</div>

<div class="tile bg-green">
    <div class="tile-content icon">
        <img src="images/excel2013icon.png">
    </div>
</div>

<div class="tile double">
    <div class="tile-content image">
        <img src="images/1.jpg">
    </div>
</div>

<div class="tile double">
    <div class="tile-content image-set">
        <img src="images/1.jpg">
        <img src="images/2.jpg">
        <img src="images/3.jpg">
        <img src="images/4.jpg">
        <img src="images/5.jpg">
    </div>
</div>

Live Tile

You can set transition effect with data-effect attribute.

<div class="tile live" data-role="live-tile" data-effect="...">
    <div class="tile-content">...</div>
    <div class="tile-content">...</div>
</div>

To change easing effect you can use any jquery easing plugins (example: jQuery Easing Plugin) or create you own function and set attribute data-easing to tile with the name of easing.

<div class="tile live" data-role="live-tile" data-effect="..." data-easing="...">
    <div class="tile-content">...</div>
    <div class="tile-content">...</div>
</div>

Tile click transform

You can set effect with data-click="transform" attribute.

<div class="tile" data-click="transform">...</div>