Tile

A tile is a container that allows users to select a static option.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-tile	--pf-v6-c-tile--PaddingBlockStart	1.5rem
--pf-v6-c-tile--PaddingBlockStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-tile	--pf-v6-c-tile--PaddingInlineEnd	1.5rem
--pf-v6-c-tile--PaddingInlineEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-tile	--pf-v6-c-tile--PaddingBlockEnd	1.5rem
--pf-v6-c-tile--PaddingBlockEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-tile	--pf-v6-c-tile--PaddingInlineStart	1.5rem
--pf-v6-c-tile--PaddingInlineStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-tile	--pf-v6-c-tile--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-tile--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-tile	--pf-v6-c-tile--BorderRadius	16px
--pf-v6-c-tile--BorderRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-tile	--pf-v6-c-tile--before--BorderColor	(In light theme) #e0e0e0
--pf-v6-c-tile--before--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--50 --pf-t--color--gray--20 #e0e0e0
	.pf-v6-c-tile	--pf-v6-c-tile--before--BorderWidth	1px
--pf-v6-c-tile--before--BorderWidth --pf-t--global--border--width--box--default --pf-t--global--border--width--100 1px
	.pf-v6-c-tile	--pf-v6-c-tile--before--BorderRadius	16px
--pf-v6-c-tile--before--BorderRadius --pf-v6-c-tile--BorderRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-tile	--pf-v6-c-tile--after--BackgroundColor	transparent
	.pf-v6-c-tile	--pf-v6-c-tile__icon--MarginInlineEnd	0.5rem
--pf-v6-c-tile__icon--MarginInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-tile	--pf-v6-c-tile__icon--FontSize	0.875rem
--pf-v6-c-tile__icon--FontSize --pf-t--global--icon--size--font--body--default --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-tile	--pf-v6-c-tile__icon--Color	(In light theme) #1f1f1f
--pf-v6-c-tile__icon--Color --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-tile	--pf-v6-c-tile__title--Color	(In light theme) #151515
--pf-v6-c-tile__title--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-tile	--pf-v6-c-tile__title--FontWeight	600
--pf-v6-c-tile__title--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 600
	.pf-v6-c-tile	--pf-v6-c-tile__body--Color	(In light theme) #151515
--pf-v6-c-tile__body--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-tile	--pf-v6-c-tile__body--FontSize	0.75rem
--pf-v6-c-tile__body--FontSize --pf-t--global--font--size--body--sm --pf-t--global--font--size--xs --pf-t--global--font--size--100 0.75rem
	.pf-v6-c-tile	--pf-v6-c-tile--hover--before--BorderColor	(In light theme) #4394e5
--pf-v6-c-tile--hover--before--BorderColor --pf-t--global--border--color--hover --pf-t--global--color--brand--100 --pf-t--color--blue--40 #4394e5
	.pf-v6-c-tile	--pf-v6-c-tile--m-selected--before--BorderColor	(In light theme) #0066cc
--pf-v6-c-tile--m-selected--before--BorderColor --pf-t--global--border--color--clicked --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-tile	--pf-v6-c-tile--m-selected--before--BorderWidth	3px
--pf-v6-c-tile--m-selected--before--BorderWidth --pf-t--global--border--width--box--clicked --pf-t--global--border--width--300 3px
	.pf-v6-c-tile	--pf-v6-c-tile--m-disabled--BackgroundColor	(In light theme) #c7c7c7
--pf-v6-c-tile--m-disabled--BackgroundColor --pf-t--global--background--color--disabled--default --pf-t--global--color--disabled--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-tile	--pf-v6-c-tile--m-disabled__title--Color	(In light theme) #707070
--pf-v6-c-tile--m-disabled__title--Color --pf-t--global--text--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--50 #707070
	.pf-v6-c-tile	--pf-v6-c-tile--m-disabled__icon--Color	(In light theme) #707070
--pf-v6-c-tile--m-disabled__icon--Color --pf-t--global--icon--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--50 #707070
	.pf-v6-c-tile	--pf-v6-c-tile--m-disabled__body--Color	(In light theme) #707070
--pf-v6-c-tile--m-disabled__body--Color --pf-t--global--text--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--50 #707070
	.pf-v6-c-tile	--pf-v6-c-tile__header--m-stacked__icon--MarginBlockEnd	1rem
--pf-v6-c-tile__header--m-stacked__icon--MarginBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-tile	--pf-v6-c-tile__header--m-stacked__icon--FontSize	1.5rem
--pf-v6-c-tile__header--m-stacked__icon--FontSize --pf-t--global--icon--size--xl --pf-t--global--icon--size--300 1.5rem
	.pf-v6-c-tile	--pf-v6-c-tile--m-display-lg__header--m-stacked__icon--FontSize	3.5rem
--pf-v6-c-tile--m-display-lg__header--m-stacked__icon--FontSize --pf-t--global--icon--size--2xl --pf-t--global--icon--size--400 3.5rem
	.pf-v6-c-tile:hover	--pf-v6-c-tile--before--BorderColor	(In light theme) #4394e5
--pf-v6-c-tile--before--BorderColor --pf-v6-c-tile--hover--before--BorderColor --pf-t--global--border--color--hover --pf-t--global--color--brand--100 --pf-t--color--blue--40 #4394e5
	.pf-v6-c-tile.pf-m-selected	--pf-v6-c-tile--before--BorderColor	(In light theme) #0066cc
--pf-v6-c-tile--before--BorderColor --pf-v6-c-tile--m-selected--before--BorderColor --pf-t--global--border--color--clicked --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-tile.pf-m-selected	--pf-v6-c-tile--before--BorderWidth	3px
--pf-v6-c-tile--before--BorderWidth --pf-v6-c-tile--m-selected--before--BorderWidth --pf-t--global--border--width--box--clicked --pf-t--global--border--width--300 3px
	.pf-v6-c-tile.pf-m-disabled	--pf-v6-c-tile--BackgroundColor	(In light theme) #c7c7c7
--pf-v6-c-tile--BackgroundColor --pf-v6-c-tile--m-disabled--BackgroundColor --pf-t--global--background--color--disabled--default --pf-t--global--color--disabled--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-tile.pf-m-disabled	--pf-v6-c-tile__title--Color	(In light theme) #707070
--pf-v6-c-tile__title--Color --pf-v6-c-tile--m-disabled__title--Color --pf-t--global--text--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--50 #707070
	.pf-v6-c-tile.pf-m-disabled	--pf-v6-c-tile__icon--Color	(In light theme) #707070
--pf-v6-c-tile__icon--Color --pf-v6-c-tile--m-disabled__icon--Color --pf-t--global--icon--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--50 #707070
	.pf-v6-c-tile.pf-m-disabled	--pf-v6-c-tile__body--Color	(In light theme) #707070
--pf-v6-c-tile__body--Color --pf-v6-c-tile--m-disabled__body--Color --pf-t--global--text--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--50 #707070
	.pf-v6-c-tile.pf-m-disabled	--pf-v6-c-tile--before--BorderWidth	0
	.pf-v6-c-tile.pf-m-display-lg .pf-v6-c-tile__header.pf-m-stacked	--pf-v6-c-tile__icon--FontSize	3.5rem
--pf-v6-c-tile__icon--FontSize --pf-v6-c-tile--m-display-lg__header--m-stacked__icon--FontSize --pf-t--global--icon--size--2xl --pf-t--global--icon--size--400 3.5rem
	.pf-v6-c-tile__header.pf-m-stacked	--pf-v6-c-tile__icon--MarginInlineEnd	0
	.pf-v6-c-tile__header.pf-m-stacked	--pf-v6-c-tile__icon--FontSize	1.5rem
--pf-v6-c-tile__icon--FontSize --pf-v6-c-tile__header--m-stacked__icon--FontSize --pf-t--global--icon--size--xl --pf-t--global--icon--size--300 1.5rem