Card

Description

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

Installation

pnpm add @commercetools-uikit/card

npm --save install @commercetools-uikit/card

Additionally install the peer dependencies (if not present)

pnpm 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 | unionPossible 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 | unionPossible 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 | unionPossible 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 | FunctionSee signature. | | | The callback function to be executed when the Card component is clicked. Prefer this for managing side effects rather than navigation. | | to | unionPossible 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