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.

Examples

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

Basic

With subtext

Subtext goes here

With icon

Subtext goes here

Stacked

Subtext goes here

Stacked with large icons

Subtext goes here

With 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 reallyreally 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

Props

Tile

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

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--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--before--BorderRadius	3px
--pf-c-tile--before--BorderRadius --pf-global--BorderRadius--sm $pf-global--BorderRadius--sm 3px
	.pf-c-tile	--pf-c-tile--hover--before--BorderColor	#06c
--pf-c-tile--hover--before--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-tile	--pf-c-tile--m-selected--before--BorderWidth	2px
--pf-c-tile--m-selected--before--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-tile	--pf-c-tile--m-selected--before--BorderColor	#06c
--pf-c-tile--m-selected--before--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-tile	--pf-c-tile--focus--before--BorderWidth	2px
--pf-c-tile--focus--before--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-tile	--pf-c-tile--focus--before--BorderColor	#06c
--pf-c-tile--focus--before--BorderColor --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__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--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--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--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-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__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--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--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-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--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__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	--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--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: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--before--BorderColor	#06c
--pf-c-tile--before--BorderColor --pf-c-tile--hover--before--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-tile.pf-m-selected	--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.pf-m-selected	--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.pf-m-selected	--pf-c-tile--before--BorderWidth	2px
--pf-c-tile--before--BorderWidth --pf-c-tile--m-selected--before--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-tile.pf-m-selected	--pf-c-tile--before--BorderColor	#06c
--pf-c-tile--before--BorderColor --pf-c-tile--m-selected--before--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.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--before--BorderWidth	2px
--pf-c-tile--before--BorderWidth --pf-c-tile--focus--before--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-tile:focus	--pf-c-tile--before--BorderColor	#06c
--pf-c-tile--before--BorderColor --pf-c-tile--focus--before--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.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