Developer mode
Opens components on the React tab by default.
Your bookmarks

TileGroup

Wraps tiles to show related interactions.

When you’re organizing your information and find you have a bunch of related interactions, use a tile group to present them to users as a coherent whole.

This way the information stays clearly structured within groups, but users aren’t overwhelmed with a variety of different directions to go in.

Component status

Figma
Planned
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Docs
Released

Content structure

Hovered/focused tile: shows the currently selected action; other tiles: offer other actions to choose from.

Guidelines

Use for related actions

Tile groups are designed to associate their contents closely. This means the tiles will look similar and connected.

So don’t use tile groups for unrelated options. Use them to present clear choices for the next logical step.

Keep tiles consistent       

To present clear options, it helps if all of the choices are similar. This makes scanning for the right one easier. 

Use similar structures for all tiles so each action is clear and users can choose the one that’s right for them.

Look & feel

Hover/focus

The tiles are associated together within the group and made to look similar. To make selection clearer, the background changes when a user hovers over/focuses on a tile.

In this way, the current selection is clear and users are less likely to click the wrong action.

import Tile from "@kiwicom/orbit-components/lib/Tile";
import TileGroup from "@kiwicom/orbit-components/lib/TileGroup";
import BaggageChecked from "@kiwicom/orbit-components/lib/icons/BaggageChecked";
import Child from "@kiwicom/orbit-components/lib/icons/Child";
import Meal from "@kiwicom/orbit-components/lib/icons/Meal";
() => (
  <TileGroup>
    <Tile
      icon={<BaggageChecked />}
      href="https://www.kiwi.com/en/?help=%2Ffaq%2Fbaggage-131"
      external
      title="Baggage"
      description="Everything you need to know about your baggage allowance."
    />
    <Tile
      icon={<Child />}
      href="https://www.kiwi.com/?help=%2Ffaq%2Ftraveling-with-children-120"
      external
      title="Traveling with children"
      description="How to bring your family with you."
    />
    <Tile
      icon={<Meal />}
      href="https://www.kiwi.com/en/?help=%2Ffaq%2Fseats-meals-and-pets-133%2Farticle%2Fhow-do-i-pre-book-my-meals-3"
      external
      title="Meals"
      description="Choose a tasty meal to enjoy on your trip."
    />
  </TileGroup>
)

Related components

Tile

For guidance on how to use tiles within a group, see the tile guidelines.

Card

Tiles have associated actions. For information without a related action, use a card.