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.
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.
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.
Tile Label
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.