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

Status
- Figma library:
-
Ready - RH Elements:
-
Ready - WebRH:
-
Ready
Sample element
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>
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
Status checklist
Property | Status | Meaning |
---|---|---|
Figma library |
|
Component is available in the Figma library |
RH Elements |
|
Component is available in the RH Elements repo |
WebRH |
|
Component is available in the WebRH repo |
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.