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

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

AttributeApplied toOutcome
tabindex="0".pf-c-tileInserts the tile into the tab order of the page so that it is focusable. Required
tabindex="-1"pf-c-tileRemoves the tile from keyboard focus when it is disabled.

Usage

ClassApplied toOutcome
.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-tileModifies the tile for the selected state.
.pf-m-disabled.pf-c-tileModifies the tile for the disabled state.
.pf-m-stacked.pf-c-tile__headerModifies the tile header to be stacked vertically.
.pf-m-display-lg.pf-c-tileModifies the tile to have large display styling.

CSS Variables

.pf-c-tile--pf-c-tile--PaddingTopc_tile_PaddingTop
1.5rem
.pf-c-tile--pf-c-tile--PaddingRightc_tile_PaddingRight
1.5rem
.pf-c-tile--pf-c-tile--PaddingBottomc_tile_PaddingBottom
1.5rem
.pf-c-tile--pf-c-tile--PaddingLeftc_tile_PaddingLeft
1.5rem
.pf-c-tile--pf-c-tile--BackgroundColorc_tile_BackgroundColor
#fff
.pf-c-tile--pf-c-tile--before--BorderColorc_tile_before_BorderColor
#d2d2d2
.pf-c-tile--pf-c-tile--before--BorderWidthc_tile_before_BorderWidth
1px
.pf-c-tile--pf-c-tile--before--BorderRadiusc_tile_before_BorderRadius
3px
.pf-c-tile--pf-c-tile--hover--before--BorderColorc_tile_hover_before_BorderColor
#06c
.pf-c-tile--pf-c-tile--m-selected--before--BorderWidthc_tile_m_selected_before_BorderWidth
2px
.pf-c-tile--pf-c-tile--m-selected--before--BorderColorc_tile_m_selected_before_BorderColor
#06c
.pf-c-tile--pf-c-tile--focus--before--BorderWidthc_tile_focus_before_BorderWidth
2px
.pf-c-tile--pf-c-tile--focus--before--BorderColorc_tile_focus_before_BorderColor
#06c
.pf-c-tile--pf-c-tile--m-disabled--BackgroundColorc_tile_m_disabled_BackgroundColor
#f0f0f0
.pf-c-tile--pf-c-tile__title--Colorc_tile__title_Color
#151515
.pf-c-tile--pf-c-tile--hover__title--Colorc_tile_hover__title_Color
#06c
.pf-c-tile--pf-c-tile--m-selected__title--Colorc_tile_m_selected__title_Color
#06c
.pf-c-tile--pf-c-tile--focus__title--Colorc_tile_focus__title_Color
#06c
.pf-c-tile--pf-c-tile--m-disabled__title--Colorc_tile_m_disabled__title_Color
#6a6e73
.pf-c-tile--pf-c-tile__icon--MarginRightc_tile__icon_MarginRight
0.5rem
.pf-c-tile--pf-c-tile__icon--FontSizec_tile__icon_FontSize
1.125rem
.pf-c-tile--pf-c-tile__icon--Colorc_tile__icon_Color
#151515
.pf-c-tile--pf-c-tile--hover__icon--Colorc_tile_hover__icon_Color
#06c
.pf-c-tile--pf-c-tile--m-selected__icon--Colorc_tile_m_selected__icon_Color
#06c
.pf-c-tile--pf-c-tile--m-disabled__icon--Colorc_tile_m_disabled__icon_Color
#6a6e73
.pf-c-tile--pf-c-tile--focus__icon--Colorc_tile_focus__icon_Color
#06c
.pf-c-tile--pf-c-tile__header--m-stacked__icon--MarginBottomc_tile__header_m_stacked__icon_MarginBottom
0.25rem
.pf-c-tile--pf-c-tile__header--m-stacked__icon--FontSizec_tile__header_m_stacked__icon_FontSize
1.5rem
.pf-c-tile--pf-c-tile--m-display-lg__header--m-stacked__icon--FontSizec_tile_m_display_lg__header_m_stacked__icon_FontSize
3.375rem
.pf-c-tile--pf-c-tile__body--Colorc_tile__body_Color
#151515
.pf-c-tile--pf-c-tile__body--FontSizec_tile__body_FontSize
0.75rem
.pf-c-tile--pf-c-tile--m-disabled__body--Colorc_tile_m_disabled__body_Color
#6a6e73
.pf-c-tile:hover--pf-c-tile__title--Colorc_tile__title_Color
#06c
.pf-c-tile:hover--pf-c-tile__icon--Colorc_tile__icon_Color
#06c
.pf-c-tile:hover--pf-c-tile--before--BorderColorc_tile_before_BorderColor
#06c
.pf-c-tile.pf-m-selected--pf-c-tile__title--Colorc_tile__title_Color
#06c
.pf-c-tile.pf-m-selected--pf-c-tile__icon--Colorc_tile__icon_Color
#06c
.pf-c-tile.pf-m-selected--pf-c-tile--before--BorderWidthc_tile_before_BorderWidth
2px
.pf-c-tile.pf-m-selected--pf-c-tile--before--BorderColorc_tile_before_BorderColor
#06c
.pf-c-tile:focus--pf-c-tile__title--Colorc_tile__title_Color
#06c
.pf-c-tile:focus--pf-c-tile__icon--Colorc_tile__icon_Color
#06c
.pf-c-tile:focus--pf-c-tile--before--BorderWidthc_tile_before_BorderWidth
2px
.pf-c-tile:focus--pf-c-tile--before--BorderColorc_tile_before_BorderColor
#06c
.pf-c-tile.pf-m-disabled--pf-c-tile--BackgroundColorc_tile_BackgroundColor
#f0f0f0
.pf-c-tile.pf-m-disabled--pf-c-tile__title--Colorc_tile__title_Color
#6a6e73
.pf-c-tile.pf-m-disabled--pf-c-tile__body--Colorc_tile__body_Color
#6a6e73
.pf-c-tile.pf-m-disabled--pf-c-tile--before--BorderWidthc_tile_before_BorderWidth
0
.pf-c-tile.pf-m-disabled--pf-c-tile__icon--Colorc_tile__icon_Color
#6a6e73
.pf-c-tile.pf-m-display-lg .pf-c-tile__header.pf-m-stacked--pf-c-tile__icon--FontSizec_tile__icon_FontSize
3.375rem
.pf-c-tile__header.pf-m-stacked--pf-c-tile__icon--MarginRightc_tile__icon_MarginRight
0
.pf-c-tile__header.pf-m-stacked--pf-c-tile__icon--FontSizec_tile__icon_FontSize
1.5rem