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

Basic tiles

Default
Selected
Disabled


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


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

Stacked tiles

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


Group 12 Created with Sketch.
Default
Subtext goes here
Group 12 Created with Sketch.
Selected
Subtext goes here
Group 12 Created with Sketch.
Disabled
Subtext goes here


Logo-Red_Hat-Insights-A-Standard-RGB
Default
Subtext goes here
Logo-Red_Hat-OpenShift_Container_Platform-A-Standard-RGB
Default
Subtext goes here

Stacked tiles large

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


Group 12 Created with Sketch.
Default
Subtext goes here
Group 12 Created with Sketch.
Selected
Subtext goes here
Group 12 Created with Sketch.
Disabled
Subtext goes here


Logo-Red_Hat-Insights-A-Standard-RGB
Default
Subtext goes here
Logo-Red_Hat-OpenShift_Container_Platform-A-Standard-RGB
Default
Subtext goes here

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.
Default
This is really really long subtext that goes on for so long that it has to wrap to the next line.
Default
Subtext goes here

Documentation

Overview

Accessibility

Attribute
Applied to
Outcome
tabindex="0"
.pf-v5-c-tile
Inserts the tile into the tab order of the page so that it is focusable. Required
tabindex="-1"
.pf-v5-c-tile
Removes the tile from keyboard focus when it is disabled.

Usage

Class
Applied to
Outcome
.pf-v5-c-tile
<div>
Initiates a tile. Required
.pf-v5-c-tile__header
<div>
Initiates the tile header.
.pf-v5-c-tile__title
<div>
Initiates the tile title.
.pf-v5-c-tile__icon
<div>
Initiates the tile icon or image.
.pf-v5-c-tile__body
<div>
Initiates the tile body.
.pf-m-selected
.pf-v5-c-tile
Modifies the tile for the selected state.
.pf-m-disabled
.pf-v5-c-tile
Modifies the tile for the disabled state.
.pf-m-stacked
.pf-v5-c-tile__header
Modifies the tile header to be stacked vertically.
.pf-m-display-lg
.pf-v5-c-tile
Modifies the tile to have large display styling.

CSS variables

Expand or collapse columnSelectorVariableValue
.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 © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines