Cards
Cards are pre-built containers that provides a short and crisp information to the user through text, images, links, and buttons
Default Card
These cards are text only with a header and a text.
Examples
This is a Heading
This is a sub-heading
In officia laborum tempor voluptate id Lorem velit elit aliqua aliqua duis ad voluptate ex.
This is a Heading
This is a sub-heading
In officia laborum tempor voluptate id Lorem velit elit aliqua
aliqua duis ad voluptate ex.
Card with image
These cards provide content with images inside. Use .card-img class to add images to the card.
Examples
This is a Heading
This is a sub-heading
In officia laborum tempor voluptate id Lorem velit elit aliqua aliqua duis ad voluptate ex.
This is a Heading
This is a sub-heading
In officia laborum tempor voluptate id Lorem velit elit aliqua
aliqua duis ad voluptate ex.
Image, Title, and buttons
Use the .btn-grp container with .btn class
to get the buttons.
Examples
Image, buttons, and icons
Use the .icon-grp class to get the icons
Examples
Image, footer, buttons, and icons
Use the .c-footer to create the footer.
Examples
Text over Image
Add your headings over the image using the below code.
Examples
This is a Heading
This is a sub-heading
In officia laborum tempor voluptate id Lorem velit elit aliqua aliqua duis ad voluptate ex.
This is a Heading
This is a sub-heading
In officia laborum tempor voluptate id Lorem velit elit aliqua
aliqua duis ad voluptate ex.
Horizontal Card
You can also use a compact horizontal card in your project with the below code.
Examples
Product Card
You can use a badge card in your project with the below code.
Examples
New
CATEGORY
PRODUCT NAME
Rs.200 Rs. 490
favorite_border
New
CATEGORY
PRODUCT NAME
Rs.200 Rs. 490
Buy Now
Card with Badge
You can use a badge card in your project with the below code.
Examples
This is a Heading
This is a sub-heading
In officia laborum tempor voluptate id Lorem velit elit aliqua aliqua duis ad voluptate ex.
This is a Heading
This is a sub-heading
In officia laborum tempor voluptate id Lorem velit elit aliqua
aliqua duis ad voluptate ex.
Cards with dismiss
Cards can also have a dismiss option where you can cancel or delete a card
Examples
This is a Heading
This is a sub-heading
In officia laborum tempor voluptate id Lorem velit elit aliqua aliqua duis ad voluptate ex.
close
This is a Heading
This is a sub-heading
In officia laborum tempor voluptate id Lorem velit elit aliqua
aliqua duis ad voluptate ex.