Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
CardHeader
CardSection
__snapshots__
__tests__
Card.stories.js
README.md
consts.js
index.js
index.js.flow

README.md

Card

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

Functional specs

  • 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.

Subcomponents

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

CardHeader

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

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 React.Node The title of the CardHeader.
subTitle React.Node The description of the CardHeader.
actions React.Node Actions in CardHeader especially Buttons

CardSection

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

Usage:

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

Props

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

Name Type Default 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.

CardSectionHeader

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

Usage:

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

Props

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

CardSectionContent

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

Usage:

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

Props

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