import './Tile.css'

## Examples

### Basic tiles


import Example1 from './Example1.html?raw'

<LiveExample html={Example1} />

### Stacked tiles


import Example2 from './Example2.html?raw'

<LiveExample html={Example2} />

### Stacked tiles large


import Example3 from './Example3.html?raw'

<LiveExample html={Example3} />

### Extra content


import Example4 from './Example4.html?raw'

<LiveExample html={Example4} />

## 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` | `<div>` | Initiates a tile. **Required**  |
| `.pf-v6-c-tile__header` | `<div>` | Initiates the tile header. |
| `.pf-v6-c-tile__title` | `<div>` | Initiates the tile title. |
| `.pf-v6-c-tile__icon` | `<div>` | Initiates the tile icon or image. |
| `.pf-v6-c-tile__body` | `<div>` | 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. |