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.

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 reallyreally 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

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoContent rendered inside the banner
classNamestringNoAdditional classes added to the banner
iconReact.ReactNodeNoIcon in the tile title
isDisabledbooleanNoFlag indicating if the tile is disabled
isDisplayLargebooleanNoFlag indicating if the stacked tile icon is large
isSelectedbooleanNoFlag indicating if the tile is selected
isStackedbooleanNoFlag indicating if the tile header is stacked
titlestringYesTitle of the tile

CSS variables

.pf-c-tile--pf-c-tile--PaddingTop
1.5rem
.pf-c-tile--pf-c-tile--PaddingRight
1.5rem
.pf-c-tile--pf-c-tile--PaddingBottom
1.5rem
.pf-c-tile--pf-c-tile--PaddingLeft
1.5rem
.pf-c-tile--pf-c-tile--BackgroundColor
#fff
.pf-c-tile--pf-c-tile--before--BorderColor
#d2d2d2
.pf-c-tile--pf-c-tile--before--BorderWidth
1px
.pf-c-tile--pf-c-tile--before--BorderRadius
3px
.pf-c-tile--pf-c-tile--hover--before--BorderColor
#06c
.pf-c-tile--pf-c-tile--m-selected--before--BorderWidth
2px
.pf-c-tile--pf-c-tile--m-selected--before--BorderColor
#06c
.pf-c-tile--pf-c-tile--focus--before--BorderWidth
2px
.pf-c-tile--pf-c-tile--focus--before--BorderColor
#06c
.pf-c-tile--pf-c-tile--m-disabled--BackgroundColor
#f0f0f0
.pf-c-tile--pf-c-tile__title--Color
#151515
.pf-c-tile--pf-c-tile--hover__title--Color
#06c
.pf-c-tile--pf-c-tile--m-selected__title--Color
#06c
.pf-c-tile--pf-c-tile--focus__title--Color
#06c
.pf-c-tile--pf-c-tile--m-disabled__title--Color
#6a6e73
.pf-c-tile--pf-c-tile__icon--MarginRight
0.5rem
.pf-c-tile--pf-c-tile__icon--FontSize
1.125rem
.pf-c-tile--pf-c-tile__icon--Color
#151515
.pf-c-tile--pf-c-tile--hover__icon--Color
#06c
.pf-c-tile--pf-c-tile--m-selected__icon--Color
#06c
.pf-c-tile--pf-c-tile--m-disabled__icon--Color
#6a6e73
.pf-c-tile--pf-c-tile--focus__icon--Color
#06c
.pf-c-tile--pf-c-tile__header--m-stacked__icon--MarginBottom
0.25rem
.pf-c-tile--pf-c-tile__header--m-stacked__icon--FontSize
1.5rem
.pf-c-tile--pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize
3.375rem
.pf-c-tile--pf-c-tile__body--Color
#151515
.pf-c-tile--pf-c-tile__body--FontSize
0.75rem
.pf-c-tile--pf-c-tile--m-disabled__body--Color
#6a6e73
.pf-c-tile:hover--pf-c-tile__title--Color
#06c
.pf-c-tile:hover--pf-c-tile__icon--Color
#06c
.pf-c-tile:hover--pf-c-tile--before--BorderColor
#06c
.pf-c-tile.pf-m-selected--pf-c-tile__title--Color
#06c
.pf-c-tile.pf-m-selected--pf-c-tile__icon--Color
#06c
.pf-c-tile.pf-m-selected--pf-c-tile--before--BorderWidth
2px
.pf-c-tile.pf-m-selected--pf-c-tile--before--BorderColor
#06c
.pf-c-tile:focus--pf-c-tile__title--Color
#06c
.pf-c-tile:focus--pf-c-tile__icon--Color
#06c
.pf-c-tile:focus--pf-c-tile--before--BorderWidth
2px
.pf-c-tile:focus--pf-c-tile--before--BorderColor
#06c
.pf-c-tile.pf-m-disabled--pf-c-tile--BackgroundColor
#f0f0f0
.pf-c-tile.pf-m-disabled--pf-c-tile__title--Color
#6a6e73
.pf-c-tile.pf-m-disabled--pf-c-tile__body--Color
#6a6e73
.pf-c-tile.pf-m-disabled--pf-c-tile--before--BorderWidth
0
.pf-c-tile.pf-m-disabled--pf-c-tile__icon--Color
#6a6e73
.pf-c-tile.pf-m-display-lg .pf-c-tile__header.pf-m-stacked--pf-c-tile__icon--FontSize
3.375rem
.pf-c-tile__header.pf-m-stacked--pf-c-tile__icon--MarginRight
0
.pf-c-tile__header.pf-m-stacked--pf-c-tile__icon--FontSize
1.5rem

View source on GitHub