diff --git a/packages/react-core/src/components/Tile/examples/Tile.md b/packages/react-core/src/components/Tile/examples/Tile.md index 660bd0a109d..0f1dfb1944c 100644 --- a/packages/react-core/src/components/Tile/examples/Tile.md +++ b/packages/react-core/src/components/Tile/examples/Tile.md @@ -12,32 +12,36 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the [Demo section](/components/tile/react-demos). -### Basic - +### 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`. ```ts file="./TileBasic.tsx" ``` -### With subtext - +### With subtext +Tile subtext can provide users with additional context. To add subtext, pass a short description to the `` component. ```ts file="./TileWithSubtext.tsx" ``` ### 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. ```ts file="./TileWithIcon.tsx" ``` -### Stacked - +### 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. ```ts file="./TileStacked.tsx" ``` -### Stacked with large icons +### 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. ```ts file="./TileStackedWithLargeIcons.tsx" ``` -### With extra content +### 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 ``. +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. ```ts file="./TileWithExtraContent.tsx" -``` +``` \ No newline at end of file