Warning alert:Deprecated feature
This component implementation has been deprecated in favor of a newer solution, and is no longer being maintained or enhanced. To learn more about deprecated components, visit about PatternFly.
Note: Tile has been deprecated. Use the card component instead.
Examples
Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the Demo section.
Basic tile
Basic tiles can appear in one of three states: a default state, selected state, and a disabled state. To change the state of a tile, use the properties isSelected and isDisabled.
Default
Selected
Disabled
With subtext
Tile subtext can provide users with additional context. To add subtext, pass a short description to the <Tile> component.
Default
Subtext goes here
Selected
Subtext goes here
Disabled
Subtext goes here
With icon
Icons can provide a visual cue that helps users understand what the tile is being used for. To add an icon, use the icon property.
Default
Subtext goes here
Selected
Subtext goes here
Disabled
Subtext goes here
With stacked icon
You can further customize a tile’s appearance by placing an icon above the title. To stack your icon on top of a tile’s title, use the isStacked property.
Default
Subtext goes here
Selected
Subtext goes here
Disabled
Subtext goes here
With large icons
You can make your icons larger to help catch a user’s attention. To increase the size of an icon, use the isDisplayLarge property.
Be aware that isDisplayLarge can only be used when isStacked is also applied.
Default
Subtext goes here
Selected
Subtext goes here
Disabled
Subtext goes here
With long subtext
To provide users with a large amount of context, subtext can be elongated to wrap around to the next line. To format a long subtext, you can pass the component Flex into <Tile>.
You can also change the type of Flex you can use so that the line breaks in the subtext fits your needs. You can do this by changing the default flex. The standard is default: “flex_1”, and changing the number in the default will also change where the sentence breaks.
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
Demos
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
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v6-c-tile | --pf-v6-c-tile--PaddingBlockStart | 1.5rem | ||
| ||||
| .pf-v6-c-tile | --pf-v6-c-tile--PaddingInlineEnd | 1.5rem | ||
| ||||
| .pf-v6-c-tile | --pf-v6-c-tile--PaddingBlockEnd | 1.5rem | ||
| ||||
| .pf-v6-c-tile | --pf-v6-c-tile--PaddingInlineStart | 1.5rem | ||
| ||||
| .pf-v6-c-tile | --pf-v6-c-tile--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-tile | --pf-v6-c-tile--BorderRadius | 16px | ||
| ||||
| .pf-v6-c-tile | --pf-v6-c-tile--before--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-tile | --pf-v6-c-tile--before--BorderWidth | 1px | ||
| ||||
| .pf-v6-c-tile | --pf-v6-c-tile--before--BorderRadius | 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 | --pf-v6-c-tile__icon--FontSize | 0.875rem | ||
| ||||
| .pf-v6-c-tile | --pf-v6-c-tile__icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-tile | --pf-v6-c-tile__title--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-tile | --pf-v6-c-tile__title--FontWeight | 500 | ||
| ||||
| .pf-v6-c-tile | --pf-v6-c-tile__body--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-tile | --pf-v6-c-tile__body--FontSize | 0.75rem | ||
| ||||
| .pf-v6-c-tile | --pf-v6-c-tile--hover--before--BorderColor | (In light theme) #4394e5 | ||
| ||||
| .pf-v6-c-tile | --pf-v6-c-tile--m-selected--before--BorderColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-tile | --pf-v6-c-tile--m-selected--before--BorderWidth | 2px | ||
| ||||
| .pf-v6-c-tile | --pf-v6-c-tile--m-disabled--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-tile | --pf-v6-c-tile--m-disabled__title--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-tile | --pf-v6-c-tile--m-disabled__icon--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-tile | --pf-v6-c-tile--m-disabled__body--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-tile | --pf-v6-c-tile__header--m-stacked__icon--MarginBlockEnd | 1rem | ||
| ||||
| .pf-v6-c-tile | --pf-v6-c-tile__header--m-stacked__icon--FontSize | 1.5rem | ||
| ||||
| .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.5rem | ||
| ||||
