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 CardSection:

import Card, { CardSection } from "@kiwicom/orbit-components/lib/Card";

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

<Card>
  <CardSection>
    Hello World!
  </CardSection>
</Card>

Table below contains all types of the props available in the Card 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	`event => void \\| Promise`		Function for handling onClick event.
spaceAfter	`enum`		Additional `margin-bottom` after component. See this docs

By passing the closable prop into Card, you will be able to handle onClose function and Close icon will be displayed. Also, if you want to select the Close Button element for testing purposes, use [data-test="CardCloseButton"] selector.

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

import Card, { CardHeader } from "@kiwicom/orbit-components/lib/Card";

<Card>
  <CardHeader title="Hello World!" />
</Card>

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

Name	Type	Description
dataTest	`string`	Optional prop for testing purposes.
icon	`React.Node`	Displayed icon.
title	`React.Node`	The title of the CardHeader.
subTitle	`React.Node`	The description of the CardHeader.
actions	`React.Node`	Actions in CardHeader especially Buttons

import Card, { CardSection } from "@kiwicom/orbit-components/lib/Card";

<Card>
  <CardSection>
    Hello World!
  </CardSection>
</Card>

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

Name	Type	Description
children	`React.Node`	The content of the CardSection.
expandable	`boolean`	CardSection could be expandable
initialExpanded	`boolean`	CardSection is expanded by default
onClose	`() => void`	Callback after close
onExpand	`() => void`	Callback after expand
dataTest	`string`	Optional prop for testing purposes.

import Card, { CardSection, CardSectionHeader } from "@kiwicom/orbit-components/lib/Card";

<Card>
  <CardSection>
    <CardSectionHeader>
      Hello World!
    </CardSectionHeader>
  </CardSection>
</Card>

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

Name	Type	Default	Description
children	`React.Node`		The content of the CardSection.
actions	`React.Node`		Actions in CardSectionHeader especially Buttons

import Card, { CardSection, CardSectionContent } from "@kiwicom/orbit-components/lib/Card";

<Card>
  <CardSection>
    <CardSectionContent>
      Hello World!
    </CardSectionContent>
  </CardSection>
</Card>

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

Name	Type	Default	Description
children	`React.Node`		The content of the CardSection.
visible	`boolean`		If visible is passed and CardSection is expandable, the content will be always shown

Use Card as the main container for your content

Because of its white background, it will highlight your content against gray-ish background.

Don't use description for any important explanation

Be careful about description, users tend to skip it. If you need to tell something really important, it's recommended to use Informational Alert.

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.