Cards - Grid
Component #1
<!-- Articles Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-md-80 w-lg-60 text-center mx-md-auto mb-5 mb-md-9">
<h2>Analytics solutions</h2>
</div>
<!-- End Title -->
<div class="row">
<div class="col-md-6 col-lg-4 mb-3 mb-lg-0">
<!-- Card -->
<a class="card card-hover-shadow card-bg-light h-100 overflow-hidden transition-3d-hover" href="#">
<div class="row align-items-center">
<div class="col-8 col-md-6">
<div class="py-4 pl-4">
<h2 class="h4">Analytics you can trust</h2>
<span class="font-size-1 font-weight-bold">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</div>
</div>
<div class="col-4 col-md-6 h-100">
<img class="position-absolute top-0 right-0 w-100 h-100" src="../../assets/svg/illustrations/apps.svg" alt="SVG">
</div>
</div>
</a>
<!-- End Card -->
</div>
<div class="col-md-6 col-lg-4 mb-3 mb-lg-0">
<!-- Card -->
<a class="card card-hover-shadow card-bg-light h-100 overflow-hidden transition-3d-hover" href="#">
<div class="row align-items-center">
<div class="col-8 col-md-6">
<div class="py-4 pl-4">
<h2 class="h4">Scheduling made simple</h2>
<span class="font-size-1 font-weight-bold">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</div>
</div>
<div class="col-4 col-md-6 h-100">
<img class="position-absolute top-0 right-0 w-100 h-100" src="../../assets/svg/illustrations/calendar.svg" alt="SVG">
</div>
</div>
</a>
<!-- End Card -->
</div>
<div class="col-md-6 col-lg-4">
<!-- Card -->
<a class="card card-hover-shadow card-bg-light h-100 overflow-hidden transition-3d-hover" href="#">
<div class="row align-items-center">
<div class="col-8 col-md-6">
<div class="py-4 pl-4">
<h2 class="h4">Listening made easy</h2>
<span class="font-size-1 font-weight-bold">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</div>
</div>
<div class="col-4 col-md-6 h-100">
<img class="position-absolute top-0 right-0 w-100 h-100" src="../../assets/svg/illustrations/communication.svg" alt="SVG">
</div>
</div>
</a>
<!-- End Card -->
</div>
</div>
</div>
<!-- End Articles Section -->
Component #2
<!-- FAQ Section -->
<div class="container space-2">
<div class="row">
<div class="col-lg-6 mb-3 mb-lg-5">
<a class="card card-frame h-100" href="#">
<div class="card-body">
<!-- Icon Block -->
<div class="media d-block d-sm-flex">
<figure class="w-100 max-w-8rem mb-2 mb-sm-0 mr-sm-4">
<img class="img-fluid" src="../assets/svg/icons/icon-1.svg" alt="SVG">
</figure>
<div class="media-body">
<h2 class="h3">Getting started</h2>
<p class="font-size-1 text-body">Welcome to Front! We're so glad you're here. Let's get started!</p>
<div class="media">
<!-- Contributors List -->
<div class="avatar-group mr-2">
<div class="avatar avatar-xs avatar-circle">
<img class="avatar-img" src="../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
<div class="avatar avatar-xs avatar-circle">
<img class="avatar-img" src="../assets/img/100x100/img8.jpg" alt="Image Description">
</div>
</div>
<!-- End Contributors List -->
<div class="media-body">
<!-- Article Authors -->
<small class="d-block text-dark">1 article in this collection</small>
<small class="d-block text-dark">
<span class="text-muted">Written by</span>
Luisa Woodfine
<span class="text-muted">and</span>
Neil Galavan
</small>
<!-- End Article Authors -->
</div>
</div>
</div>
</div>
<!-- End Icon Block -->
</div>
</a>
</div>
<div class="col-lg-6 mb-3 mb-lg-5">
<a class="card card-frame h-100" href="#">
<div class="card-body">
<!-- Icon Block -->
<div class="media d-block d-sm-flex">
<figure class="w-100 max-w-8rem mb-2 mb-sm-0 mr-sm-4">
<img class="img-fluid" src="../assets/svg/icons/icon-46.svg" alt="SVG">
</figure>
<div class="media-body">
<h3>Account</h3>
<p class="font-size-1 text-body">Adjust your profile and preferences to make Front work just for you!</p>
<div class="media">
<!-- Contributors List -->
<div class="avatar-group mr-2">
<div class="avatar avatar-xs avatar-circle">
<img class="avatar-img" src="../assets/img/100x100/img2.jpg" alt="Image Description">
</div>
<div class="avatar avatar-xs avatar-circle">
<img class="avatar-img" src="../assets/img/100x100/img8.jpg" alt="Image Description">
</div>
</div>
<!-- End Contributors List -->
<div class="media-body">
<!-- Article Authors -->
<small class="d-block text-dark">2 article in this collection</small>
<small class="d-block text-dark">
<span class="text-muted">Written by</span>
Fiona Burke, Luisa Woodfine
<span class="text-muted">and</span>
Neil Galavan
</small>
<!-- End Article Authors -->
</div>
</div>
</div>
</div>
<!-- End Icon Block -->
</div>
</a>
</div>
</div>
</div>
<!-- End FAQ Section -->
Component #3
<!-- Articles Section -->
<div class="container space-2">
<div class="w-lg-80 mx-lg-auto">
<div class="row">
<div class="col-md-6 mb-3 mb-lg-0">
<!-- Icon Block -->
<a class="card h-100 transition-3d-hover" href="#">
<div class="card-body">
<div class="media">
<figure class="w-100 max-w-6rem mr-3">
<img class="img-fluid" src="../../assets/svg/icons/icon-15.svg" alt="SVG">
</figure>
<div class="media-body">
<h3>Ask a question</h3>
<p class="text-body">Email with support members to get your questions answered.</p>
</div>
</div>
</div>
</a>
<!-- End Icon Block -->
</div>
<div class="col-md-6 mb-3 mb-lg-0">
<!-- Icon Block -->
<a class="card h-100 transition-3d-hover" href="#">
<div class="card-body">
<div class="media">
<figure class="w-100 max-w-6rem mr-3">
<img class="img-fluid" src="../../assets/svg/icons/icon-2.svg" alt="SVG">
</figure>
<div class="media-body">
<h3>Read documentation</h3>
<p class="text-body">Dig into the technical details of our products and consensus algorithm.</p>
</div>
</div>
</div>
</a>
<!-- End Icon Block -->
</div>
</div>
</div>
</div>
<!-- End Articles Section -->
Component #4
What can you do with Front?
Channels
Communication in Front happens in channels, organized by project, topic, team, or whatever makes sense for you.
Integrations
Front works with the tools and services you already use every day. Pipe in information or take action without leaving Front.
Security
We take security seriously at Slack. We offer measures like 2FA and SSO to ensure the safety of your data and protect your organization.
See Help Front in action. Get a Demo
<!-- Features Section -->
<div class="container space-2 text-center">
<div class="mb-9">
<h2 class="h1">What can you do with Front?</h2>
</div>
<div class="position-relative pt-5 pb-3 pt-md-11 pb-md-7">
<div class="position-relative z-index-2 p-2 p-sm-0">
<!-- News Carousel -->
<div class="js-slick-carousel slick slick-equal-height slick-gutters-3 mb-5"
data-hs-slick-carousel-options='{
"slidesToShow": 3,
"dots": true,
"dotsClass": "slick-pagination slick-pagination-white d-lg-none mt-5",
"responsive": [{
"breakpoint": 1200,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1
}
}]
}'>
<!-- Card Block -->
<div class="js-slide mt-1 mb-3">
<div class="card flex-wrap flex-row">
<div class="card-body py-6">
<h3 class="mb-5">Channels</h3>
<figure class="max-w-27rem w-100 mx-auto mb-4">
<img class="img-fluid" src="../assets/svg/illustrations/server-woman.svg" alt="Image Description">
</figure>
<p>Communication in Front happens in channels, organized by project, topic, team, or whatever makes sense for you.</p>
</div>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="js-slide mt-1 mb-3">
<div class="card flex-wrap flex-row">
<div class="card-body py-6">
<h3 class="mb-5">Integrations</h3>
<figure class="max-w-27rem w-100 mx-auto mb-4">
<img class="img-fluid" src="../assets/svg/illustrations/full-stack.svg" alt="Image Description">
</figure>
<p>Front works with the tools and services you already use every day. Pipe in information or take action without leaving Front.</p>
</div>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="js-slide mt-1 mb-3">
<div class="card flex-wrap flex-row">
<div class="card-body py-6">
<h3 class="mb-5">Security</h3>
<figure class="max-w-27rem w-100 mx-auto mb-4">
<img class="img-fluid" src="../assets/svg/illustrations/business-woman.svg" alt="Image Description">
</figure>
<p>We take security seriously at Slack. We offer measures like 2FA and SSO to ensure the safety of your data and protect your organization.</p>
</div>
</div>
</div>
<!-- End Card Block -->
</div>
<!-- Info -->
<p class="text-white">
See Help Front in action.
<a class="text-warning font-weight-bold" href="#">
Get a Demo
<span class="btn btn-xs btn-icon btn-light rounded-circle ml-2">
<i class="fas fa-arrow-right"></i>
</span>
</a>
</p>
<!-- End Info -->
</div>
<!-- Background -->
<div class="bg-navy position-absolute top-0 right-0 bottom-0 left-0 rounded-lg mx-sm-7" style="background-image: url(../assets/svg/components/abstract-shapes-20.svg);"></div>
</div>
</div>
<!-- End Features Section -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Front -->
<script src="../../assets/js/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$('.js-slick-carousel').each(function() {
var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
});
});
</script>
Component #5
Front gives every team the freedom to create
Evaluate your options better and learn more about them.
<!-- Articles Section -->
<div class="container space-2">
<div class="row">
<div class="col-lg-6 mb-3 mb-lg-0">
<!-- Card -->
<article class="card h-100">
<div class="w-sm-65 p-4">
<h3>Explore the Snippets tools</h3>
<div class="mb-4">
<p>Start your business on various platforms with one click.</p>
</div>
<a class="btn btn-sm btn-soft-primary btn-pill transition-3d-hover" href="#">Find out More <i class="fas fa-angle-right ml-1"></i></a>
</div>
<div class="position-absolute bottom-0 right-0 w-sm-35 max-w-27rem">
<img class="img-fluid" src="../../assets/svg/illustrations/support-man.svg" alt="Image Description">
</div>
</article>
<!-- End Card -->
</div>
<div class="col-lg-6">
<!-- Card -->
<article class="card h-100">
<div class="w-sm-65 p-4">
<h3>Front gives every team the freedom to create</h3>
<div class="mb-4">
<p>Evaluate your options better and learn more about them.</p>
</div>
<a class="btn btn-sm btn-soft-primary btn-pill transition-3d-hover" href="#">Find out More <i class="fas fa-angle-right ml-1"></i></a>
</div>
<div class="position-absolute bottom-0 right-0 w-sm-35 max-w-27rem">
<img class="img-fluid" src="../../assets/svg/illustrations/list-app.svg" alt="Image Description">
</div>
</article>
<!-- End Card -->
</div>
</div>
</div>
<!-- End Articles Section -->
Component #6
Key benefits
Design faster with a growing array of beautiful templates.
<!-- Features Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<h2 class="h1">Key benefits</h2>
<p>Design faster with a growing array of beautiful templates.</p>
</div>
<!-- End Title -->
<div class="row mx-n2">
<div class="col-sm-6 col-lg-3 px-2 mb-3 mb-lg-0">
<!-- Icon Blocks -->
<a class="card h-100 transition-3d-hover" href="#">
<div class="card-body">
<figure class="w-100 max-w-8rem mb-4">
<img class="img-fluid" src="../../assets/svg/icons/icon-9.svg" alt="SVG">
</figure>
<h4>Responsive</h4>
<p class="font-size-1 text-body mb-0">Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web.</p>
</div>
<div class="card-footer border-0 pt-0">
<span class="font-size-1">Learn more <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</div>
</a>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6 col-lg-3 px-2 mb-3 mb-lg-0">
<!-- Icon Blocks -->
<a class="card h-100 transition-3d-hover" href="#">
<div class="card-body">
<figure class="w-100 max-w-8rem mb-4">
<img class="img-fluid" src="../../assets/svg/icons/icon-3.svg" alt="SVG">
</figure>
<h4>Customizable</h4>
<p class="font-size-1 text-body mb-0">Front template can be easily customized with its cutting-edge components and features.</p>
</div>
<div class="card-footer border-0 pt-0">
<span class="font-size-1">Learn more <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</div>
</a>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6 col-lg-3 px-2 mb-3 mb-sm-0">
<!-- Icon Blocks -->
<a class="card h-100 transition-3d-hover" href="#">
<div class="card-body">
<figure class="w-100 max-w-8rem mb-4">
<img class="img-fluid" src="../../assets/svg/icons/icon-5.svg" alt="SVG">
</figure>
<h4>Premium <span class="badge badge-success badge-pill ml-1">sketch</span></h4>
<p class="font-size-1 text-body mb-0">Front is not only for developers but also for designers, and includes a Sketch file.</p>
</div>
<div class="card-footer border-0 pt-0">
<span class="font-size-1">Learn more <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</div>
</a>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6 col-lg-3 px-2">
<!-- Icon Blocks -->
<a class="card h-100 transition-3d-hover" href="#">
<div class="card-body">
<figure class="w-100 max-w-8rem mb-4">
<img class="img-fluid" src="../../assets/svg/icons/icon-2.svg" alt="SVG">
</figure>
<h4>Documentation</h4>
<p class="font-size-1 text-body mb-0">Every component and plugin is well documented with live examples.</p>
</div>
<div class="card-footer border-0 pt-0">
<span class="font-size-1">Learn more <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</div>
</a>
<!-- End Icon Blocks -->
</div>
</div>
</div>
<!-- End Features Section -->
Component #7
<!-- Article Section -->
<div class="container space-2">
<div class="row mx-n2">
<div class="col-md-6 px-2 mb-3 mb-lg-0">
<!-- Icon Block -->
<a class="card card-frame h-100" href="#">
<div class="card-body">
<div class="media">
<figure class="w-100 max-w-6rem mr-3">
<img class="img-fluid" src="../../assets/svg/icons/icon-4.svg" alt="SVG">
</figure>
<div class="media-body">
<h3>Ask a question</h3>
<p class="text-body">Chat live with community members to get your questions answered.</p>
</div>
</div>
</div>
</a>
<!-- End Icon Block -->
</div>
<div class="col-md-6 px-2 mb-3 mb-lg-0">
<!-- Icon Block -->
<a class="card card-frame h-100" href="#">
<div class="card-body">
<div class="media">
<figure class="w-100 max-w-6rem mr-3">
<img class="img-fluid" src="../../assets/svg/icons/icon-2.svg" alt="SVG">
</figure>
<div class="media-body">
<h3>Read documentation</h3>
<p class="text-body">Dig into the technical details of our products and consensus algorithm.</p>
</div>
</div>
</div>
</a>
<!-- End Icon Block -->
</div>
</div>
</div>
<!-- End Article Section -->
Component #8
<!-- Cards Section -->
<div class="container space-2">
<div class="row mx-n2">
<div class="col-sm-6 col-md-4 px-2 mb-3 mb-md-0">
<!-- Card -->
<a class="card card-frame h-100" href="#">
<img class="card-img-top" src="../../assets/img/480x220/img1.jpg" alt="Image Description">
<div class="card-body">
<div class="d-flex align-items-center mb-1">
<span class="d-block text-dark font-weight-bold">Aircall</span>
<img class="ml-2" src="../../assets/svg/illustrations/top-vendor.svg" alt="Image Description" title="Top Vendor" width="16">
</div>
<span class="d-block text-body font-size-1">Deliver call activity and voicemails straight to your inbox</span>
</div>
</a>
<!-- End Card -->
</div>
<div class="col-sm-6 col-md-4 px-2 mb-3 mb-md-0">
<!-- Card -->
<a class="card card-frame h-100" href="#">
<img class="card-img-top" src="../../assets/img/480x220/img2.jpg" alt="Image Description">
<div class="card-body">
<div class="d-flex align-items-center mb-1">
<span class="d-block text-dark font-weight-bold">Google</span>
<img class="ml-2" src="../../assets/svg/illustrations/top-vendor.svg" alt="Image Description" title="Top Vendor" width="16">
</div>
<span class="d-block text-body font-size-1">Multinational technology company that specializes in Internet-related services</span>
</div>
</a>
<!-- End Card -->
</div>
<div class="col-sm-6 col-md-4 px-2">
<!-- Card -->
<a class="card card-frame h-100" href="#">
<img class="card-img-top" src="../../assets/img/480x220/img3.jpg" alt="Image Description">
<div class="card-body">
<div class="d-flex align-items-center mb-1">
<span class="d-block text-dark font-weight-bold">Slack</span>
<img class="ml-2" src="../../assets/svg/illustrations/top-vendor.svg" alt="Image Description" title="Top Vendor" width="16">
</div>
<span class="d-block text-body font-size-1">Email collaboration and email service desk made easy</span>
</div>
</a>
<!-- End Card -->
</div>
</div>
</div>
<!-- End Cards Section -->
Component #9
<!-- Cards Section -->
<div class="container space-2">
<!-- Title -->
<div class="d-flex justify-content-between align-items-center mb-3">
<h3 class="mb-0">Featured</h3>
<a class="font-size-1 font-weight-bold" href="#">View All <i class='fas fa-angle-right fa-sm ml-1'></i></a>
</div>
<!-- End Title -->
<div class="row mx-n2">
<!-- Card -->
<div class="col-sm-6 col-md-4 px-2 mb-3">
<div class="card card-frame h-100">
<a class="card-body" href="#">
<div class="media">
<div class="avatar avatar-xs mt-1 mr-3">
<img class="avatar-img" src="../../assets/img/160x160/img5.jpg" alt="Image Description">
</div>
<div class="media-body">
<div class="d-flex align-items-center">
<span class="d-block text-dark font-weight-bold">Spotify</span>
<img class="ml-2" src="../../assets/svg/illustrations/top-vendor.svg" alt="Image Description" title="Top Vendor" width="16">
</div>
<small class="d-block text-body">Entertainment</small>
</div>
</div>
</a>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="col-sm-6 col-md-4 px-2 mb-3">
<div class="card card-frame h-100">
<a class="card-body" href="#">
<div class="media">
<div class="avatar avatar-xs mt-1 mr-3">
<img class="avatar-img" src="../../assets/img/160x160/img3.jpg" alt="Image Description">
</div>
<div class="media-body">
<div class="d-flex align-items-center">
<span class="d-block text-dark font-weight-bold">Slack</span>
</div>
<small class="d-block text-body">Communication</small>
</div>
</div>
</a>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="col-sm-6 col-md-4 px-2 mb-3">
<div class="card card-frame h-100">
<a class="card-body" href="app-description.html">
<div class="media">
<div class="avatar avatar-xs mt-1 mr-3">
<img class="avatar-img" src="../../assets/img/160x160/img23.png" alt="Image Description">
</div>
<div class="media-body">
<div class="d-flex align-items-center">
<span class="d-block text-dark font-weight-bold">Google Drive</span>
<img class="ml-2" src="../../assets/svg/illustrations/top-vendor.svg" alt="Image Description" title="Top Vendor" width="16">
</div>
<small class="d-block text-body">File management</small>
</div>
</div>
</a>
</div>
</div>
<!-- End Card -->
</div>
</div>
<!-- End Cards Section -->