Tiles



                <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-set

Image title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Image container
fitImage
Carousel
selected
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
slide-up
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
slide-up
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
slide-up-2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
slide-down
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
slide-down
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
slide-down-2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
slide-down-2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
slide-left
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
slide-left
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
slide-left-2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
slide-right
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
slide-right
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
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>