metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="The most popular HTML, CSS, and JS library in Metro style."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Tiles - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Tiles</a></li> <li class="toc-entry"><a href="#_tiles_about">About</a></li> <li class="toc-entry"><a href="#_tiles_sizes">Sizes</a></li> <li class="toc-entry"><a href="#_tiles_icon">Icon & Branding bar</a></li> <li class="toc-entry"><a href="#_tiles_badges">Badges</a></li> <li class="toc-entry"><a href="#_tiles_color">Colors</a></li> <li class="toc-entry"><a href="#_tiles_selected">Selected tile</a></li> <li class="toc-entry"><a href="#_tiles_cover">Cover</a></li> <li class="toc-entry"><a href="#_tiles_effects">Tiles effects</a></li> <li class="toc-entry"><a href="#_tiles_grid">Grid for tiles</a></li> <li class="toc-entry"><a href="#_tiles_position">Tiles position</a></li> <li class="toc-entry"><a href="#_tiles_groups">Tiles groups</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Tiles</h1> <p class="text-leader"> Metro 4 present classes for creating tiles such as tiles in Windows 8/10. </p>  <h3 id="_tiles_about">About</h3> <p> Metro 4 contains classes to create tiles such as application tiles in Windows 8/10. To create tile you can add role <code>tile</code> to element with attribute <code>data-role</code>. </p> <p class="remark alert d-none d-block-ie"> <strong>Important!</strong> Tiles work with <code>grid layout</code> css feature. But IE11 supports it in old format. Old format for grid layout not supported in Metro 4. For IE11 in Metro 4 present fallback into floated blocks. </p> <div class="example"> <div class="tiles-grid"> <div data-role="tile" data-size="small"></div> <div data-role="tile" data-size="small"></div> <div data-role="tile" data-size="small" style="grid-column-start: 1; grid-row: 2"></div> <div data-role="tile" data-size="small" style="grid-column-start: 2; grid-row: 2"></div> <div data-role="tile" data-size="medium"></div> <div data-role="tile" data-size="wide"></div> </div> </div> <pre><code class="html"> <div data-role="tile"></div> </code></pre> <h3 id="_tiles_sizes">Tile sizes</h3> <p> You can use <code>four</code> sizes for your tiles: <code>small</code>, <code>medium</code>, <code>wide</code> and <code>large</code>. To set tile size use attribute <code>data-size</code>. </p> <div class="example"> <div class="tiles-grid"> <div data-role="tile" data-size="small"></div> <div data-role="tile" data-size="medium"></div> <div data-role="tile" data-size="wide"></div> <div data-role="tile" data-size="large"></div> </div> </div> <pre><code class="html"> <div data-role="tile" data-size="small"></div> <div data-role="tile" data-size="medium"></div> <div data-role="tile" data-size="wide"></div> <div data-role="tile" data-size="large"></div> </code></pre> <h3 id="_tiles_icon">Tile icon & branding bar</h3> <p> The tile can have icon for the identification of target process. To create <code>icon</code> you can add element with class <code>.icon</code> inside a tile with <code>image</code>. Also you can use icon from font as tile icon. </p> <div class="example"> <div class="tiles-grid"> <div data-size="small" data-role="tile"><img src="images/github.png" class="icon"></div> <div data-size="medium" data-role="tile"><img src="images/github.png" class="icon"></div> <div data-size="wide" data-role="tile"><img src="images/github.png" class="icon"></div> <div data-size="large" data-role="tile"><span class="mif-github icon"></span></div> </div> </div> <pre><code class="html"> <div data-size="small" data-role="tile"><img src="images/github.png" class="icon"></div> <div data-size="medium" data-role="tile"><img src="images/github.png" class="icon"></div> <div data-size="wide" data-role="tile"><img src="images/github.png" class="icon"></div> <div data-size="large" data-role="tile"><span class="mif-github icon"></span></div> </code></pre> <p> To create <code>branding bar</code>, you must add element with class <code>.branding-bar</code> inside a tile. </p> <div class="example"> <div class="tiles-grid"> <div data-role="tile"> <span class="branding-bar">Branding bar</span> </div> <div data-role="tile" data-size="wide"> <span class="branding-bar">Branding bar</span> </div> </div> </div> <pre><code class="html"> <div data-role="tile"> <span class="branding-bar">Branding bar</span> </div> </code></pre> <p> You can combine <code>icon</code> and <code>branding bar</code> in one tile. </p> <div class="example"> <div class="tiles-grid"> <div data-role="tile"> <span class="mif-facebook icon"></span> <span class="branding-bar">Facebook</span> </div> <div data-role="tile" data-size="wide"> <span class="mif-cart icon"></span> <span class="branding-bar">Store</span> </div> </div> </div> <pre><code class="html"> <div data-role="tile"> <span class="branding-bar">Branding bar</span> </div> </code></pre>  <h3 id="_tiles_badges">Badges</h3> <p> The tile can have two types od <code>badges</code>. Top badge and bottom badge. To create <code>badge</code>, you must add element with class <code>.badge-top</code> or <code>.badge-bottom</code> inside a tile. </p> <div class="example"> <div class="tiles-grid"> <div data-role="tile" class="bg-red"> <span class="badge-top">10</span> </div> <div data-role="tile" class="bg-green"> <span class="badge-bottom">10</span> </div> <div data-role="tile"> <span class="mif-facebook icon"></span> <span class="branding-bar">Facebook</span> <span class="badge-bottom">10</span> </div> <div data-role="tile" class="bg-pink"> <span class="mif-cart icon"></span> <span class="branding-bar">Store</span> <span class="badge-top">10</span> </div> </div> </div> <pre><code class="html"> <div data-role="tile"> <span class="badge-top">10</span> </div> <div data-role="tile"> <span class="badge-bottom">10</span> </div> </code></pre> <h3 id="_tiles_color">Colors</h3> <p> You can change tile color with color classes or inline css style. </p> <div class="example"> <div class="tiles-grid"> <div data-role="tile" data-size="small" class="bg-red"></div> <div data-role="tile" data-size="small" class="bg-amber"></div> <div data-role="tile" data-size="small" class="bg-green" style="grid-column-start: 1; grid-row: 2"></div> <div data-role="tile" data-size="small" class="bg-pink" style="grid-column-start: 2; grid-row: 2"></div> <div data-role="tile" data-size="medium" class="bg-orange"></div> <div data-role="tile" data-size="wide" style="background-color: #4a00b3"></div> </div> </div> <pre><code class="html"> <div data-role="tile" data-size="small" class="bg-red"></div> <div data-role="tile" data-size="wide" style="background-color: #4a00b3"></div> </code></pre> <h3 id="_tiles_selected">Selected tile</h3> <p> If you add class <code>.selected</code> to tile, you can make tile as <code>selected</code>. </p> <div class="example"> <div class="tiles-grid d-flex flex-justify-center flex-no-shrink flex-wrap"> <div data-role="tile" class="bg-green selected"> <span class="icon mif-apps"></span> <span class="branding-bar">Applications</span> </div> </div> </div> <pre><code class="html"> <div data-role="tile" class="bg-green selected"> <span class="icon mif-apps"></span> <span class="branding-bar">Applications</span> </div> </code></pre> <h3 id="_tiles_cover">Cover for tile</h3> <p> You can create tile with cover image. To create it add attribute <code>data-cover</code> to tile. </p> <div class="example"> <div class="tiles-grid"> <div data-role="tile" data-size="large" data-cover="images/me.jpg"> <span class="branding-bar">Sergey Pimenov</span> </div> <div data-role="tile" data-cover="images/me_civil.jpg"> <span class="branding-bar">Author</span> </div> </div> </div> <pre><code class="html"> <div data-role="tile" data-size="large" data-cover="images/me.jpg"> <span class="branding-bar">Sergey Pimenov</span> </div> <div data-role="tile" data-cover="images/me_civil.jpg"> <span class="branding-bar">Author</span> </div> </code></pre> <p> In additional, you can create covered slides with attribute <code>data-cover</code> for slides see below. </p> <h3 id="_tiles_effects">Tiles effects</h3> <p> You can add any affects to tiles. This is can be <code>hover affects</code> and <code>live effects</code>. To set effect, use attribute <code>data-effect</code> and create required <code>slides</code>. You can use next effects: </p> <h4>Hover effect</h4> <p> To set hover effect use next values for <code>data-effect</code> attribute: <code>hover-slide-up</code>, <code>hover-slide-down</code>, <code>hover-slide-left</code>, <code>hover-slide-right</code>, <code>hover-zoom-up</code>, <code>hover-zoom-down</code>, <code>hover-zoom-left</code> and <code>hover-zoom-right</code>. Also you must create <code>two</code> slides with classes: <code>.slide-front</code> and <code>.slide-back</code> </p> <pre><code class="html"> <div data-role="tile" data-effect="..."> <div class="slide-front">...</div> <div class="slide-back">...</div> </div> </code></pre> <div class="example"> <div class="tiles-grid"> <div data-role="tile" data-size="medium" data-effect="hover-slide-up"> <div class="slide-front"> <img src="images/pumba-bg.jpg" class="h-100 w-100"> </div> <div class="slide-back d-flex flex-justify-center flex-align-center p-4 op-red"> <p class="text-center"> Tumultumque de brevis historia, aperto heuretes! </p> </div> <span class="branding-bar fg-dark">hover-slide-up</span> </div> <div data-role="tile" data-size="medium" data-effect="hover-slide-down"> <div class="slide-front"> <img src="images/pumba-bg.jpg" class="h-100 w-100"> </div> <div class="slide-back d-flex flex-justify-center flex-align-center p-4 op-cyan"> <p class="text-center"> Tumultumque de brevis historia, aperto heuretes! </p> </div> <span class="branding-bar fg-dark">hover-slide-down</span> </div> <div data-role="tile" data-size="medium" data-effect="hover-slide-left"> <div class="slide-front"> <img src="images/pumba-bg.jpg" class="h-100 w-100"> </div> <div class="slide-back d-flex flex-justify-center flex-align-center p-4 op-green"> <p class="text-center"> Tumultumque de brevis historia, aperto heuretes! </p> </div> <span class="branding-bar fg-dark">hover-slide-left</span> </div> <div data-role="tile" data-size="medium" data-effect="hover-slide-right"> <div class="slide-front"> <img src="images/pumba-bg.jpg" class="h-100 w-100"> </div> <div class="slide-back d-flex flex-justify-center flex-align-center p-4 op-brown"> <p class="text-center"> Tumultumque de brevis historia, aperto heuretes! </p> </div> <span class="branding-bar fg-dark">hover-slide-right</span> </div> <div data-role="tile" data-size="medium" data-effect="hover-zoom-up"> <div class="slide-front"> <img src="images/pumba-bg.jpg" class="h-100 w-100"> </div> <div class="slide-back d-flex flex-justify-center flex-align-center p-4 op-pink"> <p class="text-center"> Tumultumque de brevis historia, aperto heuretes! </p> </div> <span class="branding-bar fg-dark">hover-zoom-up</span> </div> <div data-role="tile" data-size="medium" data-effect="hover-zoom-down"> <div class="slide-front"> <img src="images/pumba-bg.jpg" class="h-100 w-100"> </div> <div class="slide-back d-flex flex-justify-center flex-align-center p-4 op-teal"> <p class="text-center"> Tumultumque de brevis historia, aperto heuretes! </p> </div> <span class="branding-bar fg-dark">hover-zoom-down</span> </div> <div data-role="tile" data-size="medium" data-effect="hover-zoom-left"> <div class="slide-front"> <img src="images/pumba-bg.jpg" class="h-100 w-100"> </div> <div class="slide-back d-flex flex-justify-center flex-align-center p-4 op-steel"> <p class="text-center"> Tumultumque de brevis historia, aperto heuretes! </p> </div> <span class="branding-bar fg-dark">hover-zoom-left</span> </div> <div data-role="tile" data-size="medium" data-effect="hover-zoom-right"> <div class="slide-front"> <img src="images/pumba-bg.jpg" class="h-100 w-100"> </div> <div class="slide-back d-flex flex-justify-center flex-align-center p-4 op-mauve"> <p class="text-center"> Tumultumque de brevis historia, aperto heuretes! </p> </div> <span class="branding-bar fg-dark">hover-zoom-right</span> </div> </div> </div> <pre><code class="html"> <div data-role="tile" data-size="medium" data-effect="hover-zoom-right"> <div class="slide-front"> <img src="images/pumba-bg.jpg" class="h-100 w-100"> </div> <div class="slide-back d-flex flex-justify-center flex-align-center p-4 op-mauve"> <p class="text-center"> Bubos mori in moscua! Tumultumque de brevis historia, aperto heuretes! </p> </div> <span class="branding-bar fg-dark">hover-zoom-right</span> </div> </code></pre> <h4>Live tiles</h4> <p> Metro 4 contains a number of effects for tiles who transform tile to live tile. Add attribute <code>data-effect</code> with values: <code>animate-slide-up</code>, <code>animate-slide-down</code>, <code>animate-slide-left</code>, <code>animate-slide-right</code> and <code>animate-fade</code>. </p> <div class="example"> <div class="tiles-grid"> <div data-role="tile" data-effect="animate-slide-up"> <div class="slide"><h1 class="pos-absolute pos-center">1</h1></div> <div class="slide"><h1 class="pos-absolute pos-center">2</h1></div> <div class="slide"><h1 class="pos-absolute pos-center">3</h1></div> <div class="slide"><h1 class="pos-absolute pos-center">4</h1></div> <div class="slide"><h1 class="pos-absolute pos-center">5</h1></div> </div> <div data-role="tile" data-effect="animate-slide-down"> <div class="slide"><h1 class="pos-absolute pos-center">1</h1></div> <div class="slide"><h1 class="pos-absolute pos-center">2</h1></div> <div class="slide"><h1 class="pos-absolute pos-center">3</h1></div> <div class="slide"><h1 class="pos-absolute pos-center">4</h1></div> <div class="slide"><h1 class="pos-absolute pos-center">5</h1></div> </div> <div data-role="tile" data-effect="animate-slide-left"> <div class="slide"><h1 class="pos-absolute pos-center">1</h1></div> <div class="slide"><h1 class="pos-absolute pos-center">2</h1></div> <div class="slide"><h1 class="pos-absolute pos-center">3</h1></div> <div class="slide"><h1 class="pos-absolute pos-center">4</h1></div> <div class="slide"><h1 class="pos-absolute pos-center">5</h1></div> </div> <div data-role="tile" data-effect="animate-slide-right"> <div class="slide"><h1 class="pos-absolute pos-center">1</h1></div> <div class="slide"><h1 class="pos-absolute pos-center">2</h1></div> <div class="slide"><h1 class="pos-absolute pos-center">3</h1></div> <div class="slide"><h1 class="pos-absolute pos-center">4</h1></div> <div class="slide"><h1 class="pos-absolute pos-center">5</h1></div> </div> <div data-role="tile" data-effect="animate-fade"> <div class="slide"><h1 class="pos-absolute pos-center">1</h1></div> <div class="slide"><h1 class="pos-absolute pos-center">2</h1></div> <div class="slide"><h1 class="pos-absolute pos-center">3</h1></div> <div class="slide"><h1 class="pos-absolute pos-center">4</h1></div> <div class="slide"><h1 class="pos-absolute pos-center">5</h1></div> </div> </div> </div> <pre><code class="html"> <div data-role="tile" data-effect="animate-slide-up"> <div class="slide"><h1 class="pos-absolute pos-center">1</h1></div> <div class="slide"><h1 class="pos-absolute pos-center">2</h1></div> <div class="slide"><h1 class="pos-absolute pos-center">3</h1></div> <div class="slide"><h1 class="pos-absolute pos-center">4</h1></div> <div class="slide"><h1 class="pos-absolute pos-center">5</h1></div> </div> </code></pre> <p> Also, you can use live tile with <code>image set</code> effect. To create this tile, add attribute <code>data-effect="image-set"</code> and add images inside tile. </p> <div class="example"> <div class="tiles-grid"> <div data-role="tile" data-size="wide" data-effect="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> </div> <pre><code class="html"> <div data-role="tile" data-size="wide" data-effect="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> </code></pre>  <h3 id="_tiles_grid">Tiles grid</h3> <p> To collect tiles in group Metro 4 contains special class <code>.tiles-grid</code>. This class create <code>css grid layout</code> for tiles with special cell sizes. </p> <pre><code class="html"> <div class="tiles-grid"> ... </div> </code></pre> <p> With <code>tiles grid</code> you can easy place tiles as you wish. The grid is divided into cells of size <code>70x70</code> with an interval of <code>10</code> px without limitation to height or width. You can limit the size of the grid with subclasses <code>.size-*</code> from <code>1</code> to <code>10</code>. One size is equivalent of small tile. Sizes include gap. </p> <div class="example"> <div class="tiles-grid"> <div data-role="tile" data-size="small"></div> <div data-role="tile" data-size="small"></div> <div data-role="tile" data-size="small" class="col-1 row-2"></div> <div data-role="tile" data-size="small" class="col-2 row-2"></div> <div data-role="tile" data-size="medium"></div> <div data-role="tile" data-size="wide"></div> <div data-role="tile" data-size="large"></div> <div data-role="tile" data-size="medium"></div> <div data-role="tile" data-size="medium"></div> <div data-role="tile" data-size="wide"></div> </div> </div> <h3 id="_tiles_position">Tiles position in grid</h3> <p> You can place a tile to a specified position in grid with special classes <code>.col-*</code> and <code>.row-*</code>. This classes defined from <code>1</code> to <code>12</code> and allow you to place the tile in the specified column and row. </p> <pre><code class="html"> <div class="tiles-grid"> <div data-role="tile" data-size="small"></div> <div data-role="tile" data-size="small"></div> <div data-role="tile" data-size="small" class="col-1 row-2"></div> <div data-role="tile" data-size="small" class="col-2 row-2"></div> <div data-role="tile" data-size="medium"></div> <div data-role="tile" data-size="wide"></div> <div data-role="tile" data-size="large"></div> <div data-role="tile" data-size="medium"></div> <div data-role="tile" data-size="medium"></div> <div data-role="tile" data-size="wide"></div> </div> </code></pre> <h3 id="_tiles_groups">Tiles groups</h3> <p> To grouping tiles you can use special class <code>.tiles-group</code>. To set group fixed size, add one of classes: <code>.size-half</code>, <code>.size-1</code>, <code>.size-2</code>, <code>.size-3</code>, <code>.size-4</code>, <code>.size-5</code>, <code>.size-6</code>, <code>.size-7</code>, <code>.size-8</code>, <code>.size-9</code>, <code>.size-10</code>. </p> <p> Also, you can use media breakpoints for change size. To get it, use classes: <code>.size-{media}-half</code>, <code>.size-{media}-1</code>, <code>.size-{media}-2</code>, <code>.size-{media}-3</code>, <code>.size-{media}-4</code>, <code>.size-{media}-5</code>, <code>.size-{media}-6</code>, <code>.size-{media}-7</code>, <code>.size-{media}-8</code>, <code>.size-{media}-9</code>, <code>.size-{media}-10</code>. Where <code>{media}</code> is a breakpoint: <code>fs</code>, <code>sm</code>, <code>md</code>, <code>ld</code>, <code>xl</code>, <code>xxl</code>. </p> <div class="example clear"> <div class="tiles-grid tiles-group size-2 fg-white ml-0 mt-10 fg-dark" data-group-title="General"> <a href="https://github.com/olton/Metro-UI-CSS" data-role="tile" class="bg-indigo fg-white"> <span class="mif-github icon"></span> <span class="branding-bar">Github</span> <span class="badge-bottom">30</span> </a> <div data-role="tile" class="bg-cyan fg-white"> <span class="mif-envelop icon"></span> <span class="branding-bar">Email</span> <span class="badge-bottom">10</span> </div> <div data-role="tile" class="bg-orange fg-white" data-size="wide"> <span class="mif-chrome icon"></span> <span class="branding-bar">Chrome</span> </div> <div data-role="tile" data-size="small"> <span class="mif-apple icon"></span> </div> <div data-role="tile" data-size="small" class="bg-red fg-white"> <span class="mif-bell icon"></span> </div> <div data-role="tile" data-size="small" class="bg-teal fg-white col-1 row-6"> <span class="mif-windows icon"></span> </div> <div data-role="tile" data-size="small" class="bg-brown fg-white col-2 row-6"> <span class="mif-wind icon"></span> </div> <div data-role="tile" class="bg-cyan fg-white"> <span class="mif-table icon"></span> <span class="branding-bar">Tables</span> </div> </div> </div> <pre><code class="html"> <div class="tiles-grid tiles-group size-2" data-group-title="General"> <a href="https://github.com/olton/Metro-UI-CSS" data-role="tile" class="bg-indigo"> <span class="mif-github icon"></span> <span class="branding-bar">Github</span> <span class="badge-bottom">30</span> </a> <div data-role="tile" class="bg-cyan"> <span class="mif-envelop icon"></span> <span class="branding-bar">Email</span> <span class="badge-bottom">10</span> </div> <div data-role="tile" class="bg-orange" data-size="wide"> <span class="mif-chrome icon"></span> <span class="branding-bar">Chrome</span> </div> <div data-role="tile" data-size="small"> <span class="mif-apple icon"></span> </div> <div data-role="tile" data-size="small" class="bg-red"> <span class="mif-bell icon"></span> </div> <div data-role="tile" data-size="small" class="bg-teal col-1 row-6"> <span class="mif-windows icon"></span> </div> <div data-role="tile" data-size="small" class="bg-brown col-2 row-6"> <span class="mif-wind icon"></span> </div> <div data-role="tile" class="bg-cyan"> <span class="mif-table icon"></span> <span class="branding-bar">Tables</span> </div> </div> </code></pre> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script>    </body> </html>