package.docs.components.Tile.examples.Tile.md Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation
Show all versions of patternfly Show documentation
Assets, source, tooling, and content for PatternFly 4
The newest version!
---
id: Tile
section: components
cssPrefix: pf-v6-c-tile
---import './Tile.css'
## Examples
### Basic tiles
```html
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
```html
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
```html
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
```html
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` | `` | Initiates a tile. **Required** |
| `.pf-v6-c-tile__header` | `` | Initiates the tile header. |
| `.pf-v6-c-tile__title` | `` | Initiates the tile title. |
| `.pf-v6-c-tile__icon` | `` | Initiates the tile icon or image. |
| `.pf-v6-c-tile__body` | `` | 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. |
© 2015 - 2025 Weber Informatics LLC | Privacy Policy