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. Learn more about Beta components here.

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--Transition
none
.pf-c-tile--pf-c-tile--TranslateY
0
.pf-c-tile--pf-c-tile--before--BorderColor
#d2d2d2
.pf-c-tile--pf-c-tile--before--BorderWidth
1px
.pf-c-tile--pf-c-tile--after--Height
3px
.pf-c-tile--pf-c-tile--after--BackgroundColor
transparent
.pf-c-tile--pf-c-tile--after--Transition
none
.pf-c-tile--pf-c-tile--after--ScaleY
1
.pf-c-tile--pf-c-tile--after--TranslateY
0
.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__title--Color
#151515
.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--hover--after--BackgroundColor
#73bcf7
.pf-c-tile--pf-c-tile--hover__icon--Color
#06c
.pf-c-tile--pf-c-tile--hover__title--Color
#06c
.pf-c-tile--pf-c-tile--focus--after--BackgroundColor
#73bcf7
.pf-c-tile--pf-c-tile--focus__icon--Color
#06c
.pf-c-tile--pf-c-tile--focus__title--Color
#06c
.pf-c-tile--pf-c-tile--m-selected--TranslateY
calc(-1 * 2 * 3px)
.pf-c-tile--pf-c-tile--m-selected--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-c-tile--pf-c-tile--m-selected--after--Height
3px
.pf-c-tile--pf-c-tile--m-selected--after--BackgroundColor
#06c
.pf-c-tile--pf-c-tile--m-selected--after--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-c-tile--pf-c-tile--m-selected--after--ScaleY
2
.pf-c-tile--pf-c-tile--m-selected__icon--Color
#06c
.pf-c-tile--pf-c-tile--m-selected__title--Color
#06c
.pf-c-tile--pf-c-tile--m-disabled--BackgroundColor
#f0f0f0
.pf-c-tile--pf-c-tile--m-disabled__icon--Color
#6a6e73
.pf-c-tile--pf-c-tile--m-disabled__title--Color
#6a6e73
.pf-c-tile--pf-c-tile--m-disabled__body--Color
#6a6e73
.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:hover--pf-c-tile__title--Color
#06c
.pf-c-tile:hover--pf-c-tile__icon--Color
#06c
.pf-c-tile:hover--pf-c-tile--after--BackgroundColor
#73bcf7
.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--after--BackgroundColor
#73bcf7
.pf-c-tile:active--pf-c-tile__title--Color
#06c
.pf-c-tile:active--pf-c-tile__icon--Color
#06c
.pf-c-tile:active--pf-c-tile--TranslateY
calc(-1 * 2 * 3px)
.pf-c-tile:active--pf-c-tile--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-c-tile:active--pf-c-tile--after--Height
3px
.pf-c-tile:active--pf-c-tile--after--BackgroundColor
#06c
.pf-c-tile:active--pf-c-tile--after--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-c-tile:active--pf-c-tile--after--ScaleY
2
.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