Skip to content
PatternFly

Tile

A tile component is a form of selection that can be used in place of a radio button and is commonly used in forms. A tile appears visually similar to a selectable card. However, tiles are used specifically when the user is selecting a static option, whereas a selectable card triggers an action or opens a quickstart or sidebar to provide additional information.

Examples

Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the Demo section.

Basic

Default
Selected
Disabled

With subtext

Default
Subtext goes here
Selected
Subtext goes here
Disabled
Subtext goes here

With icon

Default
Subtext goes here
Selected
Subtext goes here
Disabled
Subtext goes here

Stacked

Default
Subtext goes here
Selected
Subtext goes here
Disabled
Subtext goes here

Stacked with large icons

Default
Subtext goes here
Selected
Subtext goes here
Disabled
Subtext goes here

With extra content

Default
This is really really long subtext that goes on for so long that it has to wrap to the next line. This is really really long subtext that goes on for so long that it has to wrap to the next line.
Selected
This is really really long subtext that goes on for so long that it has to wrap to the next line.
Disabled
Subtext goes here

Props

Tile

*required
NameTypeDefaultDescription
titlerequiredstringTitle of the tile
childrenReact.ReactNodeContent rendered inside the banner
classNamestringAdditional classes added to the banner
iconReact.ReactNodeIcon in the tile title
isDisabledbooleanFlag indicating if the tile is disabled
isDisplayLargebooleanFlag indicating if the stacked tile icon is large
isSelectedbooleanFlag indicating if the tile is selected
isStackedbooleanFlag indicating if the tile header is stacked

CSS variables

SelectorVariableValue
.pf-v5-c-tile--pf-v5-c-tile--PaddingTop
1.5rem
.pf-v5-c-tile--pf-v5-c-tile--PaddingRight
1.5rem
.pf-v5-c-tile--pf-v5-c-tile--PaddingBottom
1.5rem
.pf-v5-c-tile--pf-v5-c-tile--PaddingLeft
1.5rem
.pf-v5-c-tile--pf-v5-c-tile--BackgroundColor
#fff
.pf-v5-c-tile--pf-v5-c-tile--Transition
none
.pf-v5-c-tile--pf-v5-c-tile--TranslateY
0
.pf-v5-c-tile--pf-v5-c-tile--before--BorderColor
#d2d2d2
.pf-v5-c-tile--pf-v5-c-tile--before--BorderWidth
1px
.pf-v5-c-tile--pf-v5-c-tile--after--Height
3px
.pf-v5-c-tile--pf-v5-c-tile--after--BackgroundColor
transparent
.pf-v5-c-tile--pf-v5-c-tile--after--Transition
none
.pf-v5-c-tile--pf-v5-c-tile--after--ScaleY
1
.pf-v5-c-tile--pf-v5-c-tile--after--TranslateY
0
.pf-v5-c-tile--pf-v5-c-tile__icon--MarginRight
0.5rem
.pf-v5-c-tile--pf-v5-c-tile__icon--FontSize
1rem
.pf-v5-c-tile--pf-v5-c-tile__icon--Color
#151515
.pf-v5-c-tile--pf-v5-c-tile__title--Color
#151515
.pf-v5-c-tile--pf-v5-c-tile__body--Color
#151515
.pf-v5-c-tile--pf-v5-c-tile__body--FontSize
0.75rem
.pf-v5-c-tile--pf-v5-c-tile--hover--after--BackgroundColor
#73bcf7
.pf-v5-c-tile--pf-v5-c-tile--hover__icon--Color
#06c
.pf-v5-c-tile--pf-v5-c-tile--hover__title--Color
#06c
.pf-v5-c-tile--pf-v5-c-tile--focus--after--BackgroundColor
#73bcf7
.pf-v5-c-tile--pf-v5-c-tile--focus__icon--Color
#06c
.pf-v5-c-tile--pf-v5-c-tile--focus__title--Color
#06c
.pf-v5-c-tile--pf-v5-c-tile--m-selected--TranslateY
calc(-1 * 2 * 3px)
.pf-v5-c-tile--pf-v5-c-tile--m-selected--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-v5-c-tile--pf-v5-c-tile--m-selected--after--Height
3px
.pf-v5-c-tile--pf-v5-c-tile--m-selected--after--BackgroundColor
#06c
.pf-v5-c-tile--pf-v5-c-tile--m-selected--after--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-v5-c-tile--pf-v5-c-tile--m-selected--after--ScaleY
2
.pf-v5-c-tile--pf-v5-c-tile--m-selected__icon--Color
#06c
.pf-v5-c-tile--pf-v5-c-tile--m-selected__title--Color
#06c
.pf-v5-c-tile--pf-v5-c-tile--m-disabled--BackgroundColor
#f0f0f0
.pf-v5-c-tile--pf-v5-c-tile--m-disabled__icon--Color
#6a6e73
.pf-v5-c-tile--pf-v5-c-tile--m-disabled__title--Color
#6a6e73
.pf-v5-c-tile--pf-v5-c-tile--m-disabled__body--Color
#6a6e73
.pf-v5-c-tile--pf-v5-c-tile__header--m-stacked__icon--MarginBottom
0.25rem
.pf-v5-c-tile--pf-v5-c-tile__header--m-stacked__icon--FontSize
1.5rem
.pf-v5-c-tile--pf-v5-c-tile--m-display-lg__header--m-stacked__icon--FontSize
3.375rem
.pf-v5-c-tile:hover--pf-v5-c-tile__title--Color
#06c
.pf-v5-c-tile:hover--pf-v5-c-tile__icon--Color
#06c
.pf-v5-c-tile:hover--pf-v5-c-tile--after--BackgroundColor
#73bcf7
.pf-v5-c-tile:focus--pf-v5-c-tile__title--Color
#06c
.pf-v5-c-tile:focus--pf-v5-c-tile__icon--Color
#06c
.pf-v5-c-tile:focus--pf-v5-c-tile--after--BackgroundColor
#73bcf7
.pf-v5-c-tile:active--pf-v5-c-tile__title--Color
#06c
.pf-v5-c-tile:active--pf-v5-c-tile__icon--Color
#06c
.pf-v5-c-tile:active--pf-v5-c-tile--TranslateY
calc(-1 * 2 * 3px)
.pf-v5-c-tile:active--pf-v5-c-tile--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-v5-c-tile:active--pf-v5-c-tile--after--Height
3px
.pf-v5-c-tile:active--pf-v5-c-tile--after--BackgroundColor
#06c
.pf-v5-c-tile:active--pf-v5-c-tile--after--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-v5-c-tile:active--pf-v5-c-tile--after--ScaleY
2
.pf-v5-c-tile.pf-m-disabled--pf-v5-c-tile--BackgroundColor
#f0f0f0
.pf-v5-c-tile.pf-m-disabled--pf-v5-c-tile__title--Color
#6a6e73
.pf-v5-c-tile.pf-m-disabled--pf-v5-c-tile__body--Color
#6a6e73
.pf-v5-c-tile.pf-m-disabled--pf-v5-c-tile--before--BorderWidth
0
.pf-v5-c-tile.pf-m-disabled--pf-v5-c-tile__icon--Color
#6a6e73
.pf-v5-c-tile.pf-m-display-lg .pf-v5-c-tile__header.pf-m-stacked--pf-v5-c-tile__icon--FontSize
3.375rem
.pf-v5-c-tile__header.pf-m-stacked--pf-v5-c-tile__icon--MarginRight
0
.pf-v5-c-tile__header.pf-m-stacked--pf-v5-c-tile__icon--FontSize
1.5rem

View source on GitHub
Red Hat
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines