Card

Card component is a simple container for grouping some relevant information. It’s possible to add title and description.

To implement Card component into your project you'll need to the import at least the Card and the CardContent:

import Card from "@kiwicom/orbit-components/lib/Card";
import CardContent from "@kiwicom/orbit-components/lib/Card/CardContent";

After adding import into your project you can use it simply like:

<Card>
  <CardContent>
    Hello World!
  </CardContent>
</Card>

Props

Table below contains all types of the props available in ButtonLink component.

Name Type Default Description
children React.Node The content of the Card. See Subcomponents
closable boolean false If true, the Close icon will be displayed. See Functional specs
dataTest string Optional prop for testing purposes.
onClose func Function for handling onClick event.
spaceAfter enum Additional margin-bottom after component. See this docs

Functional specs

  • By passing the closable prop into Card, you will be able to handle onClose function and Close icon will be displayed.

Subcomponents

Card component offers a good flexibility and many variations in its usage. There are four subcomponents which you may use.

CardHeader

import Card from "@kiwicom/orbit-components/lib/Card";
import CardHeader from "@kiwicom/orbit-components/lib/Card/CardHeader";
Usage:
<Card>
  <CardHeader title="Hello World!" />
</Card>
Props

Table below contains all types of the props in CardHeader component.

Name Type Default Description
dataTest string Optional prop for testing purposes.
icon React.Node Displayed icon.
title string The title of the CardHeader.
subTitle string The description of the CardHeader.

CardContent

import Card from "@kiwicom/orbit-components/lib/Card";
import CardContent from "@kiwicom/orbit-components/lib/Card/CardContent";
Usage:
<Card>
  <CardContent>
    Hello World!
  </CardContent>
</Card>
Props

Table below contains all types of the props in CardContent component.

Name Type Default Description
children React.Node The content of the CardContent.
dataTest string Optional prop for testing purposes.

CardSection

import Card from "@kiwicom/orbit-components/lib/Card";
import CardSection from "@kiwicom/orbit-components/lib/Card/CardSection";
Usage:
<Card>
  <CardSection>
    Hello World!
  </CardSection>
</Card>
Props

Table below contains all types of the props in CardContent component.

Name Type Default Description
children React.Node The content of the CardSection.
dataTest string Optional prop for testing purposes.

Guidelines

Use Card as the main container for your content
Because of its white background, it will highlight your content against gray-ish background.

Card with sections

Card sections allow you to create separate sections in every card when you need to create more advanced content structure.

Use card sections when you have more types of content in one card
It can be great to use it in Passenger card when you need to split form with personal information from baggage or insurance section.