Card

Card is basically a wrapper of an individual widget and gives a nice border, title, and container for it. It also handles row and column spanning, in case a widget takes more space vertically or horizontally and handles the hassle of widths and heights dynamically!

Live Editor

Usage

1 . Import Card after installation

import { Card } from "@k2/ui";

2 . Then use in jsx/tsx as shown below:

<Card width="300px" title="Card Title">

<div>Hello K2</div>

</Card>

Examples

Card with title component and actions component: Demo

<Card

title={() => <div>Card Title</div>}

width="600px"

actions={() => <div>[any component here]</div>}

hasBoxShadow={false}

>

<div />

</Card>

Card with border radius: Demo

<Card

title="Card with border radius"

hasBoxShadow={false}

width="300px"

height="200px"

style={{ borderRadius: "10px" }}

>

<div />

</Card>

Card with box shadow: Demo

<Card

title="Card with box shadow"

width="300px"

height="200px"

hasBorder={false}

>

<div />

</Card>

Card with different body and header padding: Demo

<Card

title="Card Title"

width="300px"

height="200px"

hasBorder={false}

classes={{

header: "card-header-custom-padding",

body: "card-body-custom-padding",

}}

>

<div style={{ background: "blue", height: "100%" }} />

</Card>

CSS:

.card-header-custom-padding.card-header-custom-padding {

padding: 10px 20px;

}

.card-body-custom-padding.card-body-custom-padding {

padding: 10px 40px;

}

Click here for more variations of card.

Props

Property	Type	Required	Default value	Description
widthUnits	number | Breakpoints	no	1	No. of Width units that the Card takes. Different units for each breakpoint can be set by passing Breakpoints Object e.g {lg:2,xs:1} if used within responsive GridLayout
heightUnits	number	no	1	No. of Height units that the Card takes. Different units for each breakpoint can be set by passing Breakpoints Object e.g {lg:2,xs:1} if used within responsive GridLayout
title	ReactNode	no	None	Displayed on top of Card.
subtitle	ReactNode	no	None	Displayed next to the Title.
actions	ReactNode	no	None	Actions displayed on right end of the Header.
width	string | number	no	None	The width is automatically calculated by Layout, but the user may overwrite using this prop.
height	string | number	no	None	The height is automatically calculated by Layout, but the user may overwrite using this prop.
hasBorder	boolean	no	true	Toggle Card border.
hasBoxShadow	boolean	no	true	Toggle Card box shadow.
hasHeaderBorder	boolean	no	true	Toggle header border seperating header and border.
style	CSSProperties	no	None	Styles applied to the root element of card.
className	string	no	None	Class applied to the root element of card.
classes	Classes	no	None	Classes of card.

Some Props mentioned above can be set in the theme prop of Theme Provider. These values will be used as default values of the Card component unless explicitly provided.

Custom Types

Classes

Classes enable customization and styling of card elements through their classes.

ClassName	Type	Required	Default value	Description
root	string	no	None	Applied to root element of card.
header	string	no	None	Applied to header of card.
title	string	no	None	Applied to title of card.
subtitle	string	no	None	Applied to subtitle of card.
body	string	no	None	Applied to body of card.
actions	string	no	None	Applied to actions element of card.

Please see Class Specificity for correctly defining it.