Overview

A tile is a flexible layout with a clickable and contained surface.

Example of a default link tile and a selectable tile

Sample element

296 X 50 placeholder
Title

Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse eu turpis elementum

Demo

View a live version of this element and see how it can be customized.

<rh-tile>
<img slot="image" src="https://fakeimg.pl/296x50" alt="296 X 50 placeholder image">
<div slot="title">Title</div>
<h2 slot="headline"><a href="#top">Link</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>

<script type="module">
import '@rhds/elements/rh-tile/rh-tile.js';
</script>

<link rel="stylesheet" href="../rh-tile-lightdom.css">

<style>
rh-tile {
margin-inline-end: var(--rh-space-md, 8px);
}
</style>
View the <rh-tile> demo in a new tab

When to use

  • When you need to group content in a linked container
  • When you need an alternative to a group of cards with the same calls to action
  • When you need to group content for a radio button or checkbox in a form
© 2021-2024 Red Hat, Inc. Deploys by Netlify