Tile
On this page
Overview
A tile is a flexible layout with a clickable and contained surface.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';rh-tile {
margin-inline-end: var(--rh-space-md, 8px);
}<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>
<link rel="stylesheet" href="../rh-tile-lightdom.css">The icon to display in the tile
Icon set to display in the tile
When checkable, the accessible (visually hidden) label for the form control If not set, the text content of the tile element will be used instead.
Form name
Form value
If tile is checkable, whether it is currently checked
Whether tile interaction is disabled
Sets color palette, which affects the element's styles as well as descendants' color theme. Overrides parent color context. Your theme will influence these colors so check there first if you are seeing inconsistencies. See CSS Custom Properties for default values
- Tile always resets its context to
base, unless explicitly provided with acolor-palette.
When set to "private", the icon representing the link changes from an arrow to a padlock
Status
- Figma library:
-
Ready - RH Elements:
-
Ready - RH Shared Libs:
-
Ready
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 |
| RH Shared Libs |
|
Component is available in the RH Shared Libs repo |
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
