News
News Blog - Grid
To help you reach your audience in a personal and more informal way, Front includes several News Blogs to start with.
Grid #1
Features
Start exploring the docs and starters
Read Now
<!-- Blog Card Section -->
<div class="container">
<div class="w-lg-65 mx-lg-auto">
<div class="card-deck d-block d-md-flex card-md-gutters-3">
<!-- Blog Card -->
<article class="card border-0 bg-primary text-white shadow-primary-lg transition-3d-hover mb-5 mb-md-0">
<div class="card-body p-6">
<span class="btn btn-lg btn-icon btn-soft-light rounded-circle mb-9">
<span class="fab fa-audible font-size-5 btn-icon__inner btn-icon__inner-bottom-minus"></span>
</span>
<small class="d-block text-white-70 text-uppercase mb-1">News</small>
<h3 class="h5 mb-3">Read our blogs to follow the latest news</h3>
<a class="btn btn-sm btn-soft-white btn-pill transition-3d-hover" href="#">Read Now</a>
</div>
</article>
<!-- End Blog Card -->
<!-- Blog Card -->
<article class="card border-0 shadow-sm transition-3d-hover">
<div class="card-body p-6">
<span class="btn btn-lg btn-icon btn-soft-primary rounded-circle mb-9">
<span class="far fa-file-archive font-size-5 btn-icon__inner btn-icon__inner-bottom-minus"></span>
</span>
<small class="d-block text-primary text-uppercase mb-1">Features</small>
<h3 class="h5 mb-3">Start exploring the docs and starters</h3>
<a class="btn btn-sm btn-soft-primary btn-pill transition-3d-hover" href="#">Read Now</a>
</div>
</article>
<!-- End Blog Card -->
</div>
</div>
</div>
<!-- End Blog Card Section -->
Grid #2
<div class="card-deck card-sm-gutters-2 d-block d-sm-flex">
<!-- News Blog -->
<a class="card card-text-dark border-0 shadow-sm transition-3d-hover mb-5" href="#">
<img class="card-img-top" src="../../assets/img/380x270/img2.jpg" alt="Image Description">
<div class="card-body p-4">
<h2 class="h6 mb-0">Atlassian</h2>
<small class="d-block text-secondary">Website design</small>
</div>
</a>
<!-- End News Blog -->
<!-- News Blog -->
<a class="card card-text-dark border-0 shadow-sm transition-3d-hover mb-5" href="#">
<img class="card-img-top" src="../../assets/img/380x270/img12.jpg" alt="Image Description">
<div class="card-body p-4">
<h2 class="h6 mb-0">Asana</h2>
<small class="d-block text-secondary">Other</small>
</div>
</a>
<!-- End News Blog -->
<!-- News Blog -->
<a class="card card-text-dark border-0 shadow-sm transition-3d-hover mb-5" href="#">
<img class="card-img-top" src="../../assets/img/380x270/img4.jpg" alt="Image Description">
<div class="card-body p-4">
<h2 class="h6 mb-0">Slack</h2>
<small class="d-block text-secondary">Blog</small>
</div>
</a>
<!-- End News Blog -->
</div>
Grid #3
July 15
Business
What CFR (Conversations, Feedback, Recognition) really is about
For a lot of people these days, Measure What Matters.
July 15
Business
Enjoy $1,000 worth of perks with Front for Business
There are many reasons people choose to join Front for Business.
July 15
<div class="row">
<div class="col-md-6 col-lg-4 mb-5">
<!-- Blog Card -->
<article class="card shadow h-100">
<img class="card-img-top" src="../../assets/img/500x280/img18.jpg" alt="Image Description">
<div class="card-body p-5">
<a class="d-inline-block text-muted font-weight-medium text-uppercase small mb-2" href="#">Product</a>
<h2 class="h5 font-weight-medium">
<a href="single-article.html">InVision design forward fund</a>
</h2>
<p>Clark Valberg is the founder and CEO of InVision.</p>
</div>
<div class="card-footer border-0 pt-0 pb-5 px-0 mx-5">
<div class="media align-items-center">
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle" data-toggle="tooltip" data-placement="top" title="Nataly Gaga">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle ml-n2" data-toggle="tooltip" data-placement="top" title="Emily Milda">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
</div>
<div class="media-body d-flex justify-content-end text-muted font-size-1 ml-2">
July 15
</div>
</div>
</div>
</article>
<!-- End Blog Card -->
</div>
<div class="col-md-6 col-lg-4 mb-5">
<!-- Blog Card -->
<article class="card shadow h-100">
<img class="card-img-top" src="../../assets/img/500x280/img13.jpg" alt="Image Description">
<div class="card-body p-5">
<a class="d-inline-block text-muted font-weight-medium text-uppercase small mb-2" href="#">Business</a>
<h3 class="h5 font-weight-medium">
<a href="single-article.html">What CFR (Conversations, Feedback, Recognition) really is about</a>
</h3>
<p>For a lot of people these days, Measure What Matters.</p>
</div>
<div class="card-footer border-0 pt-0 pb-5 px-0 mx-5">
<div class="media align-items-center">
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle" data-toggle="tooltip" data-placement="top" title="Aaron Larsson">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
</div>
<div class="media-body d-flex justify-content-end text-muted font-size-1 ml-2">
July 15
</div>
</div>
</div>
</article>
<!-- End Blog Card -->
</div>
<div class="col-md-6 col-lg-4 mb-5">
<!-- Blog Card -->
<article class="card shadow h-100">
<img class="card-img-top" src="../../assets/img/500x280/img19.jpg" alt="Image Description">
<div class="card-body p-5">
<a class="d-inline-block text-muted font-weight-medium text-uppercase small mb-2" href="#">Business</a>
<h3 class="h5 font-weight-medium">
<a href="single-article.html">Enjoy $1,000 worth of perks with Front for Business</a>
</h3>
<p>There are many reasons people choose to join Front for Business.</p>
</div>
<div class="card-footer border-0 pt-0 pb-5 px-0 mx-5">
<div class="media align-items-center">
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle" data-toggle="tooltip" data-placement="top" title="Hanna Wolfe">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img11.jpg" alt="Image Description">
</div>
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle ml-n2" data-toggle="tooltip" data-placement="top" title="John O'nolan">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img12.jpg" alt="Image Description">
</div>
<div class="media-body d-flex justify-content-end text-muted font-size-1 ml-2">
July 15
</div>
</div>
</div>
</article>
<!-- End Blog Card -->
</div>
</div>
Grid #4
May 15, 2018
InVision design forward fund
Clark Valberg is the founder and CEO of InVision.
May 22, 2018
Announcing a plan for small teams
We've always believed that by providing a space
May 30, 2018
Design principles
The biggest collections of design principles on the internet
<div class="card-deck d-block d-md-flex card-md-gutters-2">
<!-- Blog Grid -->
<article class="card border-0 shadow-sm mb-3">
<div class="card-body p-5">
<small class="d-block text-muted mb-2">May 15, 2018</small>
<h2 class="h5">
<a href="#">InVision design forward fund</a>
</h2>
<p class="mb-0">Clark Valberg is the founder and CEO of InVision.</p>
</div>
<div class="card-footer pb-5 px-0 mx-5">
<div class="media align-items-center">
<div class="u-sm-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="small mb-0"><a href="#">Andrea Gard</a></h4>
</div>
</div>
</div>
</article>
<!-- End Blog Grid -->
<!-- Blog Grid -->
<article class="card border-0 shadow-sm mb-3">
<div class="card-body p-5">
<small class="d-block text-muted mb-2">May 22, 2018</small>
<h3 class="h5">
<a href="#">Announcing a plan for small teams</a>
</h3>
<p class="mb-0">We've always believed that by providing a space</p>
</div>
<div class="card-footer pb-5 px-0 mx-5">
<div class="media align-items-center">
<div class="u-sm-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="small mb-0"><a href="#">James Austin</a></h4>
</div>
</div>
</div>
</article>
<!-- End Blog Grid -->
<!-- Blog Grid -->
<article class="card border-0 shadow-sm mb-3">
<div class="card-body p-5">
<small class="d-block text-muted mb-2">May 30, 2018</small>
<h3 class="h5">
<a href="#">Design principles</a>
</h3>
<p class="mb-0">The biggest collections of design principles on the internet</p>
</div>
<div class="card-footer pb-5 px-0 mx-5">
<div class="media align-items-center">
<div class="u-sm-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="small mb-0"><a href="#">Charlotte Moore</a></h4>
</div>
</div>
</div>
</article>
<!-- End Blog Grid -->
</div>
Grid #5
<!-- News Section -->
<div class="container">
<!-- News Carousel -->
<div class="row">
<div class="col-md-6 col-lg-4 mb-5 mb-lg-0">
<!-- Blog News -->
<a class="card card-text-dark shadow h-100 transition-3d-hover" href="#">
<img class="card-img-top" src="../../assets/img/480x320/img33.jpg" alt="Image Description">
<div class="card-body text-center p-5">
<h4 class="h5">How to make trust competitive advantage</h4>
<p>Tips and tricks that most people wouldn't highlight when illustrating.</p>
</div>
</a>
<!-- End Blog News -->
</div>
<div class="col-md-6 col-lg-4 mb-5 mb-lg-0">
<!-- Blog News -->
<a class="card card-text-dark border-0 bg-primary text-white text-center shadow-primary-lg h-100 transition-3d-hover p-6" href="#">
<div class="d-flex justify-content-center align-content-center flex-wrap h-100">
<span class="d-block font-size-1 font-weight-medium text-uppercase mb-3">Michael Jordan</span>
<h4>"Talent wins games, but <strong class="text-warning">teamwork</strong> and <strong class="text-warning">intelligence</strong> win championship."</h4>
<div class="mt-4">
<div class="u-avatar mx-auto">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
</div>
</div>
</div>
</a>
<!-- End Blog News -->
</div>
<div class="col-md-6 col-lg-4">
<!-- Blog News -->
<a class="card card-text-dark shadow h-100 transition-3d-hover" href="#">
<img class="card-img-top" src="../../assets/img/480x320/img31.jpg" alt="Image Description">
<div class="card-body text-center p-5">
<h4 class="h5">We're cultured</h4>
<p>It's nice to win awards. Last night, the Ueno team in Reykjavík came home from Web Awards.</p>
</div>
</a>
<!-- End Blog News -->
</div>
</div>
<!-- End News Carousel -->
</div>
<!-- End News Section -->
Grid #6
Rocky Mountains
New snowfall throughout the season is displayed with 24 hour and 72-hour snow totals, providing a snapshot of mountain conditions.
Announcing a free plan for small teams
At Wake, our mission has always been focused on bringing openness.
<div class="row">
<div class="col-md-6 mb-3 mb-md-0">
<!-- Blog Card -->
<article class="card d-block border-0 transition-3d-hover mt-1">
<div class="card-body p-5">
<!-- Header -->
<header class="d-flex justify-content-between align-items-center mb-4">
<a class="btn btn-xs btn-icon btn-soft-danger rounded-circle" href="javascript:;">
<span class="fas fa-arrow-down btn-icon__inner"></span>
</a>
<small class="text-muted">3 hours ago</small>
</header>
<!-- End Header -->
<!-- Info -->
<div class="mb-4">
<img class="img-fluid rounded" src="../../assets/img/500x280/img1.jpg" alt="Image Description">
</div>
<h2 class="h5">
<a href="#">Rocky Mountains</a>
</h2>
<p class="mb-0">New snowfall throughout the season is displayed with 24 hour and 72-hour snow totals, providing a snapshot of mountain conditions.</p>
<!-- End Info -->
</div>
<!-- Footer -->
<footer class="card-footer p-5">
<div class="media align-items-center">
<a class="u-sm-avatar position-relative mr-3" href="#">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
<span class="badge badge-md badge-outline-primary badge-pos badge-pos--bottom-right rounded-circle">+</span>
</a>
<div class="media-body">
<h3 class="h6 mb-0">
<a href="#">Andrea Gard</a>
</h3>
<small class="d-block">on <a class="text-secondary" href="#">Buzzfeed</a></small>
</div>
</div>
</footer>
<!-- End Footer -->
</article>
<!-- End Blog Card -->
</div>
<div class="col-md-6">
<!-- Blog Card -->
<article class="card d-block border-0 transition-3d-hover mt-1">
<div class="card-body p-5">
<!-- Header -->
<header class="d-flex justify-content-between align-items-center mb-4">
<a class="btn btn-xs btn-icon btn-soft-success rounded-circle" href="javascript:;">
<span class="fas fa-arrow-up btn-icon__inner"></span>
</a>
<small class="d-block text-muted">19 hours ago</small>
</header>
<!-- End Header -->
<!-- Info -->
<div class="mb-4">
<img class="img-fluid rounded" src="../../assets/img/500x280/img11.jpg" alt="Image Description">
</div>
<h2 class="h5">
<a href="#">Announcing a free plan for small teams</a>
</h2>
<p class="mb-0">At Wake, our mission has always been focused on bringing openness.</p>
<!-- End Info -->
</div>
<!-- Footer -->
<footer class="card-footer p-5">
<div class="media align-items-center">
<a class="u-sm-avatar position-relative mr-3" href="#">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img4.jpg" alt="Image Description">
<span class="badge badge-md badge-outline-primary badge-pos badge-pos--bottom-right rounded-circle">+</span>
</a>
<div class="media-body">
<h3 class="h6 mb-0">
<a href="#">James Austin</a>
</h3>
<small class="d-block">on <a class="text-secondary" href="#">InVision</a></small>
</div>
</div>
</footer>
<!-- End Footer -->
</article>
<!-- End Blog Card -->
</div>
</div>
Grid #7
Facebook is creating a news section in Watch to feature breaking news
Facebook launched the Watch platform in August
A last-minute Labor Day road trip
Time is running out on all those ambitious plans for barbecues, lounging at the beach and road trips.
<div class="row">
<div class="col-md-6 mb-3 mb-md-0">
<!-- Blog Card -->
<article class="d-flex align-items-start flex-wrap height-380 gradient-overlay-half-dark-v2 bg-img-hero rounded-pseudo transition-3d-hover p-5 mt-1" style="background-image: url(../../assets/img/500x550/img2.jpg);">
<header class="w-100 d-flex justify-content-between mb-3">
<!-- Author -->
<div class="media align-items-center">
<a class="u-sm-avatar position-relative mr-3" href="#">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
<span class="badge badge-primary badge-pos badge-pos--bottom-right rounded-circle">+</span>
</a>
<div class="media-body">
<h3 class="h6 text-white mb-0">
<a href="#">Scott Levine</a>
</h3>
<small class="d-block text-white">on <a class="text-white-70" href="#">Buzzfeed</a></small>
</div>
</div>
<!-- End Author -->
<small class="d-block text-white-70">1 day ago</small>
</header>
<!-- Info -->
<div class="mt-auto">
<h2 class="h5 text-white">
<a href="#">Facebook is creating a news section in Watch to feature breaking news</a>
</h2>
<p class="text-white-70 mb-0">Facebook launched the Watch platform in August</p>
</div>
<!-- End Info -->
</article>
<!-- End Blog Card -->
</div>
<div class="col-md-6">
<!-- Blog Card -->
<article class="d-flex align-items-start flex-wrap height-380 gradient-overlay-half-dark-v2 bg-img-hero rounded-pseudo transition-3d-hover p-5 mt-1" style="background-image: url(../../assets/img/500x550/img3.jpg);">
<header class="w-100 d-flex justify-content-between mb-3">
<!-- Author -->
<div class="media align-items-center">
<a class="u-sm-avatar position-relative mr-3" href="#">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
<span class="badge badge-primary badge-pos badge-pos--bottom-right rounded-circle">+</span>
</a>
<div class="media-body">
<h3 class="h6 text-white mb-0">
<a href="#">Andrea Gard</a>
</h3>
<small class="d-block text-white">on <a class="text-white-70" href="#">Buzzfeed</a></small>
</div>
</div>
<!-- End Author -->
<small class="d-block text-white-70">29 days ago</small>
</header>
<!-- Info -->
<div class="mt-auto">
<h2 class="h5 text-white">
<a href="#">A last-minute Labor Day road trip</a>
</h2>
<p class="text-white-70 mb-0">Time is running out on all those ambitious plans for barbecues, lounging at the beach and road trips.</p>
</div>
<!-- End Info -->
</article>
<!-- End Blog Card -->
</div>
</div>
Grid #8
<div class="row">
<div class="col-md-6 mb-3 mb-md-0">
<!-- Blog Card -->
<article class="card bg-primary text-center position-relative transition-3d-hover mt-1">
<a class="card-body py-9 px-7" href="#">
<!-- SVG Quote -->
<figure class="mx-auto mb-3">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path class="fill-white" opacity=".7" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
</svg>
</figure>
<!-- End SVG Quote -->
<h3 class="h4 text-white mb-4">In the future, design principles won't be about design</h3>
<small class="d-block text-white-70">Andrea Gard</small>
</a>
</article>
<!-- End Blog Card -->
</div>
<div class="col-md-6">
<!-- Blog Card -->
<article class="card bg-danger text-center position-relative transition-3d-hover mt-1">
<a class="card-body py-9 px-7" href="#">
<!-- SVG Quote -->
<figure class="mx-auto mb-3">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path class="fill-white" opacity=".7" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
</svg>
</figure>
<!-- End SVG Quote -->
<h3 class="h4 text-white mb-4">Front makes you look at things from a different perspectives.</h3>
<small class="d-block text-white-70">Scott Levine</small>
</a>
</article>
<!-- End Blog Card -->
</div>
</div>
Grid #9
Amazon launched their enterprise platform and built a powerful user experience.
Mapbox empowers marketers to create digital marketing dashboards easily and share them with their team.
Netflix's mission is to create a planet run by the sun. In order to achieve this goal, they needed to find a way to make solar simple.
<div class="row">
<div class="col-sm-6 col-md-4 mb-5">
<!-- Card Info -->
<div class="card border-0 shadow-soft h-100">
<img class="card-img-top" src="../../assets/img/480x320/img35.jpg" alt="Image Description">
<div class="card-body p-5">
<div class="max-width-15 w-100 mb-3">
<img class="img-fluid" src="../../assets/svg/clients-logo/amazon-original.svg" alt="Logo">
</div>
<p class="mb-0">Amazon launched their enterprise platform and built a powerful user experience.</p>
</div>
<div class="card-footer bg-light border-0 py-4 px-5">
<a href="customer-story.html">Read Story <small class="fas fa-arrow-right ml-1"></small></a>
</div>
</div>
<!-- End Card Info -->
</div>
<div class="col-sm-6 col-md-4 mb-5">
<!-- Card Info -->
<div class="card border-0 shadow-soft h-100">
<img class="card-img-top" src="../../assets/img/480x320/img31.jpg" alt="Image Description">
<div class="card-body p-5">
<div class="max-width-15 w-100 mb-3">
<img class="img-fluid" src="../../assets/svg/clients-logo/mapbox-original.svg" alt="Logo">
</div>
<p class="mb-0">Mapbox empowers marketers to create digital marketing dashboards easily and share them with their team.</p>
</div>
<div class="card-footer bg-light border-0 py-4 px-5">
<a href="customer-story.html">Read Story <small class="fas fa-arrow-right ml-1"></small></a>
</div>
</div>
<!-- End Card Info -->
</div>
<div class="col-sm-6 col-md-4 mb-5">
<!-- Card Info -->
<div class="card border-0 shadow-soft h-100">
<img class="card-img-top" src="../../assets/img/480x320/img32.jpg" alt="Image Description">
<div class="card-body p-5">
<div class="max-width-15 w-100 mb-3">
<img class="img-fluid" src="../../assets/svg/clients-logo/netflix-original.svg" alt="Logo">
</div>
<p class="mb-0">Netflix's mission is to create a planet run by the sun. In order to achieve this goal, they needed to find a way to make solar simple.</p>
</div>
<div class="card-footer bg-light border-0 py-4 px-5">
<a href="customer-story.html">Read Story <small class="fas fa-arrow-right ml-1"></small></a>
</div>
</div>
<!-- End Card Info -->
</div>
</div>
Grid #10
Want more cool stuff? Explore early products
<div class="row mx-n2 mx-lg-n3 mb-5">
<div class="col-sm-6 col-lg-4 px-2 px-lg-3 mb-3 mb-lg-0">
<!-- Card -->
<a class="card card-text-dark h-100" href="#">
<div class="card-body p-4">
<img class="img-fluid" src="../../assets/svg/illustrations/app-user.svg" alt="Image Description">
</div>
<div class="card-footer border-0 pb-4 px-4">
<h4 class="h5 d-flex justify-content-between">
App user illustrations
<span class="d-block">
<span class="badge badge-success badge-pill ml-3">$9</span>
</span>
</h4>
<p class="font-size-1 mb-0">Cute characters with big hearts for your mobile and web projects</p>
</div>
</a>
<!-- End Card -->
</div>
<div class="col-sm-6 col-lg-4 px-2 px-lg-3 mb-3 mb-lg-0">
<!-- Card -->
<a class="card card-text-dark h-100" href="#">
<div class="card-body p-0">
<img class="card-img-top" src="../../assets/img/mockups/img10.png" alt="Image Description">
</div>
<div class="card-footer border-0 pb-4 px-4">
<h4 class="h5 d-flex justify-content-between">
Velocity-A dashkit UI Kit
<span class="d-block">
<span class="badge badge-success badge-pill ml-3">$27</span>
</span>
</h4>
<p class="font-size-1 mb-0">Create unique illustrations for a website & applications.</p>
</div>
</a>
<!-- End Card -->
</div>
<div class="col-sm-6 col-lg-4 px-2 px-lg-3">
<!-- Card -->
<a class="card card-text-dark h-100" href="#">
<div class="card-body p-4">
<img class="img-fluid" src="../../assets/svg/illustrations/hiker-man.svg" alt="Image Description">
</div>
<div class="card-footer border-0 pb-4 px-4">
<h4 class="h5 d-flex justify-content-between">
Hiker man illustrations
<span class="d-block">
<span class="badge badge-success badge-pill ml-3">$11</span>
</span>
</h4>
<p class="font-size-1 mb-0">Fun and crisp characters for apps, websites or presentations</p>
</div>
</a>
<!-- End Card -->
</div>
</div>
<div class="text-center">
<p class="font-size-1">Want more cool stuff? <a href="#">Explore early products</a></p>
</div>