#### UI Card

#### Card with Image

##### Card with Image - View Code

    <div class="row">
    <!-- column -->
    <div class="col-lg-4 col-md-6">
    <!-- Card -->
    <div class="card">
      <img class="card-img-top img-responsive" src="./assets/images/blog/blog-img1.jpg"
        alt="Card image cap" />
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">
          Some quick example text to build on the card title and make up the bulk of the card's content.
        </p>
        <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
    <!-- Card -->
    </div>
    <!-- column -->
    <!-- column -->
    <div class="col-lg-4 col-md-6">
    <!-- Card -->
    <div class="card">
      <img class="card-img-top img-responsive" src="./assets/images/blog/blog-img2.jpg"
        alt="Card image cap" />
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">
          Some quick example text to build on the card title and make up the bulk of the card's content.
        </p>
        <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
    <!-- Card -->
    </div>
    <!-- column -->
    <!-- column -->
    <div class="col-lg-4 col-md-6">
    <!-- Card -->
    <div class="card">
      <img class="card-img-top img-responsive" src="./assets/images/blog/blog-img3.jpg"
        alt="Card image cap" />
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">
          Some quick example text to build on the card title and make up the bulk of the card's content.
        </p>
        <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
    <!-- Card -->
    </div>
    <!-- column -->
    <!-- column -->
    <div class="col-lg-4 col-md-6">
    <!-- Card -->
    <div class="card">
      <img class="card-img-top img-responsive" src="./assets/images/blog/blog-img4.jpg"
        alt="Card image cap" />
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">
          Some quick example text to build on the card title and make up the bulk of the card's content.
        </p>
        <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
    <!-- Card -->
    </div>
    <!-- column -->
    <!-- column -->
    <div class="col-lg-4 col-md-6">
    <!-- Card -->
    <div class="card">
      <img class="card-img-top img-responsive" src="./assets/images/blog/blog-img5.jpg"
        alt="Card image cap" />
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">
          Some quick example text to build on the card title and make up the bulk of the card's content.
        </p>
        <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
    <!-- Card -->
    </div>
    <!-- column -->
    <!-- column -->
    <div class="col-lg-4 col-md-6">
    <!-- Card -->
    <div class="card">
      <img class="card-img-top img-responsive" src="./assets/images/blog/blog-img6.jpg"
        alt="Card image cap" />
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">
          Some quick example text to build on the card title and make up the bulk of the card's content.
        </p>
        <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
    <!-- Card -->
    </div>
    <!-- column -->
    </div>

#### Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

#### Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

#### Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

#### Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

#### Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

#### Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

#### Card without image

##### Card without image - View Code

    <div class="row">
    <div class="col-md-6 col-lg-3">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">James Smith</h5>
          <h6 class="card-subtitle mb-2 text-muted d-flex align-items-center"><i class="ti ti-map-pin me-1 fs-5"></i>Albania</h6>
          <p class="card-text pt-2">
            Some quick example text to build on the card title and make up the bulk of the card's content.
          </p>
          <a href="#" class="card-link">Follow</a>
          <a href="#" class="card-link">View profile</a>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-lg-3">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Michael Smith</h5>
          <h6 class="card-subtitle mb-2 text-muted d-flex align-items-center"><i class="ti ti-map-pin me-1 fs-5"></i>Belize</h6>
          <p class="card-text pt-2">
            Some quick example text to build on the card title and make up the bulk of the card's content.
          </p>
          <a href="#" class="card-link">Follow</a>
          <a href="#" class="card-link">View profile</a>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-lg-3">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Maria Hernandez</h5>
          <h6 class="card-subtitle mb-2 text-muted d-flex align-items-center"><i class="ti ti-map-pin me-1 fs-5"></i>Colombia</h6>
          <p class="card-text pt-2">
            Some quick example text to build on the card title and make up the bulk of the card's content.
          </p>
          <a href="#" class="card-link">Follow</a>
          <a href="#" class="card-link">View profile</a>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-lg-3">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">David Margaret</h5>
          <h6 class="card-subtitle mb-2 text-muted d-flex align-items-center"><i class="ti ti-map-pin me-1 fs-5"></i>Egypt</h6>
          <p class="card-text pt-2">
            Some quick example text to build on the card title and make up the bulk of the card's content.
          </p>
          <a href="#" class="card-link">Follow</a>
          <a href="#" class="card-link">View profile</a>
        </div>
      </div>
    </div>
    </div>

##### James Smith

###### Albania

Some quick example text to build on the card title and make up the bulk of the card's content.

Follow View profile

##### Michael Smith

###### Belize

Some quick example text to build on the card title and make up the bulk of the card's content.

Follow View profile

##### Maria Hernandez

###### Colombia

Some quick example text to build on the card title and make up the bulk of the card's content.

Follow View profile

##### David Margaret

###### Egypt

Some quick example text to build on the card title and make up the bulk of the card's content.

Follow View profile

#### Kichen Sink

##### Kichen Sink - View Code

    <div class="row justify-content-center">
    <div class="col-lg-4 col-md-6">
    <div class="card">
      <img src="./assets/images/blog/blog-img5.jpg" class="card-img-top" alt="..." />
      <div class="card-body p-10">
        <h5 class="card-title fs-5">Nancy Henry</h5>
        <p class="card-text">
          Some quick example text to build on the card title and make up the bulk of the card's content.
        </p>
      </div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Vestibulum at eros</li>
      </ul>
      <div class="card-body button-group d-flex align-items-stretch p-10">
        <a href="#" class="btn bg-secondary-subtle text-secondary px-2 d-flex align-items-center"><i class="ti ti-heart fs-6 me-1"></i> Like</a>
        <a href="#" class="btn bg-secondary-subtle text-secondary px-2 d-flex align-items-center"><i class="ti ti-message-circle fs-6 me-1"></i> Comment</a>
        <div class="ms-auto">
          <a href="#" class="btn bg-secondary-subtle text-secondary px-2 d-flex align-items-center flex-column flex-sm-row"><i class="ti ti-share fs-6"></i> </a>
        </div>
      </div>
    </div>
    </div>
    <div class="col-lg-4 col-md-6">
    <div class="card">
      <img src="./assets/images/blog/blog-img6.jpg" class="card-img-top" alt="..." />
      <div class="card-body p-10">
        <h5 class="card-title fs-5">George Jane</h5>
        <p class="card-text">
          Some quick example text to build on the card title and make up the bulk of the card's content.
        </p>
      </div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Vestibulum at eros</li>
      </ul>
      <div class="card-body button-group d-flex align-items-stretch p-10">
        <a href="#" class="btn bg-secondary-subtle text-secondary px-2 d-flex align-items-center"><i class="ti ti-heart fs-6 me-1"></i> Like</a>
        <a href="#" class="btn bg-secondary-subtle text-secondary px-2 d-flex align-items-center"><i class="ti ti-message-circle fs-6 me-1"></i> Comment</a>
        <div class="ms-auto">
          <a href="#" class="btn bg-secondary-subtle text-secondary px-2 d-flex align-items-center flex-column flex-sm-row"><i class="ti ti-share fs-6"></i> </a>
        </div>
      </div>
    </div>
    </div>
    <div class="col-lg-4 col-md-6">
    <div class="card">
      <img src="./assets/images/blog/blog-img8.jpg" class="card-img-top" alt="..." />
      <div class="card-body p-10">
        <h5 class="card-title fs-5">Samuel Eliza</h5>
        <p class="card-text">
          Some quick example text to build on the card title and make up the bulk of the card's content.
        </p>
      </div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Vestibulum at eros</li>
      </ul>
      <div class="card-body button-group d-flex align-items-stretch p-10">
        <a href="#" class="btn bg-secondary-subtle text-secondary px-2 d-flex align-items-center"><i class="ti ti-heart fs-6 me-1"></i> Like</a>
        <a href="#" class="btn bg-secondary-subtle text-secondary px-2 d-flex align-items-center"><i class="ti ti-message-circle fs-6 me-1"></i> Comment</a>
        <div class="ms-auto">
          <a href="#" class="btn bg-secondary-subtle text-secondary px-2 d-flex align-items-center flex-column flex-sm-row"><i class="ti ti-share fs-6"></i> </a>
        </div>
      </div>
    </div>
    </div>
    </div>

##### Nancy Henry

Some quick example text to build on the card title and make up the bulk of the card's content.

- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros

Like Comment

##### George Jane

Some quick example text to build on the card title and make up the bulk of the card's content.

- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros

Like Comment

##### Samuel Eliza

Some quick example text to build on the card title and make up the bulk of the card's content.

- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros

Like Comment

#### Header and footer Card

##### Header and footer Card - View Code

    <div class="row">
    <div class="col-lg-6">
      <div class="card">
        <div class="card-header">Featured</div>
        <div class="card-body">
          <h5 class="card-title">Special title treatment</h5>
          <p class="card-text">
            With supporting text below as a natural lead-in to additional content.
          </p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="card text-center">
        <div class="card-header">Featured</div>
        <div class="card-body">
          <h5 class="card-title">Special title treatment</h5>
          <p class="card-text">
            With supporting text below as a natural lead-in to additional content.
          </p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    </div>

Featured

##### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Featured

##### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

#### Card with background

##### Card with background - View Code

    <div class="row gx-3">
    <div class="col-md-4 col-lg-2 col-6">
    <div class="card text-white bg-primary rounded">
      <div class="card-body p-4">
        <span>
          <i class="ti ti-layout-grid fs-8"></i>
        </span>
        <h3 class="card-title mt-3 mb-0 text-white">450</h3>
        <p class="card-text text-white-50 fs-3 fw-normal">
          New Products
        </p>
      </div>
    </div>
    </div>
    <div class="col-md-4 col-lg-2 col-6">
    <div class="card text-white text-bg-success rounded">
      <div class="card-body p-4">
        <span>
          <i class="ti ti-archive fs-8"></i>
        </span>
        <h3 class="card-title mt-3 mb-0 text-white">50</h3>
        <p class="card-text text-white-50 fs-3 fw-normal">
          Pending Apps
        </p>
      </div>
    </div>
    </div>
    <div class="col-md-4 col-lg-2 col-6">
    <div class="card text-white text-bg-warning rounded">
      <div class="card-body p-4">
        <span>
          <i class="ti ti-users fs-8"></i>
        </span>
        <h3 class="card-title mt-3 mb-0 text-white">80</h3>
        <p class="card-text text-white-50 fs-3 fw-normal">
          New Customers
        </p>
      </div>
    </div>
    </div>
    <div class="col-md-4 col-lg-2 col-6">
    <div class="card text-white text-bg-danger rounded">
      <div class="card-body p-4">
        <span>
          <i class="ti ti-gift fs-8"></i>
        </span>
        <h3 class="card-title mt-3 mb-0 text-white">15</h3>
        <p class="card-text text-white-50 fs-3 fw-normal">
          Birthday Gifts
        </p>
      </div>
    </div>
    </div>
    <div class="col-md-4 col-lg-2 col-6">
    <div class="card text-white text-bg-info rounded">
      <div class="card-body p-4">
        <span>
          <i class="ti ti-credit-card fs-8"></i>
        </span>
        <h3 class="card-title mt-3 mb-0 text-white">1800</h3>
        <p class="card-text text-white-50 fs-3 fw-normal">
          Total Budgets
        </p>
      </div>
    </div>
    </div>
    <div class="col-md-4 col-lg-2 col-6">
    <div class="card text-white text-bg-secondary rounded">
      <div class="card-body p-4">
        <span>
          <i class="ti ti-brand-github fs-8"></i>
        </span>
        <h3 class="card-title mt-3 mb-0 text-white">90</h3>
        <p class="card-text text-white-50 fs-3 fw-normal">
          Best Designers
        </p>
      </div>
    </div>
    </div>
    </div>

### 450

New Products

### 50

Pending Apps

### 80

New Customers

### 15

Birthday Gifts

### 1800

Total Budgets

### 90

Best Designers

#### Advertise card

50% sell on wrist watch

###### By Daniel Jubile

Small Cabin Luggage (57 cm)

###### By John Smith

Women Black Heels Sandal

###### By Nancy Deo

Boat BassHeads 900 Wireless Headset

###### Yellow , On the Ear

Beauty Blender original makeup blender

###### By Nancy Deo

Canvas Shoes For Men

###### Absolute Comfort

#### Stats card

#### Selling Products

###### Shoes, Jeans, Party wear, Watchs

#### Spicy Food

###### Black Bean and Corn Jalapeño Poppers

#### Dispatch Products

###### Shoes, Jeans, Party wear, Watchs

#### Apple Accessories

###### Magsafe charger, Solo Loop

#### Manage Data

###### on mobile, on site

#### New Notifications

###### Facebook, Instagram

#### Card Header

#### Card Title

### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

#### Card Title

### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

#### Card Title

### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

#### Card Title

### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

#### Card Title

### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

#### Card Title

### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

#### Progress Card

#### Outbound calls

( 18% High )

###### Yearly

80.40%

###### Montly

15.40%

###### Day

5.50%
Learn More
60% Complete

#### Contracts closed

( 10% Down )

###### Yearly

80.40%

###### Montly

15.40%

###### Day

5.50%
Learn More
60% Complete

#### Call/Contract Ratio

( 10% Down )

###### Yearly

80.40%

###### Montly

15.40%

###### Day

5.50%
Learn More
60% Complete

#### Incoming Deals

( 06% Down )

###### Yearly

80.40%

###### Montly

15.40%

###### Day

5.50%
Learn More
60% Complete

#### Average Contract

( 04% Down )

###### Yearly

80.40%

###### Montly

15.40%

###### Day

5.50%
Learn More
60% Complete

#### Contract Rate

( 15% Down )

###### Yearly

80.40%

###### Montly

15.40%

###### Day

5.50%
Learn More
60% Complete

#### Google Drive

60% Complete
13.1Gb
15Gb

#### Facebook

50% Complete
7.5Gb
15Gb

#### One Drive

50% Complete
2Gb
15Gb

#### Amazon

50% Complete
4Gb
15Gb

#### Category Card

#### My Photos

###### 2.4GB Junk File

Folder: 26 Items: 159 Used: 23.6GB

#### My Google Docs

###### 2.4GB Junk File

Folder: 26 Items: 159 Used: 23.6GB

#### My Google Contacts

###### 2.4GB Junk File

Folder: 45 Items: 78 Used: 3.6GB

#### My Folder

###### 2.4GB Junk File

Folder: 45 Items: 78 Used: 3.6GB

#### My Downloads

###### 2.4GB Junk File

Folder: 45 Items: 78 Used: 3.6GB

#### Office Work

###### 2.4GB Junk File

Folder: 4 Items: 4800 Used: 2.6GB

#### Notes Card

#### Design Project

notes.zip
File 1
File 2
File 3

#### Wedding Plans

notes.zip
photo.jpg
songs.mp3
design.mp4

#### Finances

File 1
File 2
File 3
File 4

#### Meal Plans

File 1
File 2
File 3
File 4

#### Card with Action

#### Title

#### Special title treatment

With supporting text below as a natural lead-in to additional content.

With supporting text below as a natural lead-in to additional content.

With supporting text below as a natural lead-in to additional content.

#### Title

#### Special title treatment

With supporting text below as a natural lead-in to additional content.

With supporting text below as a natural lead-in to additional content.

With supporting text below as a natural lead-in to additional content.

#### Title

#### Special title treatment

With supporting text below as a natural lead-in to additional content.

With supporting text below as a natural lead-in to additional content.

With supporting text below as a natural lead-in to additional content.

#### Title

#### Special title treatment

With supporting text below as a natural lead-in to additional content.

With supporting text below as a natural lead-in to additional content.

With supporting text below as a natural lead-in to additional content.

#### Settings

###### Theme

Light Dark

###### Theme Direction

LTR RTL

###### Theme Colors

###### Layout Type

Vertical
Horizontal

###### Container Option

Boxed Full

###### Sidebar Type

Full
Collapse

###### Card With

Border Shadow