Skip to content
Patternfly Logo

Tile

Info alert:Beta feature

This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack.

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

.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