Tiles
@@adsense
<div class="tile" data-role="tile">...</div>
Tile sizes
This table represent original sizes for tiles from Windows Style Guide.
| Class | Size (px) |
| .tile-small | 70x70 |
| .tile or .tile-square | 150x150 |
| .tile-wide | 310x150 |
| .tile-large | 310x310 |
Size modification classes
| Class | Size (px) |
| .tile-small-x | width 70 |
| .tile-small-y | height 70 |
| .tile-square-x | width 150 |
| .tile-square-y | height 150 |
| .tile-wide-x | width 310 |
| .tile-wide-y | height 310 |
Extra tiles and extra modifications
| Class | Size (px) |
| .tile-big | 470x470 |
| .tile-super | 630x630 |
| .tile-big-x | width 470 |
| .tile-big-y | height 470 |
| .tile-super-x | width 470 |
| .tile-super-y | height 470 |
Tile content
All tile content can be placed in container with class tile-content.
Visualisation patterns
5
Mail
Cloud service
Image container
fitImage
Carousel
selected
slide-up
slide-up
slide-up-2
slide-down
slide-down
slide-down-2
slide-down-2
slide-left
slide-left
slide-left-2
slide-right
slide-right
slide-right-2
Zooming
Zooming out
effect: slideLeft
effect: slideRight
effect: slideLeftRight
effect: slideUp
effect: slideDown
effect: slideUpDown
HTML examples
<!-- Tile with icon, icon can be font icon or image -->
<div class="tile">
<div class="tile-content iconic">
<icon/>
</div>
</div>
<!-- Tile with label and badge -->
<div class="tile">
<div class="tile-content">
<span class="tile-label">Label</span>
<span class="tile-badge">5</span>
</div>
</div>
<!-- Tile with image set (max 5 images) -->
<div class="tile">
<div class="tile-content image-set">
<img src="...">
<img src="...">
<img src="...">
<img src="...">
<img src="...">
</div>
</div>
<!-- Tile with image container -->
<div class="tile">
<div class="tile-content">
<div class="image-container">
<div class="frame">
<img src="...">
</div>
<div class="image-overlay">
Overlay text
</div>
</div>
</div>
</div>
<!-- Tile with image use fitImage plugin -->
<div class="tile">
<div class="tile-content">
<img src="..." data-role="fitImage" data-format="square">
</div>
</div>
<!-- Tile with carousel -->
<div class="tile">
<div class="tile-content">
<div class="carousel" data-role="carousel">
<div class="slide"><img src="..."></div>
...
<div class="slide"><img src="..."></div>
</div>
</div>
</div>
<!-- Selected Tile -->
<div class="tile element-selected">
...
</div>
<!-- Tile with slide-up effect -->
<div class="tile">
<div class="tile-content slide-up">
<div class="slide">
... Main slide content ...
</div>
<div class="slide-over">
... Over slide content here ...
</div>
</div>
</div>
<!-- Tile with slide-down effect -->
<div class="tile">
<div class="tile-content slide-down">
<div class="slide">
... Main slide content ...
</div>
<div class="slide-over">
... Over slide content here ...
</div>
</div>
</div>
<!-- Tile with slide-left effect -->
<div class="tile">
<div class="tile-content slide-left">
<div class="slide">
... Main slide content ...
</div>
<div class="slide-over">
... Over slide content here ...
</div>
</div>
</div>
<!-- Tile with slide-right effect -->
<div class="tile">
<div class="tile-content slide-right">
<div class="slide">
... Main slide content ...
</div>
<div class="slide-over">
... Over slide content here ...
</div>
</div>
</div>
<!-- Tile with zooming -->
<div class="tile">
<div class="tile-content zooming">
<div class="slide">
... Slide content here ...
</div>
</div>
</div>
<!-- Tile with zooming out -->
<div class="tile">
<div class="tile-content zooming-out">
<div class="slide">
... Slide content here ...
</div>
</div>
</div>
<!-- Live Tile -->
<div class="tile-wide" data-role="tile" data-effect="slideUpDown">
<div class="tile-content">
<div class="live-slide">...slide content...</div>
...
<div class="live-slide">...slide content...</div>
</div>
</div>