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. To learn more go to our Beta components page on GitHub.

Examples

Basic tiles Beta

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-c-tile
Inserts the tile into the tab order of the page so that it is focusable. Required
tabindex="-1"
.pf-c-tile
Removes the tile from keyboard focus when it is disabled.

Usage

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

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