---
id: Tile
section: components
cssPrefix: pf-c-tile
propComponents: ['Tile']
beta: true
---

import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';

## Examples

Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the [Demo section](/components/tile/react-demos).

### Basic

```ts file="./TileBasic.tsx"
```

### With subtext

```ts file="./TileWithSubtext.tsx"
```

### With icon

```ts file="./TileWithIcon.tsx"
```

### Stacked

```ts file="./TileStacked.tsx"
```

### Stacked with large icons

```ts file="./TileStackedWithLargeIcons.tsx"
```

### With extra content

```ts file="./TileWithExtraContent.tsx"
```