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

Usage

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

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

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

Props

For ECard component, the following props are available:

Prop	Type	Default	Note
shadow	Boolean	false	Adds shadow to the card.
width	String	-	Sets the card element's width.
height	String	-	Sets the card element's height.
paper	Boolean	false	It creates a paper shaped card.
square	Boolean	false	Removes rounded corners of the element.
href	String	-	This attribute creates a linked card.
to	[String, Object]	-	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.

For ECardHeader component, the following props are available:

Prop	Type	Default	Note
square	Boolean	false	Squares the corners of the card.

Slots

Each Card component provide a default slot that enable you to customize the content.

Slot	Description
default	The default Vue slot.