Tiles
Tiles are simple elements that provide a visual element with limited textual content. They are almost always used to provide a clickable experience to navigate to another page or resource.
NOTE: Tiles must contain thumbnail images and at least a brief label. If no image is available, or if the tile would contain a large amount of text, it is recommended to use a Card instead.
Example Source
<div class="m-tile">
    <div class="m-tile__thumbnail">
        <img alt="This is alternative text for the thumbnail" src="/img/img-404.png">
    </div>
    <div class="m-tile__body">
        <div class="m-tile__heading">Tile Label</div>
        <div class="m-tile-desc">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua.
        </div>
    </div>
</div>
Standard Tiles
This is an example of a standard tile, which has square dimensions and displays a label and a description.
ALT
Tile Label
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
4×3 Tiles
This is an example of a 4×3 tile, which restricts its thumbnail to a 4×3 aspect ratio. Add the .m-tile--4x3 class to the tile’s root element.
ALT
Tile Label
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
16×9 Tiles
This is an example of a widescreen tile which displays its thumbnail in a 16×9 aspect ratio. Add the .m-tile--16x9 class to the tile’s root element.
ALT
Tile Label
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.