Tile

A tile component is a form of selection that can be used in place of a radio button and is commonly used in forms. A tile appears visually similar to a selectable card. However, tiles are used specifically when the user is selecting a static option, whereas a selectable card triggers an action or opens a quickstart or sidebar to provide additional information.

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

Subtext goes here

Stacked tiles

Subtext goes here

Stacked tiles large

Subtext goes here

Extra content

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.

This is really really long subtext that goes on for so long that it has to wrap to the next line.

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--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-tile	--pf-c-tile--PaddingRight	1.5rem
--pf-c-tile--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-tile	--pf-c-tile--PaddingBottom	1.5rem
--pf-c-tile--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-tile	--pf-c-tile--PaddingLeft	1.5rem
--pf-c-tile--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-tile	--pf-c-tile--BackgroundColor	#fff
--pf-c-tile--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #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--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-tile	--pf-c-tile--before--BorderWidth	1px
--pf-c-tile--before--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-tile	--pf-c-tile--after--Height	3px
--pf-c-tile--after--Height --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 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__icon--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-tile	--pf-c-tile__icon--FontSize	1.125rem
--pf-c-tile__icon--FontSize --pf-global--icon--FontSize--md $pf-global--icon--FontSize--md pf-font-prem(18px) 1.125rem
	.pf-c-tile	--pf-c-tile__icon--Color	#151515
--pf-c-tile__icon--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-tile	--pf-c-tile__title--Color	#151515
--pf-c-tile__title--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-tile	--pf-c-tile__body--Color	#151515
--pf-c-tile__body--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-tile	--pf-c-tile__body--FontSize	0.75rem
--pf-c-tile__body--FontSize --pf-global--FontSize--xs $pf-global--FontSize--xs pf-font-prem(12px) 0.75rem
	.pf-c-tile	--pf-c-tile--hover--after--BackgroundColor	#73bcf7
--pf-c-tile--hover--after--BackgroundColor --pf-global--active-color--400 $pf-global--active-color--400 $pf-color-blue-200 #73bcf7
	.pf-c-tile	--pf-c-tile--hover__icon--Color	#06c
--pf-c-tile--hover__icon--Color --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-tile	--pf-c-tile--hover__title--Color	#06c
--pf-c-tile--hover__title--Color --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-tile	--pf-c-tile--focus--after--BackgroundColor	#73bcf7
--pf-c-tile--focus--after--BackgroundColor --pf-global--active-color--400 $pf-global--active-color--400 $pf-color-blue-200 #73bcf7
	.pf-c-tile	--pf-c-tile--focus__icon--Color	#06c
--pf-c-tile--focus__icon--Color --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-tile	--pf-c-tile--focus__title--Color	#06c
--pf-c-tile--focus__title--Color --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-tile	--pf-c-tile--m-selected--TranslateY	calc(-1 * 2 * 3px)
--pf-c-tile--m-selected--TranslateY calc(-1 * --pf-c-tile--m-selected--after--ScaleY * --pf-c-tile--m-selected--after--Height) calc(-1 * 2 * --pf-global--BorderWidth--lg) calc(-1 * 2 * $pf-global--BorderWidth--lg) calc(-1 * 2 * 3px)
	.pf-c-tile	--pf-c-tile--m-selected--Transition	all 250ms cubic-bezier(.42, 0, .58, 1)
--pf-c-tile--m-selected--Transition --pf-global--Transition $pf-global--Transition all 250ms cubic-bezier(.42, 0, .58, 1)
	.pf-c-tile	--pf-c-tile--m-selected--after--Height	3px
--pf-c-tile--m-selected--after--Height --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-tile	--pf-c-tile--m-selected--after--BackgroundColor	#06c
--pf-c-tile--m-selected--after--BackgroundColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-tile	--pf-c-tile--m-selected--after--Transition	all 250ms cubic-bezier(.42, 0, .58, 1)
--pf-c-tile--m-selected--after--Transition --pf-global--Transition $pf-global--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--m-selected__icon--Color --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-tile	--pf-c-tile--m-selected__title--Color	#06c
--pf-c-tile--m-selected__title--Color --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-tile	--pf-c-tile--m-disabled--BackgroundColor	#f0f0f0
--pf-c-tile--m-disabled--BackgroundColor --pf-global--disabled-color--300 $pf-global--disabled-color--300 $pf-color-black-200 #f0f0f0
	.pf-c-tile	--pf-c-tile--m-disabled__icon--Color	#6a6e73
--pf-c-tile--m-disabled__icon--Color --pf-global--disabled-color--100 $pf-global--disabled-color--100 $pf-color-black-600 #6a6e73
	.pf-c-tile	--pf-c-tile--m-disabled__title--Color	#6a6e73
--pf-c-tile--m-disabled__title--Color --pf-global--disabled-color--100 $pf-global--disabled-color--100 $pf-color-black-600 #6a6e73
	.pf-c-tile	--pf-c-tile--m-disabled__body--Color	#6a6e73
--pf-c-tile--m-disabled__body--Color --pf-global--disabled-color--100 $pf-global--disabled-color--100 $pf-color-black-600 #6a6e73
	.pf-c-tile	--pf-c-tile__header--m-stacked__icon--MarginBottom	0.25rem
--pf-c-tile__header--m-stacked__icon--MarginBottom --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-tile	--pf-c-tile__header--m-stacked__icon--FontSize	1.5rem
--pf-c-tile__header--m-stacked__icon--FontSize --pf-global--icon--FontSize--lg $pf-global--icon--FontSize--lg pf-font-prem(24px) 1.5rem
	.pf-c-tile	--pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize	3.375rem
--pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize --pf-global--icon--FontSize--xl $pf-global--icon--FontSize--xl pf-font-prem(54px) 3.375rem
	.pf-c-tile:hover	--pf-c-tile__title--Color	#06c
--pf-c-tile__title--Color --pf-c-tile--hover__title--Color --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-tile:hover	--pf-c-tile__icon--Color	#06c
--pf-c-tile__icon--Color --pf-c-tile--hover__icon--Color --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-tile:hover	--pf-c-tile--after--BackgroundColor	#73bcf7
--pf-c-tile--after--BackgroundColor --pf-c-tile--hover--after--BackgroundColor --pf-global--active-color--400 $pf-global--active-color--400 $pf-color-blue-200 #73bcf7
	.pf-c-tile:focus	--pf-c-tile__title--Color	#06c
--pf-c-tile__title--Color --pf-c-tile--focus__title--Color --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-tile:focus	--pf-c-tile__icon--Color	#06c
--pf-c-tile__icon--Color --pf-c-tile--focus__icon--Color --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-tile:focus	--pf-c-tile--after--BackgroundColor	#73bcf7
--pf-c-tile--after--BackgroundColor --pf-c-tile--focus--after--BackgroundColor --pf-global--active-color--400 $pf-global--active-color--400 $pf-color-blue-200 #73bcf7
	.pf-c-tile:active	--pf-c-tile__title--Color	#06c
--pf-c-tile__title--Color --pf-c-tile--m-selected__title--Color --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-tile:active	--pf-c-tile__icon--Color	#06c
--pf-c-tile__icon--Color --pf-c-tile--m-selected__icon--Color --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-tile:active	--pf-c-tile--TranslateY	calc(-1 * 2 * 3px)
--pf-c-tile--TranslateY --pf-c-tile--m-selected--TranslateY calc(-1 * --pf-c-tile--m-selected--after--ScaleY * --pf-c-tile--m-selected--after--Height) calc(-1 * 2 * --pf-global--BorderWidth--lg) calc(-1 * 2 * $pf-global--BorderWidth--lg) calc(-1 * 2 * 3px)
	.pf-c-tile:active	--pf-c-tile--Transition	all 250ms cubic-bezier(.42, 0, .58, 1)
--pf-c-tile--Transition --pf-c-tile--m-selected--Transition --pf-global--Transition $pf-global--Transition all 250ms cubic-bezier(.42, 0, .58, 1)
	.pf-c-tile:active	--pf-c-tile--after--Height	3px
--pf-c-tile--after--Height --pf-c-tile--m-selected--after--Height --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-tile:active	--pf-c-tile--after--BackgroundColor	#06c
--pf-c-tile--after--BackgroundColor --pf-c-tile--m-selected--after--BackgroundColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-tile:active	--pf-c-tile--after--Transition	all 250ms cubic-bezier(.42, 0, .58, 1)
--pf-c-tile--after--Transition --pf-c-tile--m-selected--after--Transition --pf-global--Transition $pf-global--Transition all 250ms cubic-bezier(.42, 0, .58, 1)
	.pf-c-tile:active	--pf-c-tile--after--ScaleY	2
--pf-c-tile--after--ScaleY --pf-c-tile--m-selected--after--ScaleY 2
	.pf-c-tile.pf-m-disabled	--pf-c-tile--BackgroundColor	#f0f0f0
--pf-c-tile--BackgroundColor --pf-c-tile--m-disabled--BackgroundColor --pf-global--disabled-color--300 $pf-global--disabled-color--300 $pf-color-black-200 #f0f0f0
	.pf-c-tile.pf-m-disabled	--pf-c-tile__title--Color	#6a6e73
--pf-c-tile__title--Color --pf-c-tile--m-disabled__title--Color --pf-global--disabled-color--100 $pf-global--disabled-color--100 $pf-color-black-600 #6a6e73
	.pf-c-tile.pf-m-disabled	--pf-c-tile__body--Color	#6a6e73
--pf-c-tile__body--Color --pf-c-tile--m-disabled__body--Color --pf-global--disabled-color--100 $pf-global--disabled-color--100 $pf-color-black-600 #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__icon--Color --pf-c-tile--m-disabled__icon--Color --pf-global--disabled-color--100 $pf-global--disabled-color--100 $pf-color-black-600 #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__icon--FontSize --pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize --pf-global--icon--FontSize--xl $pf-global--icon--FontSize--xl pf-font-prem(54px) 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
--pf-c-tile__icon--FontSize --pf-c-tile__header--m-stacked__icon--FontSize --pf-global--icon--FontSize--lg $pf-global--icon--FontSize--lg pf-font-prem(24px) 1.5rem

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines