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 provides a clickable surface for presenting content with
optional images, icons, and links. Checkable tiles expose ARIA
role="checkbox" or role="radio" to screen readers. Users
should set accessible-label when tiles lack text content.
Keyboard users activate checkable tiles with Enter or Space.
Theming
This element uses Red Hat design system theming and can be used in themable contexts.
This element is a
color palette
container and supports all color palettes via
the color-palette attribute.
Slots
| Slot Name | Summary | Description |
|---|---|---|
image
|
Place a block-level img or svg element here. Images must include alt text for screen readers, or role="presentation" for decorative images. Hidden when the tile is checkable. |
|
icon
|
Place an inline rh-icon or svg element here. Icon should include a title for screen readers. |
|
title
|
Inline text providing secondary context above the headline. Hidden when checkable or compact. |
|
headline
|
Block heading element. In a link tile, must contain an anchor. In a checkable tile, this labels the ARIA form control for screen readers. |
|
[default]
|
Inline or block body text expanding on the
headline. Should be concise. |
|
|
Inline supplementary text. Should not contain interactive elements as the tile is clickable. |
Attributes
| 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 |
|
|
Methods
| Method Name | Description |
|---|---|
setCustomValidity(message: string)
|
|
checkValidity()
|
|
reportValidity()
|
Events
| Event Name | Description |
|---|---|
select
|
Fired when a checkable tile is
clicked. The event's |
CSS Shadow Parts
None
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--rh-tile-interactive-color |
Interactive border and icon color |
var(--rh-color-border-interactive)
|
--rh-tile-focus-interactive-color |
Interactive color on focus and hover |
var(--rh-color-interactive-primary-hover)
|
--rh-tile-text-color-secondary |
Secondary text and icon color |
var(--rh-color-text-secondary)
|
--rh-tile-focus-background-color |
Focus/hover surface color override in light mode Focus/hover surface color override in dark mode |
var(--rh-color-surface-darker, #1f1f1f)
|
--rh-tile-disabled-background-color |
Disabled surface color override in light mode Disabled surface color override in dark mode |
var(--rh-color-surface-dark, #383838)
|
--rh-tile-border-color |
Tile border color |
var(--rh-color-border-subtle)
|
--rh-tile-link-color |
Tile link color |
var(--_interactive-color)
|
--rh-tile-text-color |
Tile text color |
var(--rh-color-text-primary)
|
Design Tokens
| Token | Description | Copy |
|---|---|---|
--rh-font-family-body-text
|
Tile font family Body text font family |
|
--rh-font-weight-heading-regular
|
Tile base font weight Regular font weight for headings |
|
--rh-line-height-body-text
|
Tile line height Line height for body text |
|
--rh-color-border-interactive
|
|
|
--rh-color-interactive-primary-hover
|
|
|
--rh-color-text-secondary
|
|
|
--rh-color-border-subtle
|
|
|
--rh-border-radius-default
|
Tile border radius 3px border radius; Example: Card |
|
--rh-border-width-sm
|
Tile border width 1px border width; Example: Secondary CTA or Button |
|
--rh-size-icon-05
|
Icon size 48px icon box |
|
--rh-size-icon-03
|
Compact icon size 32px icon box |
|
--rh-font-size-heading-xs
|
Headline font size h6 heading font size |
|
--rh-font-weight-body-text-medium
|
Headline font weight Medium font weight |
|
--rh-color-text-primary
|
|
|
--rh-font-size-body-text-lg
|
Compact headline font size 18px font size |
|
--rh-font-size-body-text-sm
|
Compact body font size 14px font size |
|
--rh-font-size-body-text-xs
|
Compact footer font size 12px font size |
|
--rh-space-2xl
|
Tile padding Icon block end margin Body spacer inline size 32px spacer |
|
--rh-space-lg
|
Tile content margin Compact tile padding Body spacer block size 16px spacer |
|
--rh-animation-speed
|
Arrow animation speed |
|
--rh-animation-timing
|
Arrow animation timing |
|
--rh-space-xl
|
Compact tile padding Arrow icon inline size Arrow icon block size SVG icon inline size SVG icon block size 24px spacer |
|
--rh-font-size-body-text-md
|
Tile base font size Title font size Body text font size 16px font size |
|
--rh-color-border-interactive-on-dark
|
Interactive color for dark palettes Interactive border color (dark theme) |
|
--rh-color-interactive-primary-hover-on-dark
|
Focus interactive color for dark palettes Primary interactive - hover (Dark theme) |
|
--rh-color-text-secondary-on-dark
|
Secondary text color for dark palettes Secondary text color for dark theme |
|
--rh-color-border-subtle-on-dark
|
Border color for dark palettes Subtle border color (dark theme) |
|
--rh-color-text-primary-on-dark
|
Text color for dark palettes Primary text color for dark theme |
|
--rh-color-surface-darkest
|
Primary surface (dark theme) |
|
--rh-color-surface-darker
|
Focus/hover surface color in dark mode Secondary surface (dark theme) |
|
--rh-color-surface-dark
|
Disabled surface color in dark mode Disabled background for dark palettes Tertiary surface (dark theme) |
|
--rh-color-border-interactive-on-light
|
Interactive color for light palettes Interactive border color (light theme) |
|
--rh-color-interactive-primary-hover-on-light
|
Focus interactive color for light palettes Primary interactive - hover (Light theme) |
|
--rh-color-text-secondary-on-light
|
Secondary text color for light palettes Secondary text color for light theme |
|
--rh-color-border-subtle-on-light
|
Border color for light palettes Subtle border color (light theme) |
|
--rh-color-text-primary-on-light
|
Text color for light palettes Primary text color for light theme |
|
--rh-color-surface-lightest
|
Primary surface (light theme) |
|
--rh-color-surface-lighter
|
Focus/hover surface color in light mode Tertiary surface (light theme) |
|
--rh-color-surface-light
|
Disabled surface color in light mode Disabled background for light palettes Secondary surface (light theme) |
|
rh-tile-group
A tile group organizes \<rh-tile\> elements into a selectable
set. When radio is set, it provides ARIA role="radiogroup"
and arrow-key navigation for screen readers. The group must
contain at least two tiles. Users should set radio when only
one option must be selected.
Theming
This element uses Red Hat design system theming and can be used in themable contexts.
This element is a
color palette
container and supports all color palettes via
the color-palette attribute.
Slots
| Slot Name | Summary | Description |
|---|---|---|
[default]
|
Place |
Attributes
| 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 |
|
|
Methods
| Method Name | Description |
|---|---|
firstUpdated()
|
|
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 |
Events
None
CSS Shadow Parts
None
CSS Custom Properties
None
Design Tokens
| Token | Description | Copy |
|---|---|---|
--rh-space-2xl
|
Gap between tiles 32px spacer |
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
