Skip to content
PatternFly logo

Tile

A tile component is a form of selection that can be used in place of a radio button and is commonly used in forms. A tile appears visually similar to a selectable card. However, tiles are used specifically when the user is selecting a static option, whereas a selectable card triggers an action or opens a quickstart or sidebar to provide additional information.

Usage

When to use

  • The selection process would benefit from having the additional visual prominence that tiles provide.
  • The selection includes additional information, like a brief description or an icon.
  • The selection consists of brief, static content.
  • There are few (typically 2-6) selections for the user to choose from.

When not to use

  • The option presented to the user includes an action link, button, or overflow menu. Instead, use a card.
  • The option presented to the user requires more than 3 lines of content description. Instead, use a card.
  • The option opens an additional resource or triggers an action. Instead, use a card.

Example

behavior example

Behavior

As the user hovers over the tile component, the color will change insinuating its clickability. Once the user chooses the title, it will appear with a blue border showing it has been selected.

behavior example

Variations

Basic

default example

Subtext

subtext example

Icon

icon example
View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines