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


PatternFly logo
Default
Subtext goes here
PatternFly logo
Selected
Subtext goes here
PatternFly logo
Disabled
Subtext goes here

Stacked tiles large

Default
Subtext goes here
Selected
Subtext goes here
Disabled
Subtext goes here


PatternFly logo
Default
Subtext goes here
PatternFly logo
Selected
Subtext goes here
PatternFly logo
Disabled
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

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--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--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
#6a6e73
.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__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__header--m-stacked__icon--Colorc_tile__header_m_stacked__icon_Color
#151515
.pf-c-tile--pf-c-tile--hover__header--m-stacked__icon--Colorc_tile_hover__header_m_stacked__icon_Color
#06c
.pf-c-tile--pf-c-tile--m-selected__header--m-stacked__icon--Colorc_tile_m_selected__header_m_stacked__icon_Color
#06c
.pf-c-tile--pf-c-tile--m-disabled__header--m-stacked__icon--Colorc_tile_m_disabled__header_m_stacked__icon_Color
#6a6e73
.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--m-display-lg__header--m-stacked__icon--Widthc_tile_m_display_lg__header_m_stacked__icon_Width
3.375rem
.pf-c-tile--pf-c-tile--m-display-lg__header--m-stacked__icon--Heightc_tile_m_display_lg__header_m_stacked__icon_Height
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:hover .pf-c-tile__header.pf-m-stacked .pf-c-tile__icon--pf-c-tile__icon--Colorc_tile__icon_Color
#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.pf-m-selected--pf-c-tile__header--m-stacked__icon--Colorc_tile__header_m_stacked__icon_Color
#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-disabled--pf-c-tile__header--m-stacked__icon--Colorc_tile__header_m_stacked__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
.pf-c-tile__header.pf-m-stacked--pf-c-tile__icon--Colorc_tile__icon_Color
#151515