Cards

Cards serve as containers for various web content. They offer a basic overview of the most relevant data for a subject or problem. It is important to arrange elements such as text and photos in a way that makes sense of hierarchy. Demo Here

Import

import ECard from "@components/Elements/ECard";
import ECardHeader from "@components/Elements/ECard/ECardHeader";
import ECardBody from "@components/Elements/ECard/ECardBody";
import ECardFooter from "@components/Elements/ECard/ECardFooter";

Usage

Card components can vary to accommodate the many sorts of material they carry. The following components are frequently seen in that variation.

1. ‍ECard
2. ECardHeader
3. ECardBody
4. ECardFooter

<ECard>
  <ECardHeader>
    title
  </ECardHeader>
  <ECardBody>
    content
  </ECardBody>
  <ECardFooter>
    footer
  </ECardFooter>
</ECard>

Props

For ECard component, the following props are available:

Prop	Type	Default	Note
shadow	Boolean	false	Adds shadow to the card.
width	[String, Number]	-	Sets the card element's width. Default unit is px.
height	[String, Number]	-	Sets the card element's height. Default unit is px.
paper	Boolean	false	It creates a paper shaped card.
square	Boolean	false	Squares the corners of the card.
href	String	-	This attribute creates a linked card.
to	String	-	This attribute creates a linked card.
target	String	"_self"	It specifies where to open the linked document. _self opens the linked document in the same frame as it was clicked.
className	String	-	Overrides or extends the component's styles.

For ECardHeader component, the following props are available:

Prop	Type	Default	Note
square	Boolean	false	Squares the corners of the card.
className	String	-	Overrides or extends the component's styles.

For ECardBody component, the following props are available:

Prop	Type	Default	Note
className	String	-	Overrides or extends the component's styles.

For ECardFooter component, the following props are available:

Prop	Type	Default	Note
className	String	-	Overrides or extends the component's styles.

Children

Each Card component provides a children props that enable you to customize the content.

Children	Description
✔️	Component's content.