Card component - 3
COPY
<section class="pt-1 pt-xl-3 pb-5 text-center">
<div class="container my-4">
<div class="mb-4">
<h1 class="my-2">Blandit faucibus non</h1>
<p class="text-muted">Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse
gravida hendrerit
scelerisque tempus placerat.</p>
</div>
<div class="row g-3">
<div class="col-md-3">
<div class="card shadow-sm border rounded-1 pb-3">
<div class="card-body p-4">
<div class="my-3 text-primary">
<i class="bi bi-android2 fs-3"></i>
</div>
<h3 class="h5 pb-1 mb-2">Video Courses</h3>
<p class="text-muted lh-sm">Leo condimentum dignissim venenatis sit venenatis sit
dignissim
vel. Adipiscing tristique
dictum vitae elementum neque.</p>
<a href="#" class="btn btn-outline-primary btn-sm rounded-5 px-3 small">More</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card shadow-sm border rounded-1 pb-3">
<div class="card-body p-4">
<div class="my-3 text-success">
<i class="bi bi-bag-heart fs-3"></i>
</div>
<h3 class="h5 pb-1 mb-2">Based Learning</h3>
<p class="text-muted lh-sm">Leo condimentum dignissim venenatis sit venenatis sit
dignissim
vel. Adipiscing tristique
dictum vitae elementum neque.</p>
<a href="#" class="btn btn-outline-success btn-sm rounded-5 px-3 small">More</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card shadow-sm border rounded-1 pb-3">
<div class="card-body p-4">
<div class="my-3 text-danger">
<i class="bi bi-dice-5 fs-3"></i>
</div>
<h3 class="h5 pb-1 mb-2">Lifetime Access</h3>
<p class="text-muted lh-sm">Leo condimentum dignissim venenatis sit venenatis sit
dignissim
vel. Adipiscing tristique
dictum vitae elementum neque.</p>
<a href="#" class="btn btn-outline-danger btn-sm rounded-5 px-3 small">More</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card shadow-sm border rounded-1 pb-3">
<div class="card-body p-4">
<div class="my-3 text-info">
<i class="bi bi-patch-question fs-3"></i>
</div>
<h3 class="h5 pb-1 mb-2">Condimentum Sit</h3>
<p class="text-muted lh-sm">Leo condimentum dignissim venenatis sit venenatis sit
dignissim
vel. Adipiscing tristique
dictum vitae elementum neque.</p>
<a href="#" class="btn btn-outline-info btn-sm rounded-5 px-3 small">More</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card shadow-sm border rounded-1 pb-3">
<div class="card-body p-4">
<div class="my-3 text-danger">
<i class="bi bi-dice-5 fs-3"></i>
</div>
<h3 class="h5 pb-1 mb-2">Lifetime Access</h3>
<p class="text-muted lh-sm">Leo condimentum dignissim venenatis sit venenatis sit
dignissim
vel. Adipiscing tristique
dictum vitae elementum neque.</p>
<a href="#" class="btn btn-outline-danger btn-sm rounded-5 px-3 small">More</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card shadow-sm border rounded-1 pb-3">
<div class="card-body p-4">
<div class="my-3 text-success">
<i class="bi bi-bag-heart fs-3"></i>
</div>
<h3 class="h5 pb-1 mb-2">Based Learning</h3>
<p class="text-muted lh-sm">Leo condimentum dignissim venenatis sit venenatis sit
dignissim
vel. Adipiscing tristique
dictum vitae elementum neque.</p>
<a href="#" class="btn btn-outline-success btn-sm rounded-5 px-3 small">More</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card shadow-sm border rounded-1 pb-3">
<div class="card-body p-4">
<div class="my-3 text-primary">
<i class="bi bi-android2 fs-3"></i>
</div>
<h3 class="h5 pb-1 mb-2">Video Courses</h3>
<p class="text-muted lh-sm">Leo condimentum dignissim venenatis sit venenatis sit
dignissim
vel. Adipiscing tristique
dictum vitae elementum neque.</p>
<a href="#" class="btn btn-outline-primary btn-sm rounded-5 px-3 small">More</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card shadow-sm border rounded-1 pb-3">
<div class="card-body p-4">
<div class="my-3 text-danger">
<i class="bi bi-dice-5 fs-3"></i>
</div>
<h3 class="h5 pb-1 mb-2">Lifetime Access</h3>
<p class="text-muted lh-sm">Leo condimentum dignissim venenatis sit venenatis sit
dignissim
vel. Adipiscing tristique
dictum vitae elementum neque.</p>
<a href="#" class="btn btn-outline-danger btn-sm rounded-5 px-3 small">More</a>
</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');
:root {
--bs-bg-light: #f0f2f5;
}
body {
font-family: 'Inter', sans-serif;
font-size: .90rem;
background: var(--bs-bg-light);
}
Card component - 10
COPY
<section class="card-section">
<div class="container-fluid p-5 m-0">
<div class="row g-0 justify-content-center">
<div class="col-md-4">
<div class="card rounded-0 border-white">
<div class="card-header border-0 p-0">
<img src="/component/images/service/service-3.jpg" alt="" class="img-fluid">
</div>
<div class="card-body">
<div class="p-2 my-2 my-md-3">
<h4 class="fs-6 text-sub fw-normal">Viverra dui mi arcu sed</h4>
<h3 class="fs-3 hero-title py-1 fw-semibold">
Viverra dui mi arcu
</h3>
<p class="mb-3">
Vulputate commodo tincidunt risus. Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse
semper morbi..
</p>
<a href="#" class="text-decoration-none text-uppercase fs-8">View details <i class="bi bi-arrow-right ms-2"></i></a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card rounded-0 border-white">
<div class="card-header border-0 p-0">
<img src="/component/images/service/service-1.jpg" alt="" class="img-fluid">
</div>
<div class="card-body">
<div class="p-2 my-2 my-md-3">
<h4 class="fs-6 text-sub fw-normal">Viverra dui mi arcu sed</h4>
<h3 class="fs-3 hero-title py-1 fw-semibold">
Viverra dui mi arcu
</h3>
<p class="mb-3">
Vulputate commodo tincidunt risus. Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse
semper morbi..
</p>
<a href="#" class="text-decoration-none text-uppercase fs-8">View details <i class="bi bi-arrow-right ms-2"></i></a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card rounded-0 border-white">
<div class="card-header border-0 p-0">
<img src="/component/images/service/ux-research.jpg" alt="" class="img-fluid">
</div>
<div class="card-body">
<div class="p-2 my-2 my-md-3">
<h4 class="fs-6 text-sub fw-normal">Viverra dui mi arcu sed</h4>
<h3 class="fs-3 hero-title py-1 fw-semibold">
Viverra dui mi arcu
</h3>
<p class="mb-3">
Vulputate commodo tincidunt risus. Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse
semper morbi..
</p>
<a href="#" class="text-decoration-none text-uppercase fs-8">View details <i class="bi bi-arrow-right ms-2"></i></a>
</div>
</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: #a2c700;
--bs-green-dark: #819e00;
--bs-primary: var(--bs-green);
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
a {
color: var(--bs-white);
}
a:hover {
color: var(--bs-black);
}
.card {
background: var(--bs-primary);
}
.card:hover {
background: var(--bs-green-dark);
color: #fff;
}
.card-section .hero-title {
font-weight: 400;
}
.card-section .text-sub {
color: var(--bs-white) !important;
}
.fs-7 {
font-size: .90rem;
}
.fs-8 {
font-size: .85rem;
}
.card {
overflow: hidden;
}
.card:hover .card-header img {
-webkit-transform: scale(1.08);
transform: scale(1.08);
}
.card-header img {
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
Card component - 1
COPY
<section class="text-center bg-light h-100v p-section">
<div class="container vertical-center p-5">
<div class="row justify-content-center mt-5 mb-3">
<div class="col-md-8">
<h1>Finibus Bonorum</h1>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
provident.</p>
</div>
</div>
<div class="row g-3 justify-content-center mb-4 pt-3">
<div class="col-md-2">
<div class="card mb-2 m-3 m-md-0">
<div class="card-body">
<h6 class="pt-2">Shophia</h6>
<div class="px-2 px-lg-3 px-xxl-4 pb-3">
<img src="/component/images/avatar/m5.jpg" class="img-fluid rounded-circle border p-1">
</div>
<h6>Shophia Lg</h6>
</div>
</div>
</div>
<div class="col-md-2">
<div class="card mb-2 m-3 m-md-0">
<div class="card-body">
<h6 class="pt-2">David</h6>
<div class="px-2 px-lg-3 px-xxl-4 pb-3">
<img src="/component/images/avatar/m2.jpg" class="img-fluid rounded-circle border p-1">
</div>
<h6>Tom Lowriyan</h6>
</div>
</div>
</div>
<div class="col-md-2">
<div class="card mb-2 m-3 m-md-0">
<div class="card-body">
<h6 class="pt-2">Tom</h6>
<div class="px-2 px-lg-3 px-xxl-4 pb-3">
<img src="/component/images/avatar/m6.jpg" class="img-fluid rounded-circle border p-1">
</div>
<h6>Tom Lowriyan</h6>
</div>
</div>
</div>
<div class="col-md-2">
<div class="card mb-2 m-3 m-md-0">
<div class="card-body">
<h6 class="pt-2">Tom</h6>
<div class="px-2 px-lg-3 px-xxl-4 pb-3">
<img src="/component/images/avatar/m4.jpg" class="img-fluid rounded-circle border p-1">
</div>
<h6>Tom Lowriyan</h6>
</div>
</div>
</div>
<div class="col-md-2">
<div class="card mb-2 m-3 m-md-0">
<div class="card-body">
<h6 class="pt-2">Tom</h6>
<div class="px-2 px-lg-3 px-xxl-4 pb-3">
<img src="/component/images/avatar/m1.jpg" class="img-fluid rounded-circle border p-1">
</div>
<h6>Tom Lowriyan</h6>
</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');
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
.h-100v {
height: 100vh;
}
.p-section {
background: #dddddd url(/component/images/bg/pattern3.svg);
background-size: 100%;
background-repeat: no-repeat;
}
Card component - 7
COPY
<section class="">
<div class="container my-5">
<div class="row">
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<div class="card border-0">
<a href="#" class="card-metro border-0 rounded-2">
<div class="card-image">
<img src="/component/images/portrait/portrait-011s.jpg" class="img-fluid" alt="card image">
</div>
</a>
<div class="d-flex flex-column mt-2 p-3">
<div class="mt-auto card-text">
<h4 class="fs-5 text-truncate">Tempor exercitation</h4>
<p class="small">Quis nostrud exercitation ullamco laboris exercitation ullamco laboris..
</p>
<a href="#" class="text-decoration-none" title="More">More <i class="bi bi-arrow-right ms-2"></i></a>
</div>
</div>
</div>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<div class="card border-0">
<a href="#" class="card-metro border-0 rounded-2">
<div class="card-image">
<img src="/component/images/portrait/portrait-022s.jpg" class="img-fluid" alt="card image">
</div>
</a>
<div class="d-flex flex-column mt-2 p-3">
<div class="mt-auto card-text">
<h4 class="fs-5 text-truncate">Tempor incididunt</h4>
<p class="small">Quis nostrud exercitation ullamco laboris exercitation ullamco laboris..
</p>
<a href="#" class="text-decoration-none" title="More">More <i class="bi bi-arrow-right ms-2"></i></a>
</div>
</div>
</div>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<div class="card border-0">
<a href="#" class="card-metro border-0 rounded-2">
<div class="card-image">
<img src="/component/images/portrait/portrait-044s.jpg" class="img-fluid" alt="card image">
</div>
</a>
<div class="d-flex flex-column mt-2 p-3">
<div class="mt-auto card-text">
<h4 class="fs-5 text-truncate">Usmod incididunt</h4>
<p class="small">Quis nostrud exercitation ullamco laboris exercitation ullamco laboris..
</p>
<a href="#" class="text-decoration-none" title="More">More <i class="bi bi-arrow-right ms-2"></i></a>
</div>
</div>
</div>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<div class="card border-0">
<a href="#" class="card-metro border-0 rounded-2">
<div class="card-image">
<img src="/component/images/portrait/portrait-033s.jpg" class="img-fluid" alt="card image">
</div>
</a>
<div class="d-flex flex-column mt-2 p-3">
<div class="mt-auto card-text">
<h4 class="fs-5 text-truncate">Eiusmod tempor</h4>
<p class="small">Quis nostrud exercitation ullamco laboris exercitation ullamco laboris..</p>
<a href="#" class="text-decoration-none" title="More">More <i class="bi bi-arrow-right ms-2"></i></a>
</div>
</div>
</div>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<div class="card border-0">
<a href="#" class="card-metro border-0 rounded-2">
<div class="card-image">
<img src="/component/images/portrait/portrait-033s.jpg" class="img-fluid" alt="card image">
</div>
</a>
<div class="d-flex flex-column mt-2 p-3">
<div class="mt-auto card-text">
<h4 class="fs-5 text-truncate">Eiusmod incididunt</h4>
<p class="small">Quis nostrud exercitation ullamco laboris exercitation ullamco laboris..</p>
<a href="#" class="text-decoration-none" title="More">More <i class="bi bi-arrow-right ms-2"></i></a>
</div>
</div>
</div>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<div class="card border-0">
<a href="#" class="card-metro border-0 rounded-2">
<div class="card-image">
<img src="/component/images/portrait/portrait-033s.jpg" class="img-fluid" alt="card image">
</div>
</a>
<div class="d-flex flex-column mt-2 p-3">
<div class="mt-auto card-text">
<h4 class="fs-5 text-truncate">Eiusmod tempor</h4>
<p class="small">Quis nostrud exercitation ullamco laboris exercitation ullamco laboris..</p>
<a href="#" class="text-decoration-none" title="More">More <i class="bi bi-arrow-right ms-2"></i></a>
</div>
</div>
</div>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<div class="card border-0">
<a href="#" class="card-metro border-0 rounded-2">
<div class="card-image">
<img src="/component/images/portrait/portrait-033s.jpg" class="img-fluid" alt="card image">
</div>
</a>
<div class="d-flex flex-column mt-2 p-3">
<div class="mt-auto card-text">
<h4 class="fs-5 text-truncate">Eiusmod incididunt</h4>
<p class="small">Quis nostrud exercitation ullamco laboris exercitation ullamco laboris..</p>
<a href="#" class="text-decoration-none" title="More">More <i class="bi bi-arrow-right ms-2"></i></a>
</div>
</div>
</div>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<div class="card border-0">
<a href="#" class="card-metro border-0 rounded-2">
<div class="card-image">
<img src="/component/images/portrait/portrait-033s.jpg" class="img-fluid" alt="card image">
</div>
</a>
<div class="d-flex flex-column mt-2 p-3">
<div class="mt-auto card-text">
<h4 class="fs-5 text-truncate">Eiusmod incididunt</h4>
<p class="small">Quis nostrud exercitation ullamco laboris exercitation ullamco laboris..</p>
<a href="#" class="text-decoration-none" title="More">More <i class="bi bi-arrow-right ms-2"></i></a>
</div>
</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-light: #f0f2f5;
--bs-dark-light: #e3e6eb;
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
.card-metro {
overflow: hidden;
}
.card-metro:hover .card-image img {
-webkit-transform: scale(1.08);
transform: scale(1.08);
}
.card-metro img {
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.card {
background: var(--bs-light);
}
.card:hover {
background: var(--bs-dark-light);
}
More coming soon