Examples
Basic tiles
Default
Selected
Disabled
Default
Subtext goes here
Selected
Subtext goes here
Disabled
Subtext goes here
Default
Subtext goes here
Selected
Subtext goes here
Disabled
Subtext goes here
Stacked tiles
Default
Subtext goes here
Selected
Subtext goes here
Disabled
Subtext goes here
Default
Subtext goes here
Selected
Subtext goes here
Disabled
Subtext goes here
Default
Subtext goes here
Default
Subtext goes here
Stacked tiles large
Default
Subtext goes here
Selected
Subtext goes here
Disabled
Subtext goes here
Default
Subtext goes here
Selected
Subtext goes here
Disabled
Subtext goes here
Default
Subtext goes here
Default
Subtext goes here
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.
Default
This is really really long subtext that goes on for so long that it has to wrap to the next line.
Default
Subtext goes here
Documentation
Overview
Accessibility
Attribute | Applied to | Outcome |
|---|---|---|
tabindex="0" | .pf-v6-c-tile | Inserts the tile into the tab order of the page so that it is focusable. Required |
tabindex="-1" | .pf-v6-c-tile | Removes the tile from keyboard focus when it is disabled. |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v6-c-tile | <div> | Initiates a tile. Required |
.pf-v6-c-tile__header | <div> | Initiates the tile header. |
.pf-v6-c-tile__title | <div> | Initiates the tile title. |
.pf-v6-c-tile__icon | <div> | Initiates the tile icon or image. |
.pf-v6-c-tile__body | <div> | Initiates the tile body. |
.pf-m-selected | .pf-v6-c-tile | Modifies the tile for the selected state. |
.pf-m-disabled | .pf-v6-c-tile | Modifies the tile for the disabled state. |
.pf-m-stacked | .pf-v6-c-tile__header | Modifies the tile header to be stacked vertically. |
.pf-m-display-lg | .pf-v6-c-tile | Modifies the tile to have large display styling. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| :where(:root, .pf-v6-c-tile) | --pf-v6-c-tile--PaddingBlockStart | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tile) | --pf-v6-c-tile--PaddingInlineEnd | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tile) | --pf-v6-c-tile--PaddingBlockEnd | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tile) | --pf-v6-c-tile--PaddingInlineStart | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tile) | --pf-v6-c-tile--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| :where(:root, .pf-v6-c-tile) | --pf-v6-c-tile--BorderRadius | 16px | ||
| ||||
| :where(:root, .pf-v6-c-tile) | --pf-v6-c-tile--before--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
| :where(:root, .pf-v6-c-tile) | --pf-v6-c-tile--before--BorderWidth | 1px | ||
| ||||
| :where(:root, .pf-v6-c-tile) | --pf-v6-c-tile--before--BorderRadius | 16px | ||
| ||||
| :where(:root, .pf-v6-c-tile) | --pf-v6-c-tile--after--BackgroundColor | transparent | ||
| :where(:root, .pf-v6-c-tile) | --pf-v6-c-tile__icon--MarginInlineEnd | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tile) | --pf-v6-c-tile__icon--FontSize | 0.875rem | ||
| ||||
| :where(:root, .pf-v6-c-tile) | --pf-v6-c-tile__icon--Color | (In light theme) #1f1f1f | ||
| ||||
| :where(:root, .pf-v6-c-tile) | --pf-v6-c-tile__title--Color | (In light theme) #151515 | ||
| ||||
| :where(:root, .pf-v6-c-tile) | --pf-v6-c-tile__title--FontWeight | 500 | ||
| ||||
| :where(:root, .pf-v6-c-tile) | --pf-v6-c-tile__body--Color | (In light theme) #151515 | ||
| ||||
| :where(:root, .pf-v6-c-tile) | --pf-v6-c-tile__body--FontSize | 0.75rem | ||
| ||||
| :where(:root, .pf-v6-c-tile) | --pf-v6-c-tile--hover--before--BorderColor | (In light theme) #4394e5 | ||
| ||||
| :where(:root, .pf-v6-c-tile) | --pf-v6-c-tile--m-selected--before--BorderColor | (In light theme) #0066cc | ||
| ||||
| :where(:root, .pf-v6-c-tile) | --pf-v6-c-tile--m-selected--before--BorderWidth | 2px | ||
| ||||
| :where(:root, .pf-v6-c-tile) | --pf-v6-c-tile--m-disabled--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
| :where(:root, .pf-v6-c-tile) | --pf-v6-c-tile--m-disabled__title--Color | (In light theme) #4d4d4d | ||
| ||||
| :where(:root, .pf-v6-c-tile) | --pf-v6-c-tile--m-disabled__icon--Color | (In light theme) #4d4d4d | ||
| ||||
| :where(:root, .pf-v6-c-tile) | --pf-v6-c-tile--m-disabled__body--Color | (In light theme) #4d4d4d | ||
| ||||
| :where(:root, .pf-v6-c-tile) | --pf-v6-c-tile__header--m-stacked__icon--MarginBlockEnd | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-tile) | --pf-v6-c-tile__header--m-stacked__icon--FontSize | 1.375rem | ||
| ||||
| :where(:root, .pf-v6-c-tile) | --pf-v6-c-tile--m-display-lg__header--m-stacked__icon--FontSize | 3.5rem | ||
| ||||
| .pf-v6-c-tile:hover | --pf-v6-c-tile--before--BorderColor | (In light theme) #4394e5 | ||
| ||||
| .pf-v6-c-tile.pf-m-selected | --pf-v6-c-tile--before--BorderColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-tile.pf-m-selected | --pf-v6-c-tile--before--BorderWidth | 2px | ||
| ||||
| .pf-v6-c-tile.pf-m-disabled | --pf-v6-c-tile--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-tile.pf-m-disabled | --pf-v6-c-tile__title--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-tile.pf-m-disabled | --pf-v6-c-tile__icon--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-tile.pf-m-disabled | --pf-v6-c-tile__body--Color | (In light theme) #4d4d4d | ||
| ||||
| .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__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.375rem | ||
| ||||
