Card

Cards contain content and actions related to a single subject.

When to use it


To display any kind of content (for example, tables, charts, dashboards, and more).

Component anatomy


This component is complex, which means it consists of other components:

Installation


npm i @synerise/ds-card

or

yarn add @synerise/ds-card

Usage


<Card
lively
withHeader
title="Card Example"
description="Some description"
icon={<IconComponent />}
iconColor="#54cb0b"
size="medium"
>
Content
</Card>

Card single


Card group


API


Properties

PropertyDescriptionTypeDefault
backgroundBackground of Card containerwhite / white-shadow / grey / grey-shadow / outlinewhite
childrenDefines if the button casts a shadow when the cursor is hovered overReact.ReactNode-
classNameDefines the class name of the containerstring-
compactHeaderSet as true, displays the description next to the header. Set as false, displays the description below the headerboolean-
descriptionDefines the content of the card description (in the header)React.ReactNodestring
disabledDefines if the state of the component is disabledboolean-
headerBorderBottomShow line under CardHeaderbooleanfalse
headerSideChildrenDefines if the container includes a button (in the header)React.ReactNode-
hideContentDefines the initial visibility of the contentbooleanfalse
iconIcon of CardBadgeReact.ReactNode-
iconColorDefines the color of the iconstring-
livelyDefines if the container casts a shadow when the cursor is hovered overboolean-
raisedDefines if the container casts a shadow on the backgroundboolean-
styleDefines the CSS of the containerReact.CSSProperties-
sizeDefines the width of the container (the container width is set to 100% when this property is not passed).small (472px) / medium (588px) / large (966px) / extraLarge (1232px)-
titleDefines the title of the card (in the header)string-
withHeaderDefines if the header is shownboolean-
withoutPaddingReset padding of ContentContainerbooleanfalse
showSideChildrenWhenHeaderHiddenShow headerSideChildren on the bottom when header is scrolled out of viewbooleanfalse

CardBadge

PropertyDescriptionTypeDefault
IconIcon rendered in badgeReact.ReactNode-
StatusDefines the color of badge and iconsuccess / error / warning / defaultdefault