Info alert:Beta feature
This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more go to our Beta components page on GitHub.
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
| .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--Transition | none | ||
| .pf-c-tile | --pf-c-tile--TranslateY | 0 | ||
| .pf-c-tile | --pf-c-tile--before--BorderColor | #d2d2d2 | ||
| .pf-c-tile | --pf-c-tile--before--BorderWidth | 1px | ||
| .pf-c-tile | --pf-c-tile--after--Height | 3px | ||
| .pf-c-tile | --pf-c-tile--after--BackgroundColor | transparent | ||
| .pf-c-tile | --pf-c-tile--after--Transition | none | ||
| .pf-c-tile | --pf-c-tile--after--ScaleY | 1 | ||
| .pf-c-tile | --pf-c-tile--after--TranslateY | 0 | ||
| .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__title--Color | #151515 | ||
| .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--hover--after--BackgroundColor | #73bcf7 | ||
| .pf-c-tile | --pf-c-tile--hover__icon--Color | #06c | ||
| .pf-c-tile | --pf-c-tile--hover__title--Color | #06c | ||
| .pf-c-tile | --pf-c-tile--focus--after--BackgroundColor | #73bcf7 | ||
| .pf-c-tile | --pf-c-tile--focus__icon--Color | #06c | ||
| .pf-c-tile | --pf-c-tile--focus__title--Color | #06c | ||
| .pf-c-tile | --pf-c-tile--m-selected--TranslateY | calc(-1 * 2 * 3px) | ||
| .pf-c-tile | --pf-c-tile--m-selected--Transition | all 250ms cubic-bezier(.42, 0, .58, 1) | ||
| .pf-c-tile | --pf-c-tile--m-selected--after--Height | 3px | ||
| .pf-c-tile | --pf-c-tile--m-selected--after--BackgroundColor | #06c | ||
| .pf-c-tile | --pf-c-tile--m-selected--after--Transition | all 250ms cubic-bezier(.42, 0, .58, 1) | ||
| .pf-c-tile | --pf-c-tile--m-selected--after--ScaleY | 2 | ||
| .pf-c-tile | --pf-c-tile--m-selected__icon--Color | #06c | ||
| .pf-c-tile | --pf-c-tile--m-selected__title--Color | #06c | ||
| .pf-c-tile | --pf-c-tile--m-disabled--BackgroundColor | #f0f0f0 | ||
| .pf-c-tile | --pf-c-tile--m-disabled__icon--Color | #6a6e73 | ||
| .pf-c-tile | --pf-c-tile--m-disabled__title--Color | #6a6e73 | ||
| .pf-c-tile | --pf-c-tile--m-disabled__body--Color | #6a6e73 | ||
| .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:hover | --pf-c-tile__title--Color | #06c | ||
| .pf-c-tile:hover | --pf-c-tile__icon--Color | #06c | ||
| .pf-c-tile:hover | --pf-c-tile--after--BackgroundColor | #73bcf7 | ||
| .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--after--BackgroundColor | #73bcf7 | ||
| .pf-c-tile:active | --pf-c-tile__title--Color | #06c | ||
| .pf-c-tile:active | --pf-c-tile__icon--Color | #06c | ||
| .pf-c-tile:active | --pf-c-tile--TranslateY | calc(-1 * 2 * 3px) | ||
| .pf-c-tile:active | --pf-c-tile--Transition | all 250ms cubic-bezier(.42, 0, .58, 1) | ||
| .pf-c-tile:active | --pf-c-tile--after--Height | 3px | ||
| .pf-c-tile:active | --pf-c-tile--after--BackgroundColor | #06c | ||
| .pf-c-tile:active | --pf-c-tile--after--Transition | all 250ms cubic-bezier(.42, 0, .58, 1) | ||
| .pf-c-tile:active | --pf-c-tile--after--ScaleY | 2 | ||
| .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
