#### 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

3 1

##### 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

3 1

##### 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

3 1

#### 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-lg-4 col-xxl-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-lg-4 col-xxl-2 col-6">
        <div class="card text-white text-bg-success">
          <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-lg-4 col-xxl-2 col-6">
        <div class="card text-white text-bg-warning">
          <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-lg-4 col-xxl-2 col-6">
        <div class="card text-white text-bg-danger">
          <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-lg-4 col-xxl-2 col-6">
        <div class="card text-white text-bg-info">
          <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-lg-4 col-xxl-2 col-6">
        <div class="card text-white text-bg-secondary">
          <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

By John Smith

Women Heels Sandal

By Nancy Deo

Boat Wireless Headset

Yellow , On the Ear

Beauty Blender 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

##### Quick Page Links

- Analytics /dashboards/dashboard1
- eCommerce /dashboards/dashboard2
- CRM /dashboards/dashboard3
- Contacts /apps/contacts
- Posts /apps/blog/posts
- Detail /apps/blog/detail/streaming-video-way-before-it-was-cool-go-dark-tomorrow
- Shop /apps/ecommerce/shop
- Modern /dashboards/dashboard1
- Dashboard /dashboards/dashboard2
- Contacts /apps/contacts
- Posts /apps/blog/posts
- Detail /apps/blog/detail/streaming-video-way-before-it-was-cool-go-dark-tomorrow
- Shop /apps/ecommerce/shop