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.
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 reallyreally 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 | Required | Default | 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 | --pf-c-tile--PaddingRight | 1.5rem | |
.pf-c-tile | --pf-c-tile--PaddingBottom | 1.5rem | |
.pf-c-tile | --pf-c-tile--PaddingLeft | 1.5rem | |
.pf-c-tile | --pf-c-tile--BackgroundColor | #fff | |
.pf-c-tile | --pf-c-tile--before--BorderColor | #d2d2d2 | |
.pf-c-tile | --pf-c-tile--before--BorderWidth | 1px | |
.pf-c-tile | --pf-c-tile--before--BorderRadius | 3px | |
.pf-c-tile | --pf-c-tile--hover--before--BorderColor | #06c | |
.pf-c-tile | --pf-c-tile--m-selected--before--BorderWidth | 2px | |
.pf-c-tile | --pf-c-tile--m-selected--before--BorderColor | #06c | |
.pf-c-tile | --pf-c-tile--focus--before--BorderWidth | 2px | |
.pf-c-tile | --pf-c-tile--focus--before--BorderColor | #06c | |
.pf-c-tile | --pf-c-tile--m-disabled--BackgroundColor | #f0f0f0 | |
.pf-c-tile | --pf-c-tile__title--Color | #151515 | |
.pf-c-tile | --pf-c-tile--hover__title--Color | #06c | |
.pf-c-tile | --pf-c-tile--m-selected__title--Color | #06c | |
.pf-c-tile | --pf-c-tile--focus__title--Color | #06c | |
.pf-c-tile | --pf-c-tile--m-disabled__title--Color | #6a6e73 | |
.pf-c-tile | --pf-c-tile__icon--MarginRight | 0.5rem | |
.pf-c-tile | --pf-c-tile__icon--FontSize | 1.125rem | |
.pf-c-tile | --pf-c-tile__icon--Color | #151515 | |
.pf-c-tile | --pf-c-tile--hover__icon--Color | #06c | |
.pf-c-tile | --pf-c-tile--m-selected__icon--Color | #06c | |
.pf-c-tile | --pf-c-tile--m-disabled__icon--Color | #6a6e73 | |
.pf-c-tile | --pf-c-tile--focus__icon--Color | #06c | |
.pf-c-tile | --pf-c-tile__header--m-stacked__icon--MarginBottom | 0.25rem | |
.pf-c-tile | --pf-c-tile__header--m-stacked__icon--FontSize | 1.5rem | |
.pf-c-tile | --pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize | 3.375rem | |
.pf-c-tile | --pf-c-tile__body--Color | #151515 | |
.pf-c-tile | --pf-c-tile__body--FontSize | 0.75rem | |
.pf-c-tile | --pf-c-tile--m-disabled__body--Color | #6a6e73 | |
.pf-c-tile:hover | --pf-c-tile__title--Color | #06c | |
.pf-c-tile:hover | --pf-c-tile__icon--Color | #06c | |
.pf-c-tile:hover | --pf-c-tile--before--BorderColor | #06c | |
.pf-c-tile.pf-m-selected | --pf-c-tile__title--Color | #06c | |
.pf-c-tile.pf-m-selected | --pf-c-tile__icon--Color | #06c | |
.pf-c-tile.pf-m-selected | --pf-c-tile--before--BorderWidth | 2px | |
.pf-c-tile.pf-m-selected | --pf-c-tile--before--BorderColor | #06c | |
.pf-c-tile:focus | --pf-c-tile__title--Color | #06c | |
.pf-c-tile:focus | --pf-c-tile__icon--Color | #06c | |
.pf-c-tile:focus | --pf-c-tile--before--BorderWidth | 2px | |
.pf-c-tile:focus | --pf-c-tile--before--BorderColor | #06c | |
.pf-c-tile.pf-m-disabled | --pf-c-tile--BackgroundColor | #f0f0f0 | |
.pf-c-tile.pf-m-disabled | --pf-c-tile__title--Color | #6a6e73 | |
.pf-c-tile.pf-m-disabled | --pf-c-tile__body--Color | #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.pf-m-display-lg .pf-c-tile__header.pf-m-stacked | --pf-c-tile__icon--FontSize | 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 | |
View source on GitHub