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

Basic tiles

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