Skip to main content Red Hat Design System logo Contribute on Github v1.4.5

Tile

Overview Style Guidelines Code Demos Accessibility

Installation

Usage

Warning

Tiles require light DOM CSS to be included on the page in order to style links properly.

rh-tile

Slots 6
Slot Name Description
image

optional image on top of tile
icon

optional icon
title

optional title
headline

optional headline / link title

optional body content
footer

optional footer
Attributes 11
DOM Property Description Type Default
bleed

Whether image is full-width (i.e. bleeds into the padding)

 
boolean
 
false
desaturated

Whether headline link text is a desaturated color instead of blue; true sets headline color to white on dark tiles or black on light tiles

 
boolean
 
false
compact

Reduces tile padding for more compact spaces

 
boolean
 
false
icon

Icon (must be a member of the fontawesome "far" icon set)

 
string | undefined
 
unknown
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 | undefined
 
unknown
name

Form name

 
string | undefined
 
unknown
value

Form value

 
string | undefined
 
unknown
checkable

When true, tile behaves like a checkbox unless it is part of an <rh-tile-group radio>, in which case it behaves like a radio button

 
boolean
 
false
checked

If tile is checkable, whether it is currently checked

 
boolean
 
false
disabled

Whether tile interaction is disabled

 
boolean
 
false
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 | undefined
 
unknown
Methods 5
Method Name Description
formDisabledCallback()
formStateRestoreCallback(state: string, mode: string)
setCustomValidity(message: string)
checkValidity()
reportValidity()
Events 2
Event Name Description
force
select

when tile is clicked
CSS Shadow Parts 0

None

 CSS Custom Properties 9
CSS Property Description Default
--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-on-light, #151515)
--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-on-light, #4d4d4d)
--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-on-light, #0066cc)
--rh-tile-link-color

Color of tile link.

 var(--rh-tile-interactive-color)
--rh-tile-link-text-decoration

Tile link text decoration

 none
--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.

 var(--rh-color-surface-lightest, #ffffff)
--rh-tile-focus-background-color

Color tile surface on focus/hover.
Could cause accessibility issues; prefer to use --rh-color-surface-lighter and --rh-color-surface-darker for theming.

 var(--rh-color-surface-lighter, #f2f2f2)
--rh-tile-disabled-background-color

Color tile surface when disabled.
Could cause accessibility issues; prefer to use --rh-color-surface-light and --rh-color-surface-dark for theming.

 var(--rh-color-surface-light, #e0e0e0)
--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-on-light, #c7c7c7)
Design Tokens 0

None

rh-tile-group

Slots 1
Slot Name Description

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

Whether tile group interaction is disabled

 
boolean
 
false
radio

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

 
boolean
 
false
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 | undefined
 
unknown
Methods 4
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
Events 0

None

 CSS Shadow Parts 0

None

 CSS Custom Properties 0

None

 Design Tokens 0

None
© 2021-2024 Red Hat, Inc. Deploys by Netlify