Tile

---

---

Anatomy

1. Container: The interactive surface that defines the Tile’s boundaries.
2. Visual: Visual element that reinforces the concept of the tile. It can be an Icon or an Illustration.
3. Label: Provides the user with key information about the purpose or content of each tile.
4. Indicator: (Optional) Provides visual feedback to indicate to the user whether something is selectable or clickable, and if selectable, whether it is selected or not.
5. Description: (Optional) Supportive text that helps provide more information and context.
6. Additional information: (Optional) Additional information that may be relevant to understanding the purpose of the tile.

---

Usage Guidelines

When to use this component

Use the Tile component when you need to:

• Display a set of related options that users can select (single or multiple) or click in a more visual and scannable way.
• Provide quick actions or shortcuts in an interface.
• Offer navigational entry points that guide users toward other areas of the product.
• Provide more contextual information for the benefit of users during a process.

Usage Examples

• A clickable Tile can represent a product category, showing an icon and title (e.g., “Psychology”). Selecting it opens a detailed view.
• Single- or Multi-Select Tiles can be used in a settings page to let users pick preferences, e.g., “Select your free account: I’m a patient, I’m a doctor, I’m a clinic manager”.

When not to use this component

Avoid using Tile when:

• Only needing a simple selection or selecting from a large set of simple options where compactness is key; use Checkbox or Radio instead.
• Presenting complex information with multiple actions; use a Card instead.
• Having form fields for data entry; use Inputs or Fieldset components.
• Representing simple yes/no toggles or binary decisions; use Toggle instead.

---

Best Practices

---

General Component Behaviors

Interactions

The Tile component is composed of several atomic elements that work together to create a unified interactive surface.

There are 3 types of interaction with tiles:

• Multi-select: Allows multi-selection; behaves like a Checkbox.
• Single-select: Allows single selection within a group; behaves like a Radio.
• Clickable: Allows to perform an action or navigate to other sections of an app, like Buttons or Links.

For keyboard navigation/interaction, a focused state is added to the component where a focus ring is displayed

Widths and Heights

For content reasons, the tile component will adapt the height to the content it has and will have different min-widths depending on its type.

These values are shown below:

Truncations

For tiles, the information is limited, and therefore so is the text. That’s why, some limitations have been set for their content:

• Labels: a maximum of 2 lines will be allowed. When the maximum is reached, the text will be truncated and, to obtain more information, you can hover over it to display the rest of the information in a tooltip.
• Captions: a maximum of 4 lines of text will be allowed. When the maximum is reached, the text will be truncated and, to obtain more information, you can hover over it to display the rest of the information in a popover.
• Additional information: the badge component should expand to the width of the tile, remaining contained within the tile container. In this case, the badge text will be truncated and an ellipsis will be displayed. Its content will be viewable if you hover over the badge.

Illustrations usage

For the correct and balanced use of illustrations within a tile, we recommend using only the following sizes:

• XSmall: ideal for tiles with little content, in a horizontal layout. It fits very well in interfaces where we have little space, such as mobile devices.
• Small: Ideal for horizontal and vertical layouts, when we have a lot of content in a tile or are working on interfaces with a lot of space (e.g., desktops).
• Medium: Mainly suitable for vertical tiles and primarily for desktop interfaces.

Stacking

Related tiles can be grouped together. Some considerations should be taken into account:

• Multi-select and Single-select tiles: at least 2 tiles per group should be displayed
• Clickable tiles: this type of tile can be placed alone.

Ways of arrange them:

• Horizontal single-line: tiles will be arranged in a carousel that can be navigated by horizontal scrolling (recommended for responsive or mobile devices)
• Horizontal wrapped: tiles are arranged horizontally, but when they reach the end of the container, they wrap and are all displayed at once.
• Vertical: all related tiles are arranged vertically in a list.

---

Main variants

• Clickable: Used for navigation or actions. Has hover and focus states only. Clickable tiles use background fills for distinction from Single and Multi select tiles.
• Multi-select: Allows multiple active selections; displays selected state and an optional checkbox indicator. Like Single-select tiles, Multi-select tiles use borders and background fills for distinction from Clickable tiles.
• Single-select: Allows one active selection; displays selected state and an optional radio indicator. Like Multi-select tiles, Single-select tiles use borders and background fills for distinction from Clickable tiles.

---

States

Tiles can have many states to reflect the interaction users can have with them. Among them, we can find the following ones:

1. Default: Unselected, resting state.
2. Hover: Indicates potential interaction.
3. Active/Pressed: Provides tactile feedback on click/tap.
4. Focus: Outlined for keyboard or assistive focus.

Multi-select and Single-select tiles can also have an additional state named “selected” that would highlights user’s choice with checkmark or visual emphasis (stronger border).

---

Variants

Content type

• Text and Visual: Displays an icon or illustration and text content.
• Icon only: Displays an icon or illustration only.
• Text Only: Displays just text content.

Layout

• Horizontal: Icon or illustration left, text content right.
• Vertical: Icon or illustration top, text content below.

Alignment

• Left-aligned: Content aligned with text start edge.
• Center-aligned: Content centered within the Tile; indicator absolutely positioned.

---

Styles

Default

Neutral appearance; uses standard surface and border colors.

Accent

Highlighted version for emphasis; uses the accent or primary color.

---

Content Guidelines

• Keep labels short and scannable (2–3 words ideally).
• Descriptions should not exceed one line on medium viewports.
• Additional info (badge, tag) should be concise and complementary.
• Avoid using punctuation in titles unless necessary.
• Capitalize only the first letter of labels unless using proper nouns.

For further information, see the Content Styleguide.

---

Known Gaps

• Disabled, error, and loading states are out of scope for now.
• Size variants or content density.
• Features:
• Expandable version.
• Use of links or other interactive elements within the tile.
• Toggles as control for the tile.
• Any additional style, like subtle.