Overview
Tiles are a popular and effective way to highlight content or create a visually striking link that is emphasised on hover. A tile consists of a bordered card with an icon and text inside it. It can be used as a single instance, or in a group.
Examples
Single variation
Tile heading
<a href="" class="tile" data-equalizer-watch="tile">
<span class="tile__icon icon icon--lg icon--fg-dusk">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>inventory</title>
<path d="M15.5 6H5.942C6.593 5.364 7 4.48 7 3.5S6.593 1.636 5.942 1H15.5C16.879 1 18 2.122 18 3.5S16.879 6 15.5 6zM4 23h11V7H4v16zM4 5.95V5h1.499c-.361.479-.89.826-1.499.95zM19 3.5C19 1.57 17.43 0 15.5 0h-12C1.57 0 0 1.57 0 3.5v13c0 .276.224.5.5.5H3v6.5c0 .276.224.5.5.5h12c.276 0 .5-.224.5-.5V6.949c1.692-.245 3-1.691 3-3.449zM1 16V3.5C1 2.122 2.122 1 3.5 1S6 2.122 6 3.5c0 .171-.017.338-.05.5H3.5c-.276 0-.5.224-.5.5V16H1zm8.5-5h4c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-4c-.276 0-.5.224-.5.5s.224.5.5.5zm0 4h4c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-4c-.276 0-.5.224-.5.5s.224.5.5.5zm0 4h4c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-4c-.276 0-.5.224-.5.5s.224.5.5.5zm-3.854-8.146c.099.098.226.146.354.146.128 0 .255-.049.354-.146l2-2c.195-.195.195-.512 0-.707-.195-.196-.512-.196-.707 0L6 9.793l-.146-.146c-.196-.196-.513-.196-.708 0-.194.194-.194.511 0 .707l.5.5zm0 4c.099.098.226.146.354.146.128 0 .255-.049.354-.146l2-2c.195-.195.195-.512 0-.707-.195-.196-.512-.196-.707 0L6 13.793l-.146-.146c-.196-.196-.513-.196-.708 0-.194.194-.194.511 0 .707l.5.5zM22 5.5c-.737 0-1.375.405-1.722 1H20c-1.103 0-2 .897-2 2V16c0 .276.224.5.5.5s.5-.224.5-.5V8.5c0-.551.448-1 1-1V22c0 1.103.897 2 2 2s2-.897 2-2V7.5c0-1.103-.897-2-2-2zM22 23c-.552 0-1-.448-1-1h2c0 .552-.448 1-1 1zm0-16.5c.552 0 1 .449 1 1V14h-2V7.5c0-.551.448-1 1-1zM21 21h2v-6h-2v6z" fill="#000" fill-rule="evenodd"/>
</svg>
</span>
<p class="tile__heading">Tile heading</p>
</a>
Group variation
<div class="flex flex--wrap justify--center row mb-1" data-equalizer="tile">
<div class="col col-2 col-12--sm col-4--md col-3--lg">
<a href="" class="tile mb-1 mb-2--lg" data-equalizer-watch="tile">
<span class="tile__icon icon icon--lg icon--fg-dusk">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>inventory</title>
<path d="M15.5 6H5.942C6.593 5.364 7 4.48 7 3.5S6.593 1.636 5.942 1H15.5C16.879 1 18 2.122 18 3.5S16.879 6 15.5 6zM4 23h11V7H4v16zM4 5.95V5h1.499c-.361.479-.89.826-1.499.95zM19 3.5C19 1.57 17.43 0 15.5 0h-12C1.57 0 0 1.57 0 3.5v13c0 .276.224.5.5.5H3v6.5c0 .276.224.5.5.5h12c.276 0 .5-.224.5-.5V6.949c1.692-.245 3-1.691 3-3.449zM1 16V3.5C1 2.122 2.122 1 3.5 1S6 2.122 6 3.5c0 .171-.017.338-.05.5H3.5c-.276 0-.5.224-.5.5V16H1zm8.5-5h4c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-4c-.276 0-.5.224-.5.5s.224.5.5.5zm0 4h4c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-4c-.276 0-.5.224-.5.5s.224.5.5.5zm0 4h4c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-4c-.276 0-.5.224-.5.5s.224.5.5.5zm-3.854-8.146c.099.098.226.146.354.146.128 0 .255-.049.354-.146l2-2c.195-.195.195-.512 0-.707-.195-.196-.512-.196-.707 0L6 9.793l-.146-.146c-.196-.196-.513-.196-.708 0-.194.194-.194.511 0 .707l.5.5zm0 4c.099.098.226.146.354.146.128 0 .255-.049.354-.146l2-2c.195-.195.195-.512 0-.707-.195-.196-.512-.196-.707 0L6 13.793l-.146-.146c-.196-.196-.513-.196-.708 0-.194.194-.194.511 0 .707l.5.5zM22 5.5c-.737 0-1.375.405-1.722 1H20c-1.103 0-2 .897-2 2V16c0 .276.224.5.5.5s.5-.224.5-.5V8.5c0-.551.448-1 1-1V22c0 1.103.897 2 2 2s2-.897 2-2V7.5c0-1.103-.897-2-2-2zM22 23c-.552 0-1-.448-1-1h2c0 .552-.448 1-1 1zm0-16.5c.552 0 1 .449 1 1V14h-2V7.5c0-.551.448-1 1-1zM21 21h2v-6h-2v6z" fill="#000" fill-rule="evenodd"/>
</svg>
</span>
<p class="tile__heading">Tile heading</p>
</a>
</div>
<div class="col col-2 col-12--sm col-4--md col-3--lg">
<a href="" class="tile mb-1 mb-2--lg" data-equalizer-watch="tile">
<span class="tile__icon icon icon--lg icon--fg-dusk">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>month-end</title>
<path d="M17.5 11c-3.584 0-6.5 2.916-6.5 6.5s2.916 6.5 6.5 6.5 6.5-2.916 6.5-6.5-2.916-6.5-6.5-6.5zm0 12c-3.032 0-5.5-2.468-5.5-5.5s2.468-5.5 5.5-5.5 5.5 2.468 5.5 5.5-2.468 5.5-5.5 5.5zm2.646-7.854L16.5 18.793l-1.646-1.646c-.195-.195-.512-.195-.707 0-.196.195-.196.512 0 .707l2 2c.098.098.226.147.354.147.127 0 .255-.049.352-.146l4-4c.195-.195.195-.512 0-.707-.195-.196-.512-.196-.707 0zM9.5 18H1V8h19v2c0 .276.224.5.5.5s.5-.224.5-.5V2.5c0-.276-.224-.5-.5-.5H17V.5c0-.276-.224-.5-.5-.5h-3c-.276 0-.5.224-.5.5V2H8V.5c0-.276-.224-.5-.5-.5h-3c-.276 0-.5.224-.5.5V2H.5c-.276 0-.5.224-.5.5v16c0 .276.224.5.5.5h9c.276 0 .5-.224.5-.5s-.224-.5-.5-.5zM4 3v1.5c0 .276.224.5.5.5h3c.276 0 .5-.224.5-.5V3h5v1.5c0 .276.224.5.5.5h3c.276 0 .5-.224.5-.5V3h3v4H1V3h3zm1 1h2V1H5v3zm9 0h2V1h-2v3z" fill="#000" fill-rule="evenodd"/>
</svg>
</span>
<p class="tile__heading">Tile heading</p>
</a>
</div>
<div class="col col-2 col-12--sm col-4--md col-3--lg">
<a href="" class="tile mb-1 mb-2--lg" data-equalizer-watch="tile">
<span class="tile__icon icon icon--lg icon--fg-dusk">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>payg</title>
<path d="M5.492 13.048h-.93v1.419c0 .203-.048.356-.144.461-.095.105-.216.157-.362.157-.153 0-.276-.051-.369-.155-.093-.104-.14-.256-.14-.456V10.61c0-.223.051-.382.154-.478.102-.096.265-.144.488-.144h1.303c.385 0 .681.03.888.09.205.056.383.15.532.283.15.132.262.294.34.485.077.192.116.407.116.646 0 .51-.157.897-.472 1.16-.314.264-.782.395-1.404.395zm-.246-2.297h-.684v1.532h.684c.239 0 .439-.025.6-.075.16-.05.283-.133.367-.247.084-.114.126-.263.126-.447 0-.221-.065-.401-.194-.54-.146-.148-.446-.223-.9-.223zm5.36 3.682l-.239-.63H8.33l-.239.643c-.093.25-.173.42-.24.508-.065.088-.174.131-.324.131-.128 0-.24-.046-.338-.14-.098-.093-.147-.2-.147-.318 0-.068.011-.139.034-.211.023-.073.06-.175.113-.305l1.281-3.254.132-.336c.051-.131.106-.24.164-.327.058-.086.135-.156.23-.21.094-.053.21-.08.35-.08.14 0 .259.027.353.08.095.054.171.123.23.207.057.084.106.175.146.272.04.096.09.226.152.388l1.31 3.233c.102.246.153.425.153.537 0 .116-.048.222-.145.32-.097.096-.214.144-.35.144-.08 0-.149-.014-.206-.042-.057-.029-.104-.067-.143-.116-.039-.05-.08-.125-.125-.226-.044-.101-.082-.19-.114-.268zm-2.01-1.391h1.498l-.755-2.068-.742 2.068zM0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12zm23 0c0-6.075-4.925-11-11-11S1 5.925 1 12s4.925 11 11 11 11-4.925 11-11zm-9.982 2.463v-1.59l-1.224-1.896c-.107-.171-.183-.305-.227-.4-.045-.096-.067-.18-.067-.25 0-.116.045-.216.135-.3.09-.085.201-.127.333-.127.14 0 .245.04.316.118.072.079.18.235.323.47l.937 1.52.947-1.52.143-.236c.039-.064.082-.124.128-.18.047-.055.099-.098.156-.128.057-.03.126-.044.208-.044.128 0 .235.042.32.125.085.083.128.18.128.289 0 .088-.021.177-.065.266-.043.089-.117.212-.222.37l-1.254 1.924v1.589c0 .207-.048.362-.144.465-.096.102-.217.154-.366.154-.15 0-.272-.051-.365-.152-.094-.102-.14-.257-.14-.467zm7.528-1.5v.96c0 .128-.013.23-.038.306-.025.077-.07.146-.138.207-.067.062-.153.12-.258.178-.303.164-.595.283-.875.359-.28.075-.586.112-.916.112-.385 0-.736-.059-1.053-.177-.317-.119-.587-.29-.81-.516-.223-.226-.395-.5-.514-.82-.12-.322-.18-.68-.18-1.077 0-.39.058-.747.175-1.07.116-.324.287-.598.512-.824.226-.226.5-.398.824-.518.324-.12.69-.18 1.1-.18.338 0 .636.046.896.136.26.09.47.203.632.34.162.137.284.281.366.434.082.153.123.288.123.407 0 .127-.047.236-.142.326-.094.09-.208.135-.34.135-.073 0-.143-.017-.21-.051-.067-.034-.124-.082-.17-.144-.124-.196-.23-.344-.317-.444-.087-.1-.203-.185-.35-.253-.147-.068-.335-.102-.563-.102-.234 0-.444.04-.629.12-.184.082-.342.2-.473.353-.13.154-.231.342-.3.566-.07.223-.105.47-.105.741 0 .588.135 1.04.405 1.357.27.317.647.475 1.13.475.234 0 .455-.03.661-.092.206-.061.415-.15.627-.263v-.814h-.786c-.189 0-.332-.028-.429-.085-.097-.057-.145-.154-.145-.29 0-.112.04-.205.121-.277.081-.073.191-.11.33-.11h1.152c.141 0 .26.013.359.038.098.025.177.08.237.167.06.087.091.217.091.39z" fill="#000" fill-rule="evenodd"/>
</svg>
</span>
<p class="tile__heading">Tile heading</p>
</a>
</div>
<div class="col col-2 col-12--sm col-4--md col-3--lg">
<a href="" class="tile mb-1 mb-2--lg" data-equalizer-watch="tile">
<span class="tile__icon icon icon--lg icon--fg-dusk">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>piggy-bank</title>
<path d="M24 10.002c0-.276-.224-.5-.5-.5s-.5.224-.5.5c0 .664-.436 1.221-1.034 1.42-.169-2.147-1.253-4.123-3.116-5.613-2.439-1.95-5.805-2.72-9.066-2.088-.535-.774-1.316-1.328-2.233-1.578-1.035-.285-2.117-.14-3.051.398-.155.09-.25.254-.25.433 0 .178.095.343.25.433.701.406 1.212 1.087 1.409 1.862-1.973 1.291-3.317 3.166-3.753 5.233H.5c-.276 0-.5.224-.5.5v4c0 .276.224.5.5.5h2.39c.879 1.657 2.337 2.973 4.11 3.845v3.155c0 .276.224.5.5.5s.5-.224.5-.5v-2.716c1.236.458 2.589.716 4 .716 1.422 0 2.774-.258 4-.715v2.715c0 .276.224.5.5.5s.5-.224.5-.5v-3.15c2.839-1.4 4.789-3.95 4.973-6.898C23.126 12.232 24 11.218 24 10.002zm-12 9.5c-3.695 0-6.974-1.852-8.353-4.717-.083-.173-.258-.283-.45-.283H1v-3h1.574c.248 0 .458-.182.495-.426.304-2.043 1.636-3.916 3.655-5.138.171-.104.264-.3.236-.498-.128-.909-.557-1.727-1.21-2.342.5-.132 1.027-.13 1.538.01.777.211 1.425.716 1.822 1.42.109.192.33.293.546.242 3.075-.692 6.279-.013 8.57 1.82C20.015 8.02 21 9.942 21 12.001c0 4.136-4.037 7.5-9 7.5zM11.467 6.02c-.275.02-.484.257-.466.532.019.276.258.482.532.466 1.679-.107 3.33.381 4.667 1.384.09.067.196.1.3.1.152 0 .302-.069.4-.2.166-.22.12-.534-.1-.7-1.528-1.146-3.42-1.706-5.333-1.582zM6 9.502c-.551 0-1 .45-1 1 0 .551.449 1 1 1 .551 0 1-.449 1-1 0-.55-.449-1-1-1z" fill="#000" fill-rule="evenodd"/>
</svg>
</span>
<p class="tile__heading">Tile heading</p>
</a>
</div>
<div class="col col-2 col-12--sm col-4--md col-3--lg">
<a href="" class="tile mb-1 mb-2--lg" data-equalizer-watch="tile">
<span class="tile__icon icon icon--lg icon--fg-dusk">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>reports</title>
<path d="M21.5 16.291l-1.793-1.793L21 13.205l1.793 1.793-1.293 1.293zm-7.754 4.663l1.299 1.299-1.818.519.519-1.818zm2.253.839L14.206 20 19 15.205l1.793 1.793L16 21.793zm7.855-7.148l-2.5-2.5c-.196-.196-.512-.196-.708 0l-7.5 7.501c-.058.058-.093.126-.117.198-.002.007-.008.011-.01.018l-1 3.5c-.051.175-.002.364.127.491.094.095.222.147.353.147.046 0 .092-.006.138-.02l3.5-1c.006-.002.01-.008.017-.01.072-.024.14-.059.198-.117l7.502-7.501c.195-.196.195-.512 0-.707zM9.999 21H2.5c-.826 0-1.5-.673-1.5-1.5V4h3v1H2.5c-.275 0-.5.224-.5.5v14c0 .276.225.5.5.5h7c.276 0 .5-.224.5-.5s-.224-.5-.5-.5H3V6h1v.5c0 .276.225.5.5.5h8c.276 0 .5-.224.5-.5V6h1v4c0 .276.224.5.5.5s.5-.224.5-.5V5.5c0-.276-.224-.5-.5-.5h-1.5V4h3v6c0 .276.223.5.5.5.275 0 .5-.224.5-.5V3.5c0-.276-.225-.5-.5-.5h-3.5v-.5c0-.276-.224-.5-.5-.5h-1.545c-.189-1.037-.975-2-2.455-2S6.233.963 6.044 2H4.5c-.276 0-.5.224-.5.5V3H.5c-.276 0-.5.224-.5.5v16C0 20.879 1.122 22 2.5 22H10c.275 0 .499-.224.499-.5s-.224-.5-.5-.5zM5 3h1.5c.276 0 .5-.224.5-.5C7 2.347 7.041 1 8.5 1S10 2.347 10 2.5c0 .276.224.5.5.5h1.5v3h-7V3zm5.5 6h-5c-.275 0-.5.224-.5.5s.225.5.5.5h5c.276 0 .5-.224.5-.5s-.224-.5-.5-.5zm0 2h-5c-.275 0-.5.224-.5.5s.225.5.5.5h5c.276 0 .5-.224.5-.5s-.224-.5-.5-.5zm0 2h-5c-.275 0-.5.224-.5.5s.225.5.5.5h5c.276 0 .5-.224.5-.5s-.224-.5-.5-.5zm-2 3c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-3c-.275 0-.5.224-.5.5s.225.5.5.5h3z" fill="#000" fill-rule="evenodd"/>
</svg>
</span>
<p class="tile__heading">Tile heading</p>
</a>
</div>
</div>
Usage guidelines
| Dos | Donts |
|---|---|
 Do choose an icon that supports and adds context to the text and link.
|
 Don't use as anchor for in-page links.
|
|
Do ensure messages are clear and concise.
|
Don’t use overly long messages that flow over 1 line.
|
|
When using within a group, do ensure a minimum of 3 Tiles are present.
|
When using within a group, don’t exceed a maximum of 5 Tiles.
|
Implementation guidelines
We're so sorry, there are currently no implementation guidelines for this component 😥
If you feel you can help out your fellow designers by creating usage guidelines for this component, please reach out to #cr-marquee on Slack.