Card

When you have lots of information, organizing it into related groups can help users navigate it all. If there’s no specific action to take for the group, use a card to make the connections clear to users.

Cards are great for collecting a lot of related information into one block where you can use sections to organize it. If you have only one section of information to hide, consider using a collapse. If you want to make the block actionable, use a tile.

Component status

Figma

Released

Web (React)

Released

iOS (Swift)

n/a

Android (Kotlin)

n/a

Sketch

Released

Content structure

General guidelines

Use as the main content container       

Because of its white background, Cards will highlight your content against a gray background. This helps divide your content into logical sections and make it clear what is related.

Maintain visual hierarchy

Cards are open to any content you want to put into them. If you’re putting a heading into a card, we recommend using the card title, which was designed for this purpose. Or at least use the same style of heading to keep the overall visual hierarchy.

Using different styles can create conflicting visual messages, especially if you’re using multiple cards on the same screen.

Keep descriptions for extra information 

Users sometimes skip descriptions so make sure there’s nothing essential in them. If you need to say something really important, use an informational Alert.

Use sections for content types

When you have different types of information or just multiple examples of the same kind, use card sections to divide it into clearly related ideas.

For example, you might have a card about a passenger where you need to split personal information from baggage or other services. Or you might have a card with all passengers in an itinerary and you want to divide each passenger into a different section.

import Card from "@kiwicom/orbit-components/lib/Card";
import CardSection from "@kiwicom/orbit-components/lib/CardSection";
import Stack from "@kiwicom/orbit-components/lib/Stack";
import Text from "@kiwicom/orbit-components/lib/Text";

() => (
  <Card title="Passenger info">
    <CardSection
      expandable
      title="Yasmin Karenth"
      icon={<GenderWoman ariaLabel="female" />}
    >
      <Stack direction="column" spacing="condensed">
        <Text type="secondary">January 20, 1978</Text>
        <Text type="secondary">yas.karenth@example.com</Text>
      </Stack>
    </CardSection>
    <CardSection
      expandable
      title="Robin Kask"
      icon={<GenderMan ariaLabel="male" />}
    >
      <Stack direction="column" spacing="condensed">
        <Text type="secondary">June 11, 1985</Text>
        <Text type="secondary">robin2fly@example.com</Text>
      </Stack>
    </CardSection>
  </Card>
)

Related components

Tile

Cards present information without a single action applying to the entire card. For smaller actions, you can use an action in the header. For an action applying to all of the information, use a tile.

Table

Cards can be useful to present information in clear groups. When you start to have a lot of sections, it can help to change it into a table to make it easier to scan.

Collapse

Card sections can be useful for progressive disclosure because they can be expanded and collapsed. If you have only simple information you want to hide, consider using a collapse.