Live demo — this example is server-driven; run the showcase locally for the interactive version.

Tile

A selectable card-like option for choosing between a small set of alternatives.

Examples

Basic tile

Default, selected, and disabled tiles side by side.

With subtext

Supporting text under the title.

A short line of supporting text under the title.

With icon

An icon beside the title.

Icon beside the title.

With stacked icon

stacked=true puts the icon above the title (pf-m-stacked on the header).

The icon sits above the title (pf-m-stacked).

With large icons

displayLg=true adds pf-m-display-lg for a bigger stacked icon.

pf-m-display-lg grows the stacked icon.

With long subtext

Long body text wraps inside the tile instead of widening it.

This tile carries a much longer line of supporting text. It wraps onto several lines inside the tile body instead of stretching the tile wider and wider across the page.

Tiles with single selection

Click or press Enter — exactly one tile stays selected (Alpine, radio semantics).

Tiles with multiple selection

Tiles toggle independently (checkbox semantics).

Documentation

Tile props

Parameters accepted by {#include components/data-display/tile ... /}. Model mode: pass tile=<Tile> built in Java instead — the Java tab on each example shows the builder.

* required
Name	Type	Description
* `title`	String	Tile title.
`id`	String	DOM id on the root; omit unless something else references the tile.
`iconName`	String	Icon as `set:slug`, e.g. `fa:plus`.
`bodyText`	String	Supporting text under the header.
`selected`	Boolean	`pf-m-selected`.
`disabled`	Boolean	`pf-m-disabled`.
`stacked`	Boolean	Icon above the title (`pf-m-stacked` on the header).
`displayLg`	Boolean	Larger stacked icon (`pf-m-display-lg`).
`attrs`	String (raw)	Raw attribute passthrough on the root — Alpine directives etc. Inherits through nested includes; shadow with `attrs=null` when composing.

Usage

Prefer Card. PatternFly deprecated Tile in favor of Card with selectable / clickable modifiers, which cover the same single- and multi-select patterns with richer content. Reach for Tile only when matching existing markup. Selection is runtime state — drive pf-m-selected from Alpine rather than hardcoding it.

Edit tile.html on GitHub