Card

Separates content into sections.

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>

Props

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

Name	Type	Default	Description
actions	`React.Node`		Optional prop for Action components in header of Card
children	`React.Node`		The content of the Card. You can use only CardSection
dataTest	`string`		Optional prop for testing purposes
id	`string`		Set `id` for `Card`
description	`React.Node`		The description of the Card
header	`React.Node`		The header of the Card. Useful when you need different layout then combination of eg `title` and `description`
icon	`React.Node`		Display icon on the left
loading	`boolean`		If `true` `Loading` will be rendered
onClose	`() => void \\| Promise`		Callback that is triggered when Card is closing
spaceAfter	`enum`		Additional `margin-bottom` after component. See this docs
title	`React.Node`		The title of the Card
titleAs	`enum`	`"h2"`	The element used for the root node of the title of Card.

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

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

Name	Type	Default	Description
actions	`React.Node`		Actions which will be rendered on the right side
children	`React.Node`		The content of the CardSection.
dataTest	`string`		Optional prop for testing purposes.
description	`React.Node`		The description of the CardSection
expandable	`boolean`	`false`	If `true`, the CardSection will be expandable.
expanded	`boolean`		If you pass either `true` or `false` the CardSection component will controlled component and you will have to manage the state via `onExpand` or `onClose`
header	`React.Node`		The header of the CardSection. Useful when you need different layout than combination of e.g. `title` and `description` properties.
icon	`React.Node`		Displayed icon on the left side of the CardSection.
initialExpanded	`boolean`	`false`	Initial state of expandable CardSection when it mounts in uncontrolled variant
noSeparator	`Boolean`		Optional prop to turn off Separator between `header` and `children`
onClick	`event => void \\| Promise`		Function for handling the onClick event.

onClose	`() => void \\| Promise`		Callback that is triggered when section is closing
onExpand	`() => void \\| Promise`		Callback that is triggered when section is expanding
title	`React.Node`		The title of the CardSection
titleAs	`enum`	`"h2"`	The element used for the root node of the title of CardSection.