npm.io
20.6.7 • Published 2 months ago

@commercetools-uikit/card

Licence
MIT
Version
20.6.7
Deps
9
Size
40 kB
Vulns
0
Weekly
8.2K
Stars
154
SummaryDependencyVersions

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

Keywords

javascripttypescriptdesign-systemreactuikit