@commercetools-uikit/card

Card

Description

Cards are used to display content and actions on a single topic.

Installation

yarn add @commercetools-uikit/card

npm --save install @commercetools-uikit/card

Additionally install the peer dependencies (if not present)

yarn add react react-router-dom

npm --save install react react-router-dom

Usage

import Card from '@commercetools-uikit/card';

const Example = () => (
  <Card theme="light" type="raised">
    <p>{`You'll never guess where I've been!`}</p>
  </Card>
);

export default Example;

Properties

Props	Type	Required	Default	Description
type	union Possible values: 'raised' , 'flat'		'raised'	Determines the visual effect of the card. A raised card has a box shadow while a flat card has just a border.
insetScale	union Possible values: 'none' , 's' , 'm' , 'l' , 'xl'		'm'	Determines the spacing (padding) that the content should have from the card borders. In case there is no space needed, you can pass none.
theme	union Possible values: 'light' , 'dark'		'light'	Determines the background color of the card.
className	string			Pass a custom CSS class, useful to override the styles. NOTE: This is not recommended and should only be used for building new components that require special style adjustments.
children	ReactNode
onClick	Function See signature.			The callback function to be executed when the Card component is clicked. Prefer this for managing side effects rather than navigation.
to	union Possible values: string , LocationDescriptor			The URL that the Card should point to. If provided, the Card will be rendered as an anchor element.
isExternalLink	boolean			A flag to indicate if the Card points to an external source.
isDisabled	boolean			Indicates that a clickable Card should not allow clicks. This allows consumers to temporarily disable a clickable Card.

Signatures

Signature onClick

() => void