List component - 11
COPY
<section class="bg-dark py-5">
<div class="container">
<div class="row text-center">
<div class="col-12 col-md-4">
<!-- Item -->
<div class="mb-4 bg-white bg-opacity-10 p-4 rounded-3">
<div class="badge badge-lg badge-rounded-circle bg-light text-dark">
<span>1</span>
</div>
<h4 class="fs-5 mb-2 mt-4 text-white">
Can I use webui for my clients?
</h4>
<p class="fs-6 text-white-50">
Absolutely. The webui component, templates license allows you to build a website for personal
use or for a commercial client.
</p>
</div>
</div>
<div class="col-12 col-md-4">
<!-- Item -->
<div class="mb-4 bg-white bg-opacity-10 p-4 rounded-3">
<div>
<div class="badge badge-lg badge-rounded-circle bg-light text-dark">
<span>2</span>
</div>
<h4 class="fs-5 mb-2 mt-4 text-white">
Do I get free updates?
</h4>
<p class="fs-6 text-white-50">
Yes. We update all of our themes with each webui component update, plus are constantly
adding components and templates.
</p>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<!-- Item -->
<div class="mb-4 bg-white bg-opacity-10 p-4 rounded-3">
<div>
<div class="badge badge-lg badge-rounded-circle bg-light text-dark">
<span>3</span>
</div>
<h4 class="fs-5 mb-2 mt-4 text-white">
Is there a money back guarantee?
</h4>
<p class="fs-6 text-white-50">
Yup! webui component Themes come with a satisfaction guarantee. Submit a return and get
your
money back.
</p>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<!-- Item -->
<div class="mb-4 bg-white bg-opacity-10 p-4 rounded-3">
<div>
<div class="badge badge-lg badge-rounded-circle bg-light text-dark">
<span>4</span>
</div>
<h4 class="fs-5 mb-2 mt-4 text-white">
Does it work with JS frameworks?
</h4>
<p class="fs-6 text-white-50">
Yes. webui has basic CSS/JS files you can include. If you want to enable deeper
customization you can.
</p>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<!-- Item -->
<div class="mb-4 bg-white bg-opacity-10 p-4 rounded-3">
<div>
<div class="badge badge-lg badge-rounded-circle bg-light text-dark">
<span>5</span>
</div>
<h4 class="fs-5 mb-2 mt-4 text-white">
Is there a money back guarantee?
</h4>
<p class="fs-6 text-white-50">
Yup! webui component Themes come with a satisfaction guarantee. Submit a return and get
your
money back.
</p>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<!-- Item -->
<div class="mb-4 bg-white bg-opacity-10 p-4 rounded-3">
<div>
<div class="badge badge-lg badge-rounded-circle bg-light text-dark">
<span>6</span>
</div>
<h4 class="fs-5 mb-2 mt-4 text-white">
Do I get free updates?
</h4>
<p class="fs-6 text-white-50">
Yes. We update all of our components, templates with each webui component update, plus are constantly
adding to our component.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
}
.badge-rounded-circle {
border-radius: 50%;
display: initial;
padding: 10px 14px;
height: fit-content;
}
.fs-6 {
font-size: .95rem !important;
}
List component - 9
COPY
<section class="bg-light">
<div class="container p-2 p-md-5">
<div class="row g-3 justify-content-center mb-4 pt-3">
<div class="col-md-4">
<h2 class="fs-5 fw-medium">Course progress</h2>
<p class="text-muted">It was the remember a although lead in were through serving their assistant fame day have for its after would</p>
<div class="bg-white p-3 shadow-bb">
<div class="d-flex justify-content-between border-bottom pb-2 mb-2">
<img class="me-3 rounded-1 align-self-start" width="90" src="/html-component/images/course/html-banner.jpg" alt="">
<div class="w-100">
<div class="fw-medium">
HTML basic course <span class="badge bg-success bg-opacity-10 text-success rounded-1">NEW</span>
</div>
<div class="my-2">
<div class="progress" role="progressbar" aria-label="Success" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-success" style="width: 95%"></div>
</div>
</div>
<div class="d-flex justify-content-between text-muted small">
<div>95%</div>
<div>13 hrs spent</div>
</div>
</div>
</div>
<div class="d-flex justify-content-between border-bottom pb-2 mb-2">
<img class="me-3 rounded-1 align-self-start" width="90" src="/html-component/images/course/css-banner.jpg" alt="">
<div class="w-100">
<div class="fw-medium">
CSS basic course
</div>
<div class="my-2">
<div class="progress" role="progressbar" aria-label="Success" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-warning" style="width: 35%"></div>
</div>
</div>
<div class="d-flex justify-content-between text-muted small">
<div>35%</div>
<div>3 hrs spent</div>
</div>
</div>
</div>
<div class="d-flex justify-content-between border-bottom pb-2 mb-2">
<img class="me-3 rounded-1 align-self-start" width="90" src="/html-component/images/course/php-banner.jpg" alt="">
<div class="w-100">
<div class="fw-medium">
PHP basic course
</div>
<div class="my-2">
<div class="progress" role="progressbar" aria-label="Success" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-danger" style="width: 15%"></div>
</div>
</div>
<div class="d-flex justify-content-between text-muted small">
<div>15%</div>
<div>1 hrs spent</div>
</div>
</div>
</div>
<div class="d-flex justify-content-between pb-2">
<img class="me-3 rounded-1 align-self-start" width="90" src="/html-component/images/course/laravel-banner.jpg" alt="">
<div class="w-100">
<div class="fw-medium">
Laravel basic course
</div>
<div class="my-2">
<div class="progress" role="progressbar" aria-label="Success" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-danger" style="width: 15%"></div>
</div>
</div>
<div class="d-flex justify-content-between text-muted small">
<div>15%</div>
<div>1 hrs spent</div>
</div>
</div>
</div>
</div>
<div class="mt-2">
<a href="#" class="text-decoration-none">View All</a>
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-blue: #1264ff;
--bs-blue-rgb: 18, 100, 255;
--bs-black: #1c1a28;
--bs-primary: var(--bs-blue);
--bs-primary-rgb: var(--bs-blue-rgb);
--bs-white-rgb: 255, 255, 255;
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
a {
text-decoration: none;
color: var(--bs-secondary);
}
.fs-10 {
font-size: .80rem !important;
}
.shadow-bb {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.dropdown-menu {
--bs-dropdown-font-size: 0.8rem;
}
.progress, .progress-stacked {
--bs-progress-height: .5rem;
--bs-progress-font-size: 0.5rem;
--bs-progress-border-radius: 3px;
border-radius: var(--bs-progress-border-radius);
}
List component - 8
COPY
<section class="bg-light">
<div class="container p-2 p-md-5">
<div class="row g-3 justify-content-center mb-4 pt-3">
<div class="col-md-4">
<h2 class="fs-5 fw-medium">Product List</h2>
<div class="bg-white p-3 shadow-bb">
<div class="d-flex justify-content-between border-bottom pb-2 mb-2">
<img class="me-3 rounded-1 align-self-start" width="90" src="/html-component/images/product/shoes-woman.jpg" alt="">
<div class="mt-1 w-100">
<div class="fw-medium">
Woman shoes <span class="badge bg-success bg-opacity-10 text-success rounded-1">NEW</span>
</div>
<div class="text-muted">$25.00 - $35.00</div>
<a href="#" class="btn btn-xs btn-outline-primary shadow-sm mt-2">Details</a>
</div>
</div>
<div class="d-flex justify-content-between border-bottom pb-2 mb-2">
<img class="me-3 rounded-1 align-self-start" width="90" src="/html-component/images/product/ginger-deer.jpg" alt="">
<div class="mt-1 w-100">
<div class="fw-medium">
Ginger deer <span class="badge bg-danger bg-opacity-10 text-danger rounded-1">DISCOUNTED</span>
</div>
<div class="text-muted">$25.00 - $35.00</div>
<a href="#" class="btn btn-xs btn-outline-primary shadow-sm mt-2">Details</a>
</div>
</div>
<div class="d-flex justify-content-between border-bottom pb-2 mb-2">
<img class="me-3 rounded-1 align-self-start" width="90" src="/html-component/images/product/shower-gel.jpg" alt="">
<div class="mt-1 w-100">
<div class="fw-medium">
Shower gel <span class="badge bg-primary bg-opacity-10 text-primary rounded-1">Premium</span>
</div>
<div class="text-muted">$25.00 - $35.00</div>
<a href="#" class="btn btn-xs btn-outline-primary shadow-sm mt-2">Details</a>
</div>
</div>
<div class="d-flex justify-content-between pb-2">
<img class="me-3 rounded-1 align-self-start" width="90" src="/html-component/images/product/shoes-with-apple.jpg" alt="">
<div class="mt-1 w-100">
<div class="fw-medium">
Man shoes <span class="badge bg-info bg-opacity-10 text-info rounded-1">Shipping FREE</span>
</div>
<div class="text-muted">$25.00 - $35.00</div>
<a href="#" class="btn btn-xs btn-outline-primary shadow-sm mt-2">Details</a>
</div>
</div>
</div>
<div class="text-end">
<a href="#" class="btn btn-link text-decoration-none small">View All</a>
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-blue: #1264ff;
--bs-blue-rgb: 18, 100, 255;
--bs-black: #1c1a28;
--bs-primary: var(--bs-blue);
--bs-primary-rgb: var(--bs-blue-rgb);
--bs-white-rgb: 255, 255, 255;
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
a {
text-decoration: none;
color: var(--bs-secondary);
}
.fs-10 {
font-size: .80rem !important;
}
.shadow-bb {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.dropdown-menu {
--bs-dropdown-font-size: 0.8rem;
}
.btn-xs {
font-size: 12px;
padding: 3px 7px;
border-radius: 3px;
}
Content component - 5
COPY
<section class="bg-light py-5">
<div class="container pt-8 pt-md-11">
<div class="row">
<div class="col-12 col-md-6">
<!-- Item -->
<div class="d-flex mb-3">
<div class="badge badge-lg badge-rounded-circle bg-dark shadow-lg">
<span>1</span>
</div>
<div class="ms-4">
<h4 class="fs-5 mb-2">
Can I use webui for my clients?
</h4>
<p class="text-muted mb-6 mb-md-8">
Absolutely. The webui component license allows you to build a website for personal use
or for a client.
</p>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<!-- Item -->
<div class="d-flex mb-3">
<div class="badge badge-lg badge-rounded-circle bg-dark shadow-lg">
<span>2</span>
</div>
<div class="ms-4">
<h4 class="fs-5 mb-2">
Do I get free updates?
</h4>
<p class="text-muted mb-6 mb-md-8">
Yes. We update all of our themes with each component update, plus are constantly adding
new components, pages, and features to our themes.
</p>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<!-- Item -->
<div class="d-flex mb-3">
<div class="badge badge-lg badge-rounded-circle bg-dark shadow-lg">
<span>3</span>
</div>
<div class="ms-4">
<h4 class="fs-5 mb-2">
Is there a money back guarantee?
</h4>
<p class="text-muted mb-6 mb-md-8">
Yup! webui component, themes come with a satisfaction guarantee. Submit a return and get your
money back.
</p>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<!-- Item -->
<div class="d-flex mb-3">
<div class="badge badge-lg badge-rounded-circle bg-dark shadow-lg">
<span>4</span>
</div>
<div class="ms-4">
<h4 class="fs-5 mb-2">
Does it work with Rails? React? Laravel?
</h4>
<p class="text-muted mb-6 mb-md-8">
Yes. webui has basic CSS/JS files you can include. If you want to enable deeper
customization, you can integrate it into your assets pipeline or build processes.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
.badge-rounded-circle {
border-radius: 50%;
display: initial;
padding: 10px 12px;
height: fit-content;
}
.fs-6 {
font-size: .95rem !important;
}
.text-gray svg {
color: #999999;
}
List component - 6
COPY
<section class="bg-light py-5">
<div class="container pt-8 pt-md-11">
<div class="row">
<div class="col-12 col-md-6">
<!-- Item -->
<div class="d-flex mb-4">
<div class="">
<div class="badge badge-lg badge-rounded-circle bg-primary">
<span>1</span>
</div>
<h4 class="fs-5 mb-2 mt-4">
Can I use webui for my clients?
</h4>
<p class="fs-6 text-muted mb-6 mb-md-8">
Absolutely. The webui component Themes license allows you to build a website for personal use
or for a client.
</p>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<!-- Item -->
<div class="d-flex mb-4">
<div>
<div class="badge badge-lg badge-rounded-circle bg-success">
<span>2</span>
</div>
<h4 class="fs-5 mb-2 mt-4">
Do I get free updates?
</h4>
<p class="fs-6 text-muted mb-6 mb-md-8">
Yes. We update all of our themes with each webui component update, plus are constantly adding
new components, pages, and features to our themes.
</p>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<!-- Item -->
<div class="d-flex mb-4">
<div>
<div class="badge badge-lg badge-rounded-circle bg-danger">
<span>3</span>
</div>
<h4 class="fs-5 mb-2 mt-4">
Is there a money back guarantee?
</h4>
<p class="fs-6 text-muted mb-6 mb-md-8">
Yup! webui component Themes come with a satisfaction guarantee. Submit a return and get your
money back.
</p>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<!-- Item -->
<div class="d-flex mb-4">
<div>
<div class="badge badge-lg badge-rounded-circle bg-info">
<span>4</span>
</div>
<h4 class="fs-5 mb-2 mt-4">
Does it work with Rails? React? Laravel?
</h4>
<p class="fs-6 text-muted mb-6 mb-md-8">
Yes. webui has basic CSS/JS files you can include. If you want to enable deeper
customization, you can integrate it into your assets pipeline or build processes.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
}
.badge-rounded-circle {
border-radius: 50%;
display: initial;
padding: 10px 14px;
height: fit-content;
}
.fs-6 {
font-size: .95rem !important;
}
.text-gray svg {
color: #999999;
}
List component - 3
COPY
<section class="px-3 mt-3">
<div class="p-2 mb-0">
<div class="row">
<div class="col-md-6">
<h3 class="fs-5 my-1">Article list</h3>
</div>
<div class="col-md-4">
<div class="position-relative">
<i class="bi bi-search position-absolute sr-icon"></i>
<input type="search" class="ps-4-5 input-search form-control rounded-5 form-control-sm mt-1 bg-dark bg-opacity-10 w-100">
</div>
</div>
<div class="col-md-2 text-red">
<a href="#" class="float-end btn btn-sm rounded-5 btn-outline-primary px-3">Add New</a>
</div>
</div>
</div>
<div class="w-100 border rounded-1 p-3">
<ul class="salt-list m-0 p-0">
<li class="d-flex justify-content-between">
<div class="d-flex justify-content-sm-end">
<div class="">
<div class="fw-medium">
<a href="#">Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et
dolore magna aliqua.</a>
</div>
<div class="small text-muted mt-2">Post by: <span class="fw-medium">David Coker</span> <span class="ms-3">2ds ago</span> <span class="ms-3 me-2"><i class="bi bi-chat me-2"></i> 23 comments</span>
</div>
</div>
</div>
<div class="d-flex align-items-center">
<div>
<img class="me--2 border-2 rounded-circle" width="40" src="/html-component/images/avatar/m1.jpg" alt="">
<img class="me--2 border-2 rounded-circle" width="40" src="/html-component/images/avatar/m3.jpg" alt="">
<img class="me--2 border-2 rounded-circle" width="40" src="/html-component/images/avatar/m4.jpg" alt="">
</div>
<div class="ms-4">
<div class="dropdown">
<a href="#" class="" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical
fs-5"></i>
</a>
<ul class="dropdown-menu shadow">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="d-flex justify-content-between">
<div class="d-flex justify-content-sm-end">
<div class="">
<div class="fw-medium">
<a href="#">Dolor sit amet,
consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et
dolore magna aliqua.</a>
</div>
<div class="small text-muted mt-2">Post by: <span class="fw-medium">David Coker</span> <span class="ms-3">2ds ago</span> <span class="ms-3 me-2"><i class="bi bi-chat me-2"></i> 23 comments</span>
</div>
</div>
</div>
<div class="d-flex align-items-center">
<div>
<img class="me--2 border-2 rounded-circle" width="40" src="/html-component/images/avatar/m1.jpg" alt="">
<img class="me--2 border-2 rounded-circle" width="40" src="/html-component/images/avatar/m3.jpg" alt="">
<img class="me--2 border-2 rounded-circle" width="40" src="/html-component/images/avatar/m4.jpg" alt="">
</div>
<div class="ms-4">
<div class="dropdown">
<a href="#" class="" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical
fs-5"></i>
</a>
<ul class="dropdown-menu shadow">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="d-flex justify-content-between">
<div class="d-flex justify-content-sm-end">
<div class="">
<div class="fw-medium">
<a href="#">Adipiscing elit, sed do
eiusmod tempor incididunt ut labore et
dolore magna aliqua.</a>
</div>
<div class="small text-muted mt-2">Post by: <span class="fw-medium">David Coker</span> <span class="ms-3">2ds ago</span> <span class="ms-3 me-2"><i class="bi bi-chat me-2"></i> 23 comments</span>
</div>
</div>
</div>
<div class="d-flex align-items-center">
<div>
<img class="me--2 border-2 rounded-circle" width="40" src="/html-component/images/avatar/m1.jpg" alt="">
<img class="me--2 border-2 rounded-circle" width="40" src="/html-component/images/avatar/m3.jpg" alt="">
<img class="me--2 border-2 rounded-circle" width="40" src="/html-component/images/avatar/m4.jpg" alt="">
</div>
<div class="ms-4">
<div class="dropdown">
<a href="#" class="" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical
fs-5"></i>
</a>
<ul class="dropdown-menu shadow">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #001d7e;
--bs-secondary: #000000;
--bs-white: #ffffff;
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
a {
text-decoration: none;
color: var(--bs-primary) !important;
}
a:hover {
color: var(--bs-secondary);
}
.salt-list>li {
padding: 20px;
border-bottom: 1px solid #f3f3f3;
}
.salt-list li:last-child {
border-bottom: 0;
}
.me--2 {
margin-right: -15px;
}
.me--1 {
margin-right: -10px;
}
.border-2 {
border: 2px solid #ffffff;
}
.border-1 {
border: 1px solid #ffffff;
}
.input-search {
border: 1px solid #00000027 !important;
}
.sr-icon {
top: 7px;
left: 13px;
}
.ps-4-5 {
padding-left: 35px;
}
.input-search.bg-dark {
--bs-bg-opacity: .05;
}
Shopping cart component - 2
COPY
<section>
<div class="container py-5">
<div class="row mb-5">
<div class="col-lg-8">
<div class="cart">
<div class="cart-wrapper">
<div class="cart-header text-center py-2 bg-light fw-medium">
<div class="row">
<div class="col-5">Item</div>
<div class="col-2">Price</div>
<div class="col-2">Quantity</div>
<div class="col-2">Total</div>
<div class="col-1"></div>
</div>
</div>
<div class="cart-body">
<!-- Product-->
<div class="cart-item">
<div class="row d-flex align-items-center text-center">
<div class="col-5">
<div class="d-flex align-items-center">
<a href="#">
<img class="cart-item-img" src="/html-component/images/product/shoes-with-apple.jpg" alt="...">
</a>
<div class="cart-title text-start ps-4">
<a class="text-uppercase text-dark" href="#">
<strong>Skull Tee</strong></a><br>
<span class="text-muted text-sm">Size: Large</span><br>
<span class="text-muted text-sm">Colour: Green</span>
</div>
</div>
</div>
<div class="col-2">$65.00</div>
<div class="col-2">
<div class="d-flex align-items-center">
<div class="btn btn-items btn-items-decrease">-</div>
<input class="form-control text-center input-items" type="text" value="4">
<div class="btn btn-items btn-items-increase">+</div>
</div>
</div>
<div class="col-2 text-center">$260.00</div>
<div class="col-1 text-center">
<a class="cart-remove" href="#"> <i class="fa fa-times"></i>
</a>
</div>
</div>
</div>
<!-- Product-->
<div class="cart-item">
<div class="row d-flex align-items-center text-center">
<div class="col-5">
<div class="d-flex align-items-center">
<a href="#">
<img class="cart-item-img" src="/html-component/images/product/shoes-with-green.jpg" alt="...">
</a>
<div class="cart-title text-start ps-4">
<a class="text-uppercase text-dark" href="#"><strong>Transparent Blouse</strong>
</a>
<br>
<span class="text-muted text-sm">Size: Medium</span>
</div>
</div>
</div>
<div class="col-2">$55.00</div>
<div class="col-2">
<div class="d-flex align-items-center">
<div class="btn btn-items btn-items-decrease">-</div>
<input class="form-control text-center input-items" type="text" value="3">
<div class="btn btn-items btn-items-increase">+</div>
</div>
</div>
<div class="col-2 text-center">$165.00</div>
<div class="col-1 text-center"><a class="cart-remove" href="#"> <i class="fa fa-times"></i></a>
</div>
</div>
</div>
<!-- Product-->
<div class="cart-item">
<div class="row d-flex align-items-center text-center">
<div class="col-5">
<div class="d-flex align-items-center"><a href="#"><img class="cart-item-img" src="/html-component/images/product/shower-gel.jpg" alt="..."></a>
<div class="cart-title text-start ps-4">
<a class="text-uppercase text-dark" href="#"><strong>White Tee</strong>
</a>
<br>
<span class="text-muted text-sm">Size: Medium</span>
</div>
</div>
</div>
<div class="col-2">$55.00</div>
<div class="col-2">
<div class="d-flex align-items-center">
<div class="btn btn-items btn-items-decrease">-</div>
<input class="form-control text-center input-items" type="text" value="3">
<div class="btn btn-items btn-items-increase">+</div>
</div>
</div>
<div class="col-2 text-center">$165.00</div>
<div class="col-1 text-center"><a class="cart-remove" href="#"> <i class="fa fa-times"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="my-5 d-flex justify-content-between flex-column flex-lg-row">
<a class="btn btn-link text-muted" href="#">
<i class="fa fa-chevron-left"></i> Continue Shopping</a>
<a class="btn btn-dark" href="#">Proceed to checkout
<i class="fa fa-chevron-right"></i>
</a>
</div>
</div>
<div class="col-lg-4">
<div class="block mb-5">
<div class="block-header">
<h6 class="text-uppercase mb-3">Order Summary</h6>
</div>
<div class="block-body bg-light p-5">
<ul class="order-summary mb-0 list-unstyled">
<li class="order-summary-item fs-5"><span>Order Subtotal</span><span> $390.00</span></li>
<li class="order-summary-item mt-2"><span>Shipping and handling</span> <strong>$10.00</strong></li>
<li class="order-summary-item mt-2"><span>Tax</span><strong> $0.00</strong></li>
<li class="order-summary-item border-top mt-3 fs-5 text-primary"><span>Total</span>
<strong class="order-summary-total"> $400.00</strong>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
body {
font-size: .90rem;
}
.cart-item-img {
max-width: 80px;
}
.cart-item {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid #e9ecef;
}
List component - 2
COPY
<section class="p-4">
<div class="p-2 mb-0">
<div class="row">
<div class="col-md-6">
<h3 class="fs-5 my-1">Blog list</h3>
</div>
<div class="col-md-4">
<div class="position-relative">
<i class="bi bi-search position-absolute sr-icon"></i>
<input type="search" class="ps-4-5 input-search form-control rounded-5 form-control-sm mt-1 bg-dark bg-opacity-10 w-100">
</div>
</div>
<div class="col-md-2 text-red">
<a href="#" class="float-end btn btn-sm rounded-5 btn-outline-primary px-3">Add New</a>
</div>
</div>
</div>
<div class="w-100 border rounded-1">
<ul class="salt-list p-0 m-0">
<li class="d-flex justify-content-between">
<div class="d-flex justify-content-sm-end">
<div class="">
<div class="fw-medium">
<a href="#">Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
eiusmod
tempor incididunt ut labore et dolore
magna aliqua.</a>
</div>
<div class="text-muted mt-2"> <span class="me-2"><i class="bi bi-chat me-2"></i> 23 comments</span>
<img class="me--1 border-2 rounded-circle" width="25" src="/html-component/images/avatar/m1.jpg" alt="">
<img class="me--1 border-2 rounded-circle" width="25" src="/html-component/images/avatar/m2.jpg" alt="">
<img class="me--1 border-2 rounded-circle" width="25" src="/html-component/images/avatar/m3.jpg" alt="">
</div>
</div>
</div>
<div class="align-self-center">
<a href="#" class="mt-2">
<i class="fs-3 bi bi-arrow-right-short"></i>
</a>
</div>
</li>
<li class="d-flex justify-content-between">
<div class="d-flex justify-content-sm-end">
<div class="">
<div class="fw-medium">
<a href="#">Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
eiusmod
tempor incididunt ut labore et dolore
magna aliqua.</a>
</div>
<div class="text-muted mt-2"> <span class="me-2"><i class="bi bi-chat me-2"></i> 23 comments</span>
<img class="me--1 border-2 rounded-circle" width="25" src="/html-component/images/avatar/m1.jpg" alt="">
<img class="me--1 border-2 rounded-circle" width="25" src="/html-component/images/avatar/m2.jpg" alt="">
<img class="me--1 border-2 rounded-circle" width="25" src="/html-component/images/avatar/m3.jpg" alt="">
</div>
</div>
</div>
<div class="align-self-center">
<a href="#" class="mt-2">
<i class="fs-3 bi bi-arrow-right-short"></i>
</a>
</div>
</li>
<li class="d-flex justify-content-between">
<div class="d-flex justify-content-sm-end">
<div class="">
<div class="fw-medium">
<a href="#">Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
eiusmod
tempor incididunt ut labore et dolore
magna aliqua.</a>
</div>
<div class="text-muted mt-2"> <span class="me-2"><i class="bi bi-chat me-2"></i> 23 comments</span>
<img class="me--1 border-2 rounded-circle" width="25" src="/html-component/images/avatar/m1.jpg" alt="">
<img class="me--1 border-2 rounded-circle" width="25" src="/html-component/images/avatar/m2.jpg" alt="">
<img class="me--1 border-2 rounded-circle" width="25" src="/html-component/images/avatar/m3.jpg" alt="">
</div>
</div>
</div>
<div class="align-self-center">
<a href="#" class="mt-2">
<i class="fs-3 bi bi-arrow-right-short"></i>
</a>
</div>
</li>
<li class="d-flex justify-content-between">
<div class="d-flex justify-content-sm-end">
<div class="">
<div class="fw-medium">
<a href="#">Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
eiusmod
tempor incididunt ut labore et dolore
magna aliqua.</a>
</div>
<div class="text-muted mt-2"> <span class="me-2"><i class="bi bi-chat me-2"></i> 23 comments</span>
<img class="me--1 border-2 rounded-circle" width="25" src="/html-component/images/avatar/m1.jpg" alt="">
<img class="me--1 border-2 rounded-circle" width="25" src="/html-component/images/avatar/m2.jpg" alt="">
<img class="me--1 border-2 rounded-circle" width="25" src="/html-component/images/avatar/m3.jpg" alt="">
</div>
</div>
</div>
<div class="align-self-center">
<a href="#" class="mt-2">
<i class="fs-3 bi bi-arrow-right-short"></i>
</a>
</div>
</li>
</ul>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #001d7e;
--bs-secondary: #000000;
--bs-white: #ffffff;
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
a {
text-decoration: none;
color: var(--bs-secondary);
}
a:hover {
color: var(--bs-primary);
}
.salt-list li {
padding: 20px;
border-bottom: 1px solid #f5f5f5;
}
.salt-list li:hover {
background: #f3f3f3;
}
.salt-list li:last-child {
border-bottom: 0;
}
.me--2 {
margin-right: -15px;
}
.me--1 {
margin-right: -10px;
}
.border-2 {
border: 2px solid #ffffff;
}
.border-1 {
border: 1px solid #ffffff;
}
.input-search {
border: 1px solid #00000027 !important;
}
.sr-icon {
top: 7px;
left: 13px;
}
.ps-4-5 {
padding-left: 35px;
}
.input-search.bg-dark {
--bs-bg-opacity: .05;
}
List component - 4
COPY
<section class="p-5">
<div class="border-bottom p-2 bg-light mb-3">
<div class="row">
<div class="col-md-8">
<h3 class="fs-5 my-1">Article list</h3>
</div>
<div class="col-md-4">
<a href="#" class="float-end btn btn-sm rounded-5 btn-outline-primary px-3">Add More</a>
</div>
</div>
</div>
<div class="row list">
<div class="col-md-12">
<!-- Service item -->
<div class="d-flex mb-3 pb-3 border-bottom">
<h2 class="display-4 fa-fw fw-bolder text-end text-light-stroke">01</h2>
<div class="ms-3 ms-md-4">
<h4 class="fs-6 mb-1">Digital Strategy & Reporting</h4>
<p class="mb-2 text-dark text-opacity-75">Go he prisoners And mountains in just switching city steps Might
rung line what Mr Bulk; Was or between towards</p>
<div>
<a class="nav-link d-inline-block me-4 p-0 text-black-50 fs-xs" href="#">
<i class="bi bi-calendar3 me-2"></i>Dec 4
</a>
<a class="nav-link d-inline-block me-3 p-0 text-black-50 fs-xs" href="#">
<i class="bi bi-chat me-2"></i>2
</a>
</div>
</div>
</div>
<!-- Service item -->
<div class="d-flex mb-3 pb-3 border-bottom">
<h2 class="display-4 fa-fw fw-bolder text-end text-light-stroke">02</h2>
<div class="ms-3 ms-md-4">
<h4 class="fs-6 mb-1">Content Marketing</h4>
<p class="mb-2 text-dark text-opacity-75">It was the remember a although lead in were through serving their
assistant fame day have for its after would</p>
<div>
<a class="nav-link d-inline-block me-4 p-0 text-black-50 fs-xs" href="#">
<i class="bi bi-calendar3 me-2"></i>Dec 3
</a>
<a class="nav-link d-inline-block me-3 p-0 text-black-50 fs-xs" href="#">
<i class="bi bi-chat me-2"></i>2
</a>
</div>
</div>
</div>
<!-- Service item -->
<div class="d-flex mb-3 pb-3 ">
<h2 class="display-4 fa-fw fw-bolder text-end text-light-stroke">03</h2>
<div class="ms-3 ms-md-4">
<h4 class="fs-6 mb-1">Web Development</h4>
<p class="mb-2 text-dark text-opacity-75">Cheek dull have what in go feedback assignment Her of a any help
if the a of semantics is rational overhauls</p>
<div>
<a class="nav-link d-inline-block me-4 p-0 text-black-50 fs-xs" href="#">
<i class="bi bi-calendar3 me-2"></i>Dec 3
</a>
<a class="nav-link d-inline-block me-3 p-0 text-black-50 fs-xs" href="#">
<i class="bi bi-chat me-2"></i>2
</a>
</div>
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-green: #00992e;
--bs-black: #000000;
--bs-primary: var(--bs-green);
--bs-secondary: var(--bs-black);
--bs-text-primary: var(--bs-green);
--bs-text-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
.list a {
color: var(--bs-primary) !important;
text-decoration: none !important;
}
.list .fs-xs {
font-size: 0.75rem !important;
}
.list .text-light-stroke {
color: transparent !important;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: var(--bs-primary) !important;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
List component - 10
COPY
<section>
<div class="container py-5">
<div class="d-flex gap-2 justify-content-center py-5">
<span class="badge d-flex align-items-center p-1 pe-2 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill">
<img class="rounded-circle me-2" width="30" height="30" src="/html-component/images/avatar/m1.jpg" alt="">
Primary
<a href="#" class="ms-3">
<i class="fs-5 text-dark opacity-75 bi bi-x-circle-fill"></i>
</a>
</span>
<span class="badge d-flex align-items-center p-1 pe-2 text-secondary-emphasis bg-secondary-subtle border border-secondary-subtle rounded-pill">
<img class="rounded-circle me-2" width="30" height="30" src="/html-component/images/avatar/m2.jpg" alt="">
Secondary
<a href="#" class="ms-3">
<i class="fs-5 text-dark opacity-75 bi bi-x-circle-fill"></i>
</a>
</span>
<span class="badge d-flex align-items-center p-1 pe-2 text-success-emphasis bg-success-subtle border border-success-subtle rounded-pill">
<img class="rounded-circle me-2" width="30" height="30" src="/html-component/images/avatar/m2.jpg" alt="">
Success
<a href="#" class="ms-3">
<i class="fs-5 text-dark opacity-75 bi bi-x-circle-fill"></i>
</a>
</span>
<span class="badge d-flex align-items-center p-1 pe-2 text-danger-emphasis bg-danger-subtle border border-danger-subtle rounded-pill">
<img class="rounded-circle me-2" width="30" height="30" src="/html-component/images/avatar/m2.jpg" alt="">
Danger
<a href="#" class="ms-3">
<i class="fs-5 text-dark opacity-75 bi bi-x-circle-fill"></i>
</a>
</span>
<span class="badge d-flex align-items-center p-1 pe-2 text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-pill">
<img class="rounded-circle me-2" width="30" height="30" src="/html-component/images/avatar/m2.jpg" alt="">
Warning
<a href="#" class="ms-3">
<i class="fs-5 text-dark opacity-75 bi bi-x-circle-fill"></i>
</a>
</span>
<span class="badge d-flex align-items-center p-1 pe-2 text-info-emphasis bg-info-subtle border border-info-subtle rounded-pill">
<img class="rounded-circle me-2" width="30" height="30" src="/html-component/images/avatar/m2.jpg" alt="">
Info
<a href="#" class="ms-3">
<i class="fs-5 text-dark opacity-75 bi bi-x-circle-fill"></i>
</a>
</span>
<span class="badge d-flex align-items-center p-1 pe-2 text-light-emphasis bg-light-subtle border border-dark-subtle rounded-pill">
<img class="rounded-circle me-2" width="30" height="30" src="/html-component/images/avatar/m2.jpg" alt="">
Light
<a href="#" class="ms-3">
<i class="fs-5 text-dark opacity-75 bi bi-x-circle-fill"></i>
</a>
</span>
<span class="badge d-flex align-items-center p-1 pe-2 text-dark-emphasis bg-dark-subtle border border-dark-subtle rounded-pill">
<img class="rounded-circle me-2" width="30" height="30" src="/html-component/images/avatar/m2.jpg" alt="">
Dark
<a href="#" class="ms-3">
<i class="fs-5 text-dark opacity-75 bi bi-x-circle-fill"></i>
</a>
</span>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
}
.cart-item-img {
max-width: 80px;
}
.cart-item {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid #e9ecef;
}
List component - 1
COPY
<section class="px-3 mt-3">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="row pb-2">
<div class="col-md-8">
<h3 class="fs-5 m-0">Member list</h3>
</div>
<div class="col-md-4">
<a href="#" class="float-end btn btn-sm rounded-5 btn-outline-primary px-3">Add New</a>
</div>
</div>
<div class="w-100 border rounded-1">
<ul class="salt-list m-0 p-3">
<li class="row">
<div class="col-md-7 d-flex align-items-center">
<img class="me-3 rounded-circle" width="40" src="/html-component/images/avatar/m3.jpg" alt="">
<div class="">
<div class="text-primary fw-medium">Michael
Richard
</div>
<div class="text-muted small">richard@example.com</div>
</div>
</div>
<div class="col-md-5 ms-5 ms-md-0 d-flex
justify-content-between justify-content-md-end
align-items-center">
<div class="ms-2 ms-md-0 mt-2 mt-md-0">
<div class="text-secondary fw-medium">Co-Founder
/ CEO</div>
<div class="text-muted small">Last seen <time>1h ago</time></div>
</div>
<div class="ms-0 ms-md-5">
<div class="dropdown">
<a href="#" class="" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical
fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send
message</a></li>
<li><a class="dropdown-item" href="#">View
profile</a></li>
<li><a class="dropdown-item" href="#">Something
else here</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="row">
<div class="col-md-7 d-flex align-items-center">
<img class="me-3 rounded-circle" width="40" src="/html-component/images/avatar/m1.jpg" alt="">
<div class="">
<div class="text-primary fw-medium">Michael
Richard
</div>
<div class="text-muted small">richard@example.com</div>
</div>
</div>
<div class="col-md-5 ms-5 ms-md-0 d-flex
justify-content-between justify-content-md-end
align-items-center">
<div class="ms-2 ms-md-0 mt-2 mt-md-0">
<div class="text-secondary fw-medium">Co-Founder
/ CEO</div>
<div class="text-muted small">Last seen <time>1h ago</time></div>
</div>
<div class="ms-0 ms-md-5">
<div class="dropdown">
<a href="#" class="" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical
fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-3">
<li><a class="dropdown-item" href="#">Send
message</a></li>
<li><a class="dropdown-item" href="#">View
profile</a></li>
<li><a class="dropdown-item" href="#">Something
else here</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="row">
<div class="col-md-7 d-flex align-items-center">
<img class="me-3 rounded-circle" width="40" src="/html-component/images/avatar/m2.jpg" alt="">
<div class="">
<div class="text-primary fw-medium">Michael
Richard
</div>
<div class="text-muted small">richard@example.com</div>
</div>
</div>
<div class="col-md-5 ms-5 ms-md-0 d-flex
justify-content-between justify-content-md-end
align-items-center">
<div class="ms-2 ms-md-0 mt-2 mt-md-0">
<div class="text-secondary fw-medium">Co-Founder
/ CEO</div>
<div class="text-muted small">Last seen <time>1h ago</time></div>
</div>
<div class="ms-0 ms-md-5">
<div class="dropdown">
<a href="#" class="" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical
fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-3">
<li><a class="dropdown-item" href="#">Send
message</a></li>
<li><a class="dropdown-item" href="#">View
profile</a></li>
<li><a class="dropdown-item" href="#">Something
else here</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #0035e4;
--bs-secondary: #000000;
--bs-white: #ffffff;
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.bg-secondary {
background-color: var(--bs-secondary) !important;
}
a {
text-decoration: none;
color: var(--bs-secondary);
}
a:hover {
color: var(--bs-primary);
}
.salt-list>li {
padding: 10px 0;
border-bottom: 1px solid #f3f3f3;
}
.salt-list li:last-child {
border-bottom: 0;
}
.dropdown-menu {
--bs-dropdown-font-size: 0.9rem;
}
More coming soon
Regular license
- Free to use this design
- Customization by expert designer $20/hr
- For more information please get in touch with our marketing person - info@webui.io