Tile
On this page
Importing
Add rh-tile to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-tile/rh-tile.js';
</script>To learn more about installing RHDS elements on your site using an import map read our getting started docs.
Lightdom CSS
This element requires you to load "Lightdom CSS" stylesheets for styling deeply slotted elements.
Note
Replace /path/to/ with path to the CSS file, whether local or CDN.
<link rel="stylesheet" href="/path/to/rh-tile/rh-tile-lightdom.css">Usage
<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>rh-tile
A tile is a flexible layout with a clickable and contained surface.
| Slot Name | Description |
|---|---|
image |
optional image on top of tile |
icon |
optional icon |
title |
A title provides secondary descriptive context. Selectable and compact tiles do not have title slots |
headline |
In a link tile, the heading should indicate what clicking on the tile will do. In a selectable tile, the heading labels the radio button or checkbox. |
|
The body text expands on heading content and gives the user more information. |
footer |
Footer text should be brief and be used for supplementary information only. |
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
bleed |
bleed |
Whether image is full-width (i.e. bleeds into the padding) |
|
|
desaturated |
desaturated |
Whether headline link text is a desaturated color instead of blue;
|
|
|
compact |
compact |
Reduces tile padding for more compact spaces |
|
|
icon |
icon |
The icon to display in the tile |
|
|
icon-set |
iconSet |
Icon set to display in the tile |
|
|
accessible-label |
accessibleLabel |
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. |
|
|
name |
name |
Form name |
|
|
value |
value |
Form value |
|
|
checkable |
checkable |
When true, tile behaves like a checkbox unless it is part of an
|
|
|
checked |
checked |
If tile is checkable, whether it is currently checked |
|
|
disabled |
disabled |
Whether tile interaction is disabled |
|
|
color-palette |
colorPalette |
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 |
|
|
link |
link |
When set to "private", the icon representing the link changes from an arrow to a padlock |
|
|
| Method Name | Description |
|---|---|
formDisabledCallback() |
|
formStateRestoreCallback(state: string, mode: string) |
|
setCustomValidity(message: string) |
|
checkValidity() |
|
reportValidity() |
| Event Name | Description |
|---|---|
force |
|
select |
when tile is clicked |
| CSS Property | Description | Default |
|---|---|---|
--rh-tile-text-color |
Color of text. |
var(--rh-color-text-primary-on-light, #151515)
|
--rh-tile-text-color-secondary |
Disabled text and icons. |
var(--rh-color-text-secondary-on-light, #4d4d4d)
|
--rh-tile-interactive-color |
Color of interactive elements. |
var(--rh-color-border-interactive-on-light, #0066cc)
|
--rh-tile-link-color |
Color of tile link. |
var(--rh-tile-interactive-color)
|
--rh-tile-link-texColorPaletteConstructort-decoration |
Tile link text decoration |
none
|
--rh-tile-background-color |
Color tile surface. |
var(--rh-color-surface-lightest, #ffffff)
|
--rh-tile-focus-background-color |
Color tile surface on focus/hover. |
var(--rh-color-surface-lighter, #f2f2f2)
|
--rh-tile-disabled-background-color |
Color tile surface when disabled. |
var(--rh-color-surface-light, #e0e0e0)
|
--rh-tile-border-color |
Color of tile border. |
var(--rh-color-border-subtle-on-light, #c7c7c7)
|
| Token | Copy |
|---|---|
--rh-animation-speed
|
|
--rh-animation-timing
|
|
--rh-border-radius-default
|
|
--rh-border-width-sm
|
|
--rh-color-border-interactive
|
|
--rh-color-border-subtle
|
|
--rh-color-interactive-primary-hover
|
|
--rh-color-surface-dark
|
|
--rh-color-surface-darker
|
|
--rh-color-surface-darkest
|
|
--rh-color-surface-light
|
|
--rh-color-surface-lighter
|
|
--rh-color-surface-lightest
|
|
--rh-color-text-primary
|
|
--rh-color-text-secondary
|
|
--rh-font-family-body-text
|
|
--rh-font-size-body-text-lg
|
|
--rh-font-size-body-text-md
|
|
--rh-font-size-body-text-sm
|
|
--rh-font-size-body-text-xs
|
|
--rh-font-size-heading-xs
|
|
--rh-font-weight-body-text-medium
|
|
--rh-font-weight-heading-regular
|
|
--rh-line-height-body-text
|
|
--rh-size-icon-03
|
|
--rh-size-icon-05
|
|
--rh-space-2xl
|
|
--rh-space-lg
|
|
--rh-space-xl
|
|
rh-tile-group
A group of <rh-tile> elements which handles radio selection.
| Slot Name | Description |
|---|---|
|
Put one or more |
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
disabled |
disabled |
Whether tile group interaction is disabled |
|
|
radio |
radio |
If tile is checkable, whether only one tile can be checked |
|
|
color-palette |
colorPalette |
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 group always resets its context to |
|
|
| Method Name | Description |
|---|---|
focus() |
Sets focus on active tile |
selectItem(tile: RhTile) |
Programatically select a tile |
toggleItem(tile: RhTile) |
Programatically toggle a tile |
updateItems() |
Updates slotted tiles to set properties and keyboard navigation |
| Token | Copy |
|---|---|
--rh-space-2xl
|
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
