Cards are used to display content and actions on a single topic.
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
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;
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. |
() => void