Examples
Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the Demo section.
Stacked with large icons
Default
Subtext goes here
Selected
Subtext goes here
Disabled
Subtext goes here
With 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.
Selected
This is really really long subtext that goes on for so long that it has to wrap to the next line.
Disabled
Subtext goes here
Props
Tile
Name | Type | Default | 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
Selector | Variable | Value | ||
---|---|---|---|---|
.pf-v5-c-tile | --pf-v5-c-tile--PaddingTop | 1.5rem | ||
--pf-v5-c-tile--PaddingTop --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
.pf-v5-c-tile | --pf-v5-c-tile--PaddingRight | 1.5rem | ||
--pf-v5-c-tile--PaddingRight --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
.pf-v5-c-tile | --pf-v5-c-tile--PaddingBottom | 1.5rem | ||
--pf-v5-c-tile--PaddingBottom --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
.pf-v5-c-tile | --pf-v5-c-tile--PaddingLeft | 1.5rem | ||
--pf-v5-c-tile--PaddingLeft --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
.pf-v5-c-tile | --pf-v5-c-tile--BackgroundColor | #fff | ||
--pf-v5-c-tile--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
.pf-v5-c-tile | --pf-v5-c-tile--Transition | none | ||
.pf-v5-c-tile | --pf-v5-c-tile--TranslateY | 0 | ||
.pf-v5-c-tile | --pf-v5-c-tile--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-tile--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
.pf-v5-c-tile | --pf-v5-c-tile--before--BorderWidth | 1px | ||
--pf-v5-c-tile--before--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
.pf-v5-c-tile | --pf-v5-c-tile--after--Height | 3px | ||
--pf-v5-c-tile--after--Height --pf-v5-global--BorderWidth--lg $pf-v5-global--BorderWidth--lg 3px | ||||
.pf-v5-c-tile | --pf-v5-c-tile--after--BackgroundColor | transparent | ||
.pf-v5-c-tile | --pf-v5-c-tile--after--Transition | none | ||
.pf-v5-c-tile | --pf-v5-c-tile--after--ScaleY | 1 | ||
.pf-v5-c-tile | --pf-v5-c-tile--after--TranslateY | 0 | ||
.pf-v5-c-tile | --pf-v5-c-tile__icon--MarginRight | 0.5rem | ||
--pf-v5-c-tile__icon--MarginRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-tile | --pf-v5-c-tile__icon--FontSize | 1rem | ||
--pf-v5-c-tile__icon--FontSize --pf-v5-global--icon--FontSize--md $pf-v5-global--icon--FontSize--md pf-font-prem(16px) 1rem | ||||
.pf-v5-c-tile | --pf-v5-c-tile__icon--Color | #151515 | ||
--pf-v5-c-tile__icon--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
.pf-v5-c-tile | --pf-v5-c-tile__title--Color | #151515 | ||
--pf-v5-c-tile__title--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
.pf-v5-c-tile | --pf-v5-c-tile__body--Color | #151515 | ||
--pf-v5-c-tile__body--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
.pf-v5-c-tile | --pf-v5-c-tile__body--FontSize | 0.75rem | ||
--pf-v5-c-tile__body--FontSize --pf-v5-global--FontSize--xs $pf-v5-global--FontSize--xs pf-font-prem(12px) 0.75rem | ||||
.pf-v5-c-tile | --pf-v5-c-tile--hover--after--BackgroundColor | #73bcf7 | ||
--pf-v5-c-tile--hover--after--BackgroundColor --pf-v5-global--active-color--400 $pf-v5-global--active-color--400 $pf-v5-color-blue-200 #73bcf7 | ||||
.pf-v5-c-tile | --pf-v5-c-tile--hover__icon--Color | #06c | ||
--pf-v5-c-tile--hover__icon--Color --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
.pf-v5-c-tile | --pf-v5-c-tile--hover__title--Color | #06c | ||
--pf-v5-c-tile--hover__title--Color --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
.pf-v5-c-tile | --pf-v5-c-tile--focus--after--BackgroundColor | #73bcf7 | ||
--pf-v5-c-tile--focus--after--BackgroundColor --pf-v5-global--active-color--400 $pf-v5-global--active-color--400 $pf-v5-color-blue-200 #73bcf7 | ||||
.pf-v5-c-tile | --pf-v5-c-tile--focus__icon--Color | #06c | ||
--pf-v5-c-tile--focus__icon--Color --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
.pf-v5-c-tile | --pf-v5-c-tile--focus__title--Color | #06c | ||
--pf-v5-c-tile--focus__title--Color --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
.pf-v5-c-tile | --pf-v5-c-tile--m-selected--TranslateY | calc(-1 * 2 * 3px) | ||
--pf-v5-c-tile--m-selected--TranslateY calc(-1 * --pf-v5-c-tile--m-selected--after--ScaleY * --pf-v5-c-tile--m-selected--after--Height) calc(-1 * 2 * --pf-v5-global--BorderWidth--lg) calc(-1 * 2 * $pf-v5-global--BorderWidth--lg) calc(-1 * 2 * 3px) | ||||
.pf-v5-c-tile | --pf-v5-c-tile--m-selected--Transition | all 250ms cubic-bezier(.42, 0, .58, 1) | ||
--pf-v5-c-tile--m-selected--Transition --pf-v5-global--Transition $pf-v5-global--Transition all 250ms cubic-bezier(.42, 0, .58, 1) | ||||
.pf-v5-c-tile | --pf-v5-c-tile--m-selected--after--Height | 3px | ||
--pf-v5-c-tile--m-selected--after--Height --pf-v5-global--BorderWidth--lg $pf-v5-global--BorderWidth--lg 3px | ||||
.pf-v5-c-tile | --pf-v5-c-tile--m-selected--after--BackgroundColor | #06c | ||
--pf-v5-c-tile--m-selected--after--BackgroundColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
.pf-v5-c-tile | --pf-v5-c-tile--m-selected--after--Transition | all 250ms cubic-bezier(.42, 0, .58, 1) | ||
--pf-v5-c-tile--m-selected--after--Transition --pf-v5-global--Transition $pf-v5-global--Transition all 250ms cubic-bezier(.42, 0, .58, 1) | ||||
.pf-v5-c-tile | --pf-v5-c-tile--m-selected--after--ScaleY | 2 | ||
.pf-v5-c-tile | --pf-v5-c-tile--m-selected__icon--Color | #06c | ||
--pf-v5-c-tile--m-selected__icon--Color --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
.pf-v5-c-tile | --pf-v5-c-tile--m-selected__title--Color | #06c | ||
--pf-v5-c-tile--m-selected__title--Color --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
.pf-v5-c-tile | --pf-v5-c-tile--m-disabled--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-tile--m-disabled--BackgroundColor --pf-v5-global--disabled-color--300 $pf-v5-global--disabled-color--300 $pf-v5-color-black-200 #f0f0f0 | ||||
.pf-v5-c-tile | --pf-v5-c-tile--m-disabled__icon--Color | #6a6e73 | ||
--pf-v5-c-tile--m-disabled__icon--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
.pf-v5-c-tile | --pf-v5-c-tile--m-disabled__title--Color | #6a6e73 | ||
--pf-v5-c-tile--m-disabled__title--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
.pf-v5-c-tile | --pf-v5-c-tile--m-disabled__body--Color | #6a6e73 | ||
--pf-v5-c-tile--m-disabled__body--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
.pf-v5-c-tile | --pf-v5-c-tile__header--m-stacked__icon--MarginBottom | 0.25rem | ||
--pf-v5-c-tile__header--m-stacked__icon--MarginBottom --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
.pf-v5-c-tile | --pf-v5-c-tile__header--m-stacked__icon--FontSize | 1.5rem | ||
--pf-v5-c-tile__header--m-stacked__icon--FontSize --pf-v5-global--icon--FontSize--lg $pf-v5-global--icon--FontSize--lg pf-font-prem(24px) 1.5rem | ||||
.pf-v5-c-tile | --pf-v5-c-tile--m-display-lg__header--m-stacked__icon--FontSize | 3.375rem | ||
--pf-v5-c-tile--m-display-lg__header--m-stacked__icon--FontSize --pf-v5-global--icon--FontSize--xl $pf-v5-global--icon--FontSize--xl pf-font-prem(54px) 3.375rem | ||||
.pf-v5-c-tile:hover | --pf-v5-c-tile__title--Color | #06c | ||
--pf-v5-c-tile__title--Color --pf-v5-c-tile--hover__title--Color --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
.pf-v5-c-tile:hover | --pf-v5-c-tile__icon--Color | #06c | ||
--pf-v5-c-tile__icon--Color --pf-v5-c-tile--hover__icon--Color --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
.pf-v5-c-tile:hover | --pf-v5-c-tile--after--BackgroundColor | #73bcf7 | ||
--pf-v5-c-tile--after--BackgroundColor --pf-v5-c-tile--hover--after--BackgroundColor --pf-v5-global--active-color--400 $pf-v5-global--active-color--400 $pf-v5-color-blue-200 #73bcf7 | ||||
.pf-v5-c-tile:focus | --pf-v5-c-tile__title--Color | #06c | ||
--pf-v5-c-tile__title--Color --pf-v5-c-tile--focus__title--Color --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
.pf-v5-c-tile:focus | --pf-v5-c-tile__icon--Color | #06c | ||
--pf-v5-c-tile__icon--Color --pf-v5-c-tile--focus__icon--Color --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
.pf-v5-c-tile:focus | --pf-v5-c-tile--after--BackgroundColor | #73bcf7 | ||
--pf-v5-c-tile--after--BackgroundColor --pf-v5-c-tile--focus--after--BackgroundColor --pf-v5-global--active-color--400 $pf-v5-global--active-color--400 $pf-v5-color-blue-200 #73bcf7 | ||||
.pf-v5-c-tile:active | --pf-v5-c-tile__title--Color | #06c | ||
--pf-v5-c-tile__title--Color --pf-v5-c-tile--m-selected__title--Color --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
.pf-v5-c-tile:active | --pf-v5-c-tile__icon--Color | #06c | ||
--pf-v5-c-tile__icon--Color --pf-v5-c-tile--m-selected__icon--Color --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
.pf-v5-c-tile:active | --pf-v5-c-tile--TranslateY | calc(-1 * 2 * 3px) | ||
--pf-v5-c-tile--TranslateY --pf-v5-c-tile--m-selected--TranslateY calc(-1 * --pf-v5-c-tile--m-selected--after--ScaleY * --pf-v5-c-tile--m-selected--after--Height) calc(-1 * 2 * --pf-v5-global--BorderWidth--lg) calc(-1 * 2 * $pf-v5-global--BorderWidth--lg) calc(-1 * 2 * 3px) | ||||
.pf-v5-c-tile:active | --pf-v5-c-tile--Transition | all 250ms cubic-bezier(.42, 0, .58, 1) | ||
--pf-v5-c-tile--Transition --pf-v5-c-tile--m-selected--Transition --pf-v5-global--Transition $pf-v5-global--Transition all 250ms cubic-bezier(.42, 0, .58, 1) | ||||
.pf-v5-c-tile:active | --pf-v5-c-tile--after--Height | 3px | ||
--pf-v5-c-tile--after--Height --pf-v5-c-tile--m-selected--after--Height --pf-v5-global--BorderWidth--lg $pf-v5-global--BorderWidth--lg 3px | ||||
.pf-v5-c-tile:active | --pf-v5-c-tile--after--BackgroundColor | #06c | ||
--pf-v5-c-tile--after--BackgroundColor --pf-v5-c-tile--m-selected--after--BackgroundColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
.pf-v5-c-tile:active | --pf-v5-c-tile--after--Transition | all 250ms cubic-bezier(.42, 0, .58, 1) | ||
--pf-v5-c-tile--after--Transition --pf-v5-c-tile--m-selected--after--Transition --pf-v5-global--Transition $pf-v5-global--Transition all 250ms cubic-bezier(.42, 0, .58, 1) | ||||
.pf-v5-c-tile:active | --pf-v5-c-tile--after--ScaleY | 2 | ||
--pf-v5-c-tile--after--ScaleY --pf-v5-c-tile--m-selected--after--ScaleY 2 | ||||
.pf-v5-c-tile.pf-m-disabled | --pf-v5-c-tile--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-tile--BackgroundColor --pf-v5-c-tile--m-disabled--BackgroundColor --pf-v5-global--disabled-color--300 $pf-v5-global--disabled-color--300 $pf-v5-color-black-200 #f0f0f0 | ||||
.pf-v5-c-tile.pf-m-disabled | --pf-v5-c-tile__title--Color | #6a6e73 | ||
--pf-v5-c-tile__title--Color --pf-v5-c-tile--m-disabled__title--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
.pf-v5-c-tile.pf-m-disabled | --pf-v5-c-tile__body--Color | #6a6e73 | ||
--pf-v5-c-tile__body--Color --pf-v5-c-tile--m-disabled__body--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
.pf-v5-c-tile.pf-m-disabled | --pf-v5-c-tile--before--BorderWidth | 0 | ||
.pf-v5-c-tile.pf-m-disabled | --pf-v5-c-tile__icon--Color | #6a6e73 | ||
--pf-v5-c-tile__icon--Color --pf-v5-c-tile--m-disabled__icon--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
.pf-v5-c-tile.pf-m-display-lg .pf-v5-c-tile__header.pf-m-stacked | --pf-v5-c-tile__icon--FontSize | 3.375rem | ||
--pf-v5-c-tile__icon--FontSize --pf-v5-c-tile--m-display-lg__header--m-stacked__icon--FontSize --pf-v5-global--icon--FontSize--xl $pf-v5-global--icon--FontSize--xl pf-font-prem(54px) 3.375rem | ||||
.pf-v5-c-tile__header.pf-m-stacked | --pf-v5-c-tile__icon--MarginRight | 0 | ||
.pf-v5-c-tile__header.pf-m-stacked | --pf-v5-c-tile__icon--FontSize | 1.5rem | ||
--pf-v5-c-tile__icon--FontSize --pf-v5-c-tile__header--m-stacked__icon--FontSize --pf-v5-global--icon--FontSize--lg $pf-v5-global--icon--FontSize--lg pf-font-prem(24px) 1.5rem |
View source on GitHub