Start Here

Introduction

Download

Syntax

Core Concepts

Aspect Ratio

Border Radius

Border Size

Border Style

Cursor

Display

Flex

Flex Alignment

Flex Direction

Flex Grow

Flex Position

Flex Size

Flex Width

Font

Gap

Height

Margin

Padding

Spacing

Width

UI Effects

Animations

Single Box

Multi Box

3D Box

Other

Box Shadows

OutSet Shadow

InSet Shadow

Text Shadow

OutSet Shadow

InSet Shadow

UI Widgets

Accordion

Buttons

Calendar

Card

Checks & Radio

Data Tables

DropDown

DropDown Multi Select

Gallery

Pagination

Pop-Up

Progress Bar

Skeleton

Spinners

Suggestion

Tabs

Toasts

Slider

Text Boxes

Text Editor

Tool Tip

Icons

Theme Color Shade

Color Shade

Text Color

Background Color

Border Color

Gradient

Text Gradient

Single Color

Double Color

Triple Color

Background Gradient

Single Color

Double Color

Triple Color

Border Gradient

Single Color

Double Color

Triple Color

Other Pages

Landing Pages

Top Nav 1

Top Nav 2

Side Nav 1

Forget Password

Apps

Add Data

Nav First Level

Nav Second Level

Nav Third Level

N
A
V

Stylish & Versatile Card Component

Enhance Your UI with Elegant Cards

Our responsive card component is designed to showcase content in an organized and visually appealing manner. Whether used for product listings, user profiles, or feature highlights, this card ensures a seamless and engaging experience.

Key Features:

Fully Responsive:

Easily Customizable: Adjust colors, fonts, borders, and shadows to match your brand’s identity with minimal effort.
Modern Design: A sleek and professional appearance that elevates the look and feel of your web pages.
Effortless Integration: With clean, well-structured code, our card component seamlessly integrates into any website or web application.
Optimized Performance: Built with performance in mind, our card loads quickly and enhances user experience without unnecessary delays.

Image Card

A card is a flexible and reusable UI component that organizes content into a structured layout. It is commonly used for displaying grouped information, such as user profiles, product details, or feature highlights.

What this card shows

Image:

Title:Short Heading
Description:Some Information about image
button: button or link for navigation

Card title

A card is a flexible and reusable UI component that organizes content into a structured layout.

Go To Home

Card title

A card is a flexible and reusable UI component that organizes content into a structured layout.

Go To Home

Card title

A card is a flexible and reusable UI component that organizes content into a structured layout.

Go To Home

Source Code


// card container
<div class="DyFx FxJyCtSt Gp20 FxWp">

    // card
    <div class="Br1 CrBrGy90Lt BrRs8 CrBdWe WdWpBkWd DyFx FxDnCn Pg10" style="width: 18rem;">

        // image
        <div  style="height: 12rem;">
            <img class="Wh100p Ht100p BrRs8 OtFtCr" src="~/Images/girl.jpg" alt="Card image cap">
        </div>
        // body
        <div class="Ht50p MnTp20">
            <h5 class="">Card title</h5>
            <p class="">A card is a flexible and reusable UI component that organizes content into a structured layout.</p>
            <a href="#" class="Bn CrBrTe CrBdTe CrWe">Go To Home</a>
        </div>

    </div>


    // card
    <div class="Br1 CrBrGy90Lt BrRs8 CrBdWe WdWpBkWd DyFx FxDnCn Pg10" style="width: 18rem;">

        // image
        <div  style="height: 12rem;">
            <img class="Wh100p Ht100p BrRs8 OtFtCr" src="~/Images/girl.jpg" alt="Card image cap">
        </div>
        // body
        <div class="Ht50p MnTp20">
            <h5 class="">Card title</h5>
            <p class="">A card is a flexible and reusable UI component that organizes content into a structured layout.</p>
            <a href="#" class="Bn CrBrTe CrBdTe CrWe">Go To Home</a>
        </div>

    </div>


    // card
    <div class="Br1 CrBrGy90Lt BrRs8 CrBdWe WdWpBkWd DyFx FxDnCn Pg10" style="width: 18rem;">

        // image
        <div  style="height: 12rem;">
            <img class="Wh100p Ht100p BrRs8 OtFtCr" src="~/Images/girl.jpg" alt="Card image cap">
        </div>
        // body
        <div class="Ht50p MnTp20">
            <h5 class="">Card title</h5>
            <p class="">A card is a flexible and reusable UI component that organizes content into a structured layout.</p>
            <a href="#" class="Bn CrBrTe CrBdTe CrWe">Go To Home</a>
        </div>

    </div>

</div>

Self Align Card

What this card shows

Image:

Title:Short Heading
Description:Some Information about image
button: button or link for navigation

.Card_Container

auto-fit automatically fits as many columns as space allows

.grid_Container

Takes grid row structure from parent
span:Used to set number of rows

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi obcaecati mollitia temporibus vero saepe laboriosam, corporis voluptates earum blanditiis eaque quisquam recusandae sed reiciendis iure quia quibusdam ipsa id quam?

Card Title

Source Code


// card container
<div class="cards-container">
    <div class="gridBox CrBdPe20Lt91 CrWe BrRs2p">
        <div style="height: 12rem;">
            <img class="Wh100p Ht100p BrRs8 OtFtCr" src="~/Images/girl.jpg" alt="Card image cap">
        </div>
        <h3>Card Title</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi obcaecati mollitia temporibus vero saepe laboriosam, corporis voluptates earum blanditiis eaque quisquam recusandae sed reiciendis iure quia quibusdam ipsa id quam?

        </p>
        <button class='Bn CrBrTe CrBdTe CrWe'>Button</button>
    </div>
    <div class="gridBox CrBdPk20Lt91 CrWe BrRs2p">
        <div style="height: 12rem;">
            <img class="Wh100p Ht100p BrRs8 OtFtCr" src="~/Images/girl.jpg" alt="Card image cap">
        </div>
        <h3>Card Title</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi obcaecati mollitia temporibus vero saepe laboriosam, corporis voluptates earum blanditiis eaque quisquam recusandae sed reiciendis iure quia quibusdam ipsa id quam?

        </p>
        <button class='Bn CrBrTe CrBdTe CrWe'>Button</button>
    </div>
    <div class="gridBox CrBdGn10Lt91 CrWe BrRs2p">
        <div style="height: 12rem;">
            <img class="Wh100p Ht100p BrRs8 OtFtCr" src="~/Images/girl.jpg" alt="Card image cap">
        </div>
        <h3>Card Title</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi obcaecati mollitia temporibus vero saepe laboriosam, corporis voluptates earum blanditiis eaque quisquam recusandae sed reiciendis iure quia quibusdam ipsa id quam?

        </p>
        <button class='Bn CrBrTe CrBdTe CrWe'>Button</button>
    </div>
</div>


/* Container */
.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: repeat(4, auto);
  gap: 10px;
}

/* Subgrid */
.gridBox {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    padding: 10px;
}

/* Tablets Responsiveness (700px to 900px) */
@media (max-width: 900px) and (min-width: 700px) {
  .cards-container {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    justify-items: center;
  }
}

/* Mobile Responsiveness */
@media (max-width: 699px) {
  .cards-container {
    grid-template-columns: 1fr; 
    justify-items: center;
  }
}

User Profile Card

A user profile card is a flexible and reusable UI component that organizes content into a structured layout. It is commonly used for displaying grouped information, such as user profiles, product details, or feature highlights.

What this card shows

Image: Round Image to show profile image
Name and Title:Two short headings in heirachical order
Buttons:Two buttons for navigation.

Bonnie Green

Visual Designer

Add friend Message

Source Code


// card
<div class="Br1 CrBrGy80Lt BrRs10 Pg10 CrBdBk91" style="width: 18rem;">
    <div class="DyFx FxDnCn FxAnIsCr">
        <img class="Wh100 Ht100 MnBm10 BrRs50p OtFtCr" src="~/Images/girl.jpg" alt="Bonnie image" />
        <h5 class="MnBm1 FtSe20 FtWt600 CrWe">Bonnie Green</h5>
        <span class="FtSe14 CrGy60Lt">Visual Designer</span>
        <div class="Gp10 DyFx MnTp20 MnBm10">
            <a href="#" class="Bn CrBrTe CrBdTe CrWe">Add friend</a>
            <a href="#" class="Bn CrBrTe CrBdTe CrWe">Message</a>
        </div>
    </div>
</div>

E-Commerce Card

A e-commerce card is a flexible and reusable UI component that organizes content into a structured layout. It is commonly used for displaying grouped information, such as product details, or feature highlights.

What this card Contains

Image: A clear product image.
Title:Product Title.
Rating:Rating system to show the rating of product according to reviews.
Price: Display product price.
Button: Button to naviagate the user.

Premium Brown Hair Color For Women, Look Like 16

$19

Buy

Source Code


// card
<div class="Br1 CrBrGy90Lt BrRs8 CrBdWe WdWpBkWd DyFx FxDnCn Pg10" style="width: 18rem;">

    // image
    <div style="height: 15rem;">
        <img class="Wh100p Ht100p BrRs8" style="object-fit: cover" src="~/Images/girl.jpg" alt="Card image cap">
    </div>
    // body
    <div class="Ht50p MnTp20">
        <h5 class="FtSe20 ">Premium Brown Hair Color For Women, Look Like 16</h5>
        <div class="MnTp10">
            <i class="CT-StarSolid CrOe"></i>
            <i class="CT-StarSolid CrOe"></i>
            <i class="CT-StarSolid CrOe"></i>
            <i class="CT-StarSolid CrOe"></i>
            <i class="CT-StarSolid CrOe"></i>
        </div>
        <div class="DyFx FxJyCtSeBn FxAnIsCr">
            <p class="FtSe20 FtWt900">$19</p>
            <div>
                <a href="#" class="Bn CrBrTe CrBdTe CrWe">Buy</a>
            </div>
        </div>
    </div>

</div>

Simple Card

A Simple card is a flexible and reusable UI component that organizes content into a structured layout. It is commonly used for displaying grouped information, such as user profiles, product details, or feature highlights.

New Technology in India

Here is the biggest technology news about generative AI and it's future.

Source Code


// card
<div class="DyFx FxDnCn Br1 CrBrGy80Lt BrRs10 Pg20 CrBdBk91 CrWe" style="max-width: 25rem;">

    <h5 class="FtSe32 Pg0 Mn0">New Technology in India</h5>

    <p class="FtSe14">Here is the biggest technology news about generative AI and it's future.</p>

</div>

Web Tool

Welcome Amit

Logout

Change Password

Change Email