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 about the process, visit our about page or our Beta components page on GitHub.

Examples

Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the Demo section.

Basic

With subtext

With icon

Stacked

Stacked with large icons

With extra content

Props

Tile

*required
Name	Type	Description
titlerequired	string	Title of the tile
children	React.ReactNode	Content rendered inside the banner
className	string	Additional classes added to the banner
icon	React.ReactNode	Icon in the tile title
isDisabled	boolean	Flag indicating if the tile is disabled
isDisplayLarge	boolean	Flag indicating if the stacked tile icon is large
isSelected	boolean	Flag indicating if the tile is selected
isStacked	boolean	Flag indicating if the tile header is stacked

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