Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographyInteractionsSpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepper Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Tile

OverviewStyleGuidelinesCodeAccessibilityDemos
ImportingUsagerh-tilerh-tile-groupImportingUsagerh-tilerh-tile-group

Importing

Add rh-tile to your page with this import statement:

<script type="module">
  import '@rhds/elements/rh-tile/rh-tile.js';
</script>
Copy to Clipboard Wrap lines

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

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

Slots 6
Slot Name Summary 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.
Attributes 9
Attribute DOM Property Description Type Default
icon icon

The icon to display in the tile

 
IconNameFor<IconSetName>
 
unknown
icon-set iconSet

Icon set to display in the tile

 
IconSetName
 
'standard'
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.

 
string
 
unknown
name name

Form name

 
string
 
unknown
value value

Form value

 
string
 
unknown
checked checked

If tile is checkable, whether it is currently checked

 
boolean
 
false
disabled disabled

Whether tile interaction is disabled

 
boolean
 
false
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 base, unless explicitly provided with a color-palette.
 
ColorPalette
 
unknown
link link

When set to "private", the icon representing the link changes from an arrow to a padlock

 
'private' | 'public' | 'external'
 
unknown
Methods 3
Method Name Description
setCustomValidity(message: string)
checkValidity()
reportValidity()
Events 1
Event Name Description
select

when tile is clicked
CSS Shadow Parts 0
None
CSS Custom Properties 9
CSS Property Description Default
--rh-tile-interactive-color

Color of interactive elements. Could cause accessibility issues; prefer to use --rh-color-border-interactive-on-light and --rh-color-border-interactive-on-dark for theming.

 var(--rh-color-border-interactive)
--rh-tile-focus-interactive-color var(--rh-color-interactive-primary-hover)
--rh-tile-text-color-secondary

Disabled text and icons. Could cause accessibility issues; prefer to use --rh-color-text-secondary-on-light and --rh-color-text-secondary-on-dark for theming.

 var(--rh-color-text-secondary)
--rh-tile-focus-background-color var(--rh-color-surface-darker, #1f1f1f)
--rh-tile-disabled-background-color var(--rh-color-surface-dark, #383838)
--rh-tile-border-color

Color of tile border. Could cause accessibility issues; prefer to use --rh-color-border-subtle-on-light and --rh-color-border-subtle-on-dark for theming.

 var(--rh-color-border-subtle)
--rh-tile-link-color

Color of tile link.

 var(--_interactive-color)
--rh-tile-background-color

Color tile surface. Could cause accessibility issues; prefer to use --rh-color-surface-lightest and --rh-color-surface-darkest for theming.

 light-dark(var(--rh-color-surface-lightest, #ffffff), var(--rh-color-surface-darkest, #151515))
--rh-tile-text-color

Color of text. Could cause accessibility issues; prefer to use --rh-color-text-primary-on-light and --rh-color-text-primary-on-dark for theming.

 var(--rh-color-text-primary)
Design Tokens 29
Token Copy
--rh-font-family-body-text
--rh-font-weight-heading-regular
--rh-line-height-body-text
--rh-color-border-interactive
--rh-color-interactive-primary-hover
--rh-color-text-secondary
--rh-color-surface-lighter
--rh-color-surface-darker
--rh-color-surface-light
--rh-color-surface-dark
--rh-color-border-subtle
--rh-border-radius-default
--rh-border-width-sm
--rh-color-surface-lightest
--rh-color-surface-darkest
--rh-size-icon-05
--rh-size-icon-03
--rh-font-size-heading-xs
--rh-font-weight-body-text-medium
--rh-color-text-primary
--rh-font-size-body-text-lg
--rh-font-size-body-text-sm
--rh-font-size-body-text-xs
--rh-space-2xl
--rh-space-lg
--rh-animation-speed
--rh-animation-timing
--rh-space-xl
--rh-font-size-body-text-md

rh-tile-group

A group of <rh-tile> elements which handles radio selection.

Slots 1
Slot Name Summary Description

Put one or more rh-tile elements in this slot
Attributes 3
Attribute DOM Property Description Type Default
disabled disabled

Whether tile group interaction is disabled

 
boolean
 
false
radio radio

If tile is checkable, whether only one tile can be checked

 
boolean
 
false
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 base, unless explicitly provided with a color-palette.
 
ColorPalette
 
unknown
Methods 5
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 0
None
CSS Shadow Parts 0
None
CSS Custom Properties 0
None
Design Tokens 1
Token Copy
--rh-space-2xl
Edit this page on GitHub
© 2025 Red Hat Deploys by Netlify