Skip to Content
Patternfly Logo

Tile

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum
ExamplesPropsCSS Variables

Examples

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

Tile

Default
Selected
Disabled

Tile with subtext

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

Tile with icon

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

Stacked tile

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

Stacked tile with large icons

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

Tile 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 properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoContent rendered inside the banner
classNamestringNoAdditional classes added to the banner
titlestringYesTitle of the tile
iconReact.ReactNodeNoIcon in the tile title
isSelectedbooleanNoFlag indicating if the tile is selected
isDisabledbooleanNoFlag indicating if the tile is disabled
isStackedbooleanNoFlag indicating if the tile header is stacked
isDisplayLargebooleanNoFlag indicating if the stacked tile icon is large

CSS Variables

.pf-c-tile--pf-c-tile--PaddingTopc_tile_PaddingTop
1.5rem
.pf-c-tile--pf-c-tile--PaddingRightc_tile_PaddingRight
1.5rem
.pf-c-tile--pf-c-tile--PaddingBottomc_tile_PaddingBottom
1.5rem
.pf-c-tile--pf-c-tile--PaddingLeftc_tile_PaddingLeft
1.5rem
.pf-c-tile--pf-c-tile--BackgroundColorc_tile_BackgroundColor
#fff
.pf-c-tile--pf-c-tile--before--BorderColorc_tile_before_BorderColor
#d2d2d2
.pf-c-tile--pf-c-tile--before--BorderWidthc_tile_before_BorderWidth
1px
.pf-c-tile--pf-c-tile--before--BorderRadiusc_tile_before_BorderRadius
3px
.pf-c-tile--pf-c-tile--hover--before--BorderColorc_tile_hover_before_BorderColor
#06c
.pf-c-tile--pf-c-tile--m-selected--before--BorderWidthc_tile_m_selected_before_BorderWidth
2px
.pf-c-tile--pf-c-tile--m-selected--before--BorderColorc_tile_m_selected_before_BorderColor
#06c
.pf-c-tile--pf-c-tile--focus--before--BorderWidthc_tile_focus_before_BorderWidth
2px
.pf-c-tile--pf-c-tile--focus--before--BorderColorc_tile_focus_before_BorderColor
#06c
.pf-c-tile--pf-c-tile--m-disabled--BackgroundColorc_tile_m_disabled_BackgroundColor
#f0f0f0
.pf-c-tile--pf-c-tile__title--Colorc_tile__title_Color
#151515
.pf-c-tile--pf-c-tile--hover__title--Colorc_tile_hover__title_Color
#06c
.pf-c-tile--pf-c-tile--m-selected__title--Colorc_tile_m_selected__title_Color
#06c
.pf-c-tile--pf-c-tile--focus__title--Colorc_tile_focus__title_Color
#06c
.pf-c-tile--pf-c-tile--m-disabled__title--Colorc_tile_m_disabled__title_Color
#6a6e73
.pf-c-tile--pf-c-tile__icon--MarginRightc_tile__icon_MarginRight
0.5rem
.pf-c-tile--pf-c-tile__icon--FontSizec_tile__icon_FontSize
1.125rem
.pf-c-tile--pf-c-tile__icon--Colorc_tile__icon_Color
#151515
.pf-c-tile--pf-c-tile--hover__icon--Colorc_tile_hover__icon_Color
#06c
.pf-c-tile--pf-c-tile--m-selected__icon--Colorc_tile_m_selected__icon_Color
#06c
.pf-c-tile--pf-c-tile--m-disabled__icon--Colorc_tile_m_disabled__icon_Color
#6a6e73
.pf-c-tile--pf-c-tile--focus__icon--Colorc_tile_focus__icon_Color
#06c
.pf-c-tile--pf-c-tile__header--m-stacked__icon--MarginBottomc_tile__header_m_stacked__icon_MarginBottom
0.25rem
.pf-c-tile--pf-c-tile__header--m-stacked__icon--FontSizec_tile__header_m_stacked__icon_FontSize
1.5rem
.pf-c-tile--pf-c-tile--m-display-lg__header--m-stacked__icon--FontSizec_tile_m_display_lg__header_m_stacked__icon_FontSize
3.375rem
.pf-c-tile--pf-c-tile__body--Colorc_tile__body_Color
#151515
.pf-c-tile--pf-c-tile__body--FontSizec_tile__body_FontSize
0.75rem
.pf-c-tile--pf-c-tile--m-disabled__body--Colorc_tile_m_disabled__body_Color
#6a6e73
.pf-c-tile:hover--pf-c-tile__title--Colorc_tile__title_Color
#06c
.pf-c-tile:hover--pf-c-tile__icon--Colorc_tile__icon_Color
#06c
.pf-c-tile:hover--pf-c-tile--before--BorderColorc_tile_before_BorderColor
#06c
.pf-c-tile.pf-m-selected--pf-c-tile__title--Colorc_tile__title_Color
#06c
.pf-c-tile.pf-m-selected--pf-c-tile__icon--Colorc_tile__icon_Color
#06c
.pf-c-tile.pf-m-selected--pf-c-tile--before--BorderWidthc_tile_before_BorderWidth
2px
.pf-c-tile.pf-m-selected--pf-c-tile--before--BorderColorc_tile_before_BorderColor
#06c
.pf-c-tile:focus--pf-c-tile__title--Colorc_tile__title_Color
#06c
.pf-c-tile:focus--pf-c-tile__icon--Colorc_tile__icon_Color
#06c
.pf-c-tile:focus--pf-c-tile--before--BorderWidthc_tile_before_BorderWidth
2px
.pf-c-tile:focus--pf-c-tile--before--BorderColorc_tile_before_BorderColor
#06c
.pf-c-tile.pf-m-disabled--pf-c-tile--BackgroundColorc_tile_BackgroundColor
#f0f0f0
.pf-c-tile.pf-m-disabled--pf-c-tile__title--Colorc_tile__title_Color
#6a6e73
.pf-c-tile.pf-m-disabled--pf-c-tile__body--Colorc_tile__body_Color
#6a6e73
.pf-c-tile.pf-m-disabled--pf-c-tile--before--BorderWidthc_tile_before_BorderWidth
0
.pf-c-tile.pf-m-disabled--pf-c-tile__icon--Colorc_tile__icon_Color
#6a6e73
.pf-c-tile.pf-m-display-lg .pf-c-tile__header.pf-m-stacked--pf-c-tile__icon--FontSizec_tile__icon_FontSize
3.375rem
.pf-c-tile__header.pf-m-stacked--pf-c-tile__icon--MarginRightc_tile__icon_MarginRight
0
.pf-c-tile__header.pf-m-stacked--pf-c-tile__icon--FontSizec_tile__icon_FontSize
1.5rem