News
News Blogs
To help you reach your audience in a personal and more informal way, Front includes several News Blogs to start with.
News blog #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 -->
News blog #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>
Classic news blog #1
Remote workers, here's how to dodge distractions
We've been working hard with our besties at Reuters to design a new reading experience for Reuters.com.
5 basic tips for colors
Tis the season to be jolly, and Ueno has one more thing to be cheery about in 2017.
<div class="card-deck d-block d-sm-flex card-sm-gutters-3 mb-sm-7">
<!-- News Classic -->
<article class="card border-0">
<div class="card-body p-0">
<div class="mb-5">
<img class="img-fluid rounded" src="../../assets/img/500x280/img12.jpg" alt="Image Description">
</div>
<small class="d-block text-secondary mb-1">March 20, 2018</small>
<h2 class="h5">
<a href="#">Remote workers, here's how to dodge distractions</a>
</h2>
<p>We've been working hard with our besties at Reuters to design a new reading experience for Reuters.com.</p>
</div>
</article>
<!-- End News Classic -->
<!-- News Classic -->
<article class="card border-0">
<div class="card-body p-0">
<div class="mb-5">
<img class="img-fluid rounded" src="../../assets/img/500x280/img23.jpg" alt="Image Description">
</div>
<small class="d-block text-secondary mb-1">April 29, 2018</small>
<h3 class="h5">
<a href="#">5 basic tips for colors</a>
</h3>
<p>Tis the season to be jolly, and Ueno has one more thing to be cheery about in 2017.</p>
</div>
</article>
<!-- End News Classic -->
</div>
Grid news blog #1
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>
List news blog #1
April 11, 2018
by James Austin
Smartbtc sees the need for contracts
Just recently the startup Smartbtc announced the execution of...
May 5, 2018
by James Austin
Italy completes consultations on companies
Public consultations on a new regulatory regime for crypto companies...
<!-- Blog List News -->
<article class="d-block card border-0 mb-7">
<div class="card-body p-0">
<div class="row">
<div class="col-sm-5 mb-5 mb-sm-0">
<img class="img-fluid w-100 rounded" src="../../assets/img/480x320/img12.jpg" alt="Image Description">
</div>
<div class="col-sm-7">
<div class="pt-1 pr-4">
<small class="d-block text-muted mb-3">April 11, 2018</small>
<div class="mb-7">
<h2 class="h5">
<a href="#">Smartbtc sees the need for contracts</a>
</h2>
<p>Just recently the startup Smartbtc announced the execution of...</p>
</div>
<small class="d-block text-secondary">by <a class="text-dark font-weight-semi-bold" href="#">James Austin</a></small>
</div>
</div>
</div>
</div>
</article>
<!-- End Blog News -->
<!-- Blog List News -->
<article class="d-block card border-0 mb-7">
<div class="card-body p-0">
<div class="row">
<div class="col-sm-5 mb-5 mb-sm-0">
<img class="img-fluid w-100 rounded" src="../../assets/img/480x320/img17.jpg" alt="Image Description">
</div>
<div class="col-sm-7">
<div class="pt-1 pr-4">
<small class="d-block text-muted mb-3">May 5, 2018</small>
<div class="mb-7">
<h3 class="h5">
<a href="#">Italy completes consultations on companies</a>
</h3>
<p>Public consultations on a new regulatory regime for crypto companies...</p>
</div>
<small class="d-block text-secondary">by <a class="text-dark font-weight-semi-bold" href="#">James Austin</a></small>
</div>
</div>
</div>
</div>
</article>
<!-- End Blog News -->
Modern news blog #1
<div class="row mx-gutters-2">
<div class="col-md-7 mb-3">
<!-- Blog News -->
<a class="d-flex align-items-end bg-img-hero gradient-overlay-half-dark-v1 transition-3d-hover height-450 rounded-pseudo" href="#" style="background-image: url(../../assets/img/400x500/img8.jpg);">
<article class="w-100 text-center p-6">
<h2 class="h4 text-white">Front & envelope</h2>
<div class="mt-4">
<strong class="d-block text-white-70 mb-2">Neyton Burchie</strong>
<div class="u-avatar mx-auto">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
</div>
</div>
</article>
</a>
<!-- End Blog News -->
</div>
<div class="col-md-5 mb-3">
<!-- Blog News -->
<a class="d-flex align-items-end bg-img-hero gradient-overlay-half-dark-v1 transition-3d-hover height-450 rounded-pseudo" href="#" style="background-image: url(../../assets/img/400x500/img9.jpg);">
<article class="w-100 text-center p-6">
<h3 class="h4 text-white">Gimme that Awwward!</h3>
<div class="mt-4">
<strong class="d-block text-white-70 mb-2">Tina Krueger</strong>
<div class="u-avatar mx-auto">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
</div>
</article>
</a>
<!-- End Blog News -->
</div>
</div>
Card news blog #1
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>
Card news blog #2
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>
Card news blog #3
<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>
Card news #4
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>
Card news #5
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>
Card news #6
<!-- 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 -->
Start-up news blog #1
5 minutes ago
Exclusive interview with InVision's CEO
Clark Valberg is the founder and CEO of InVision. If you are a designer, you have probably gotten an email from Clark or from InVision at one time or another, but if you're not familiar with the company.
12 hours ago
Have you ever wondered how to change careers or start a home-based business?
Coffee News® is one of Forbes and Entrepreneur's highest-ranked affordable franchises. It entertains and informs readers, promotes local business and allows people just like you to make money working from home.
<div class="row">
<div class="col-md-6 mb-3 mb-md-0">
<!-- Article -->
<article>
<img class="img-fluid rounded" src="../../assets/img/900x450/img3.jpg" alt="Image Description">
<div class="px-4">
<ul class="list-inline d-flex align-items-center py-3">
<li class="list-inline-item d-flex align-items-center pr-2">
<div class="u-sm-avatar mr-2">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
<a class="text-secondary font-size-1" href="#">Andrea Gard</a>
</li>
<li class="list-inline-item ml-auto">
<a class="d-flex align-items-center small text-secondary" href="javascript:;">
<span class="far fa-heart mr-2"></span>
3 Likes
</a>
</li>
</ul>
<!-- Info -->
<small class="d-block text-muted mb-1">5 minutes ago</small>
<h2 class="h4">
<a href="#">Exclusive interview with InVision's CEO</a>
</h2>
<p class="mb-0">Clark Valberg is the founder and CEO of InVision. If you are a designer, you have probably gotten an email from Clark or from InVision at one time or another, but if you're not familiar with the company.</p>
<!-- End Info -->
</div>
</article>
<!-- End Article -->
</div>
<div class="col-md-6">
<!-- Article -->
<article>
<img class="img-fluid rounded" src="../../assets/img/900x450/img4.jpg" alt="Image Description">
<div class="px-4">
<ul class="list-inline d-flex align-items-center py-3">
<li class="list-inline-item d-flex align-items-center pr-2">
<div class="u-sm-avatar mr-2">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
</div>
<a class="text-secondary font-size-1" href="#">Charlotte Moore</a>
</li>
<li class="list-inline-item ml-auto">
<a class="d-flex align-items-center small text-secondary" href="javascript:;">
<span class="far fa-heart mr-2"></span>
56 Likes
</a>
</li>
</ul>
<!-- Info -->
<small class="d-block text-muted mb-1">12 hours ago</small>
<h2 class="h4">
<a href="#">Have you ever wondered how to change careers or start a home-based business?</a>
</h2>
<p class="mb-0">Coffee News® is one of Forbes and Entrepreneur's highest-ranked affordable franchises. It entertains and informs readers, promotes local business and allows people just like you to make money working from home.</p>
<!-- End Info -->
</div>
</article>
<!-- End Article -->
</div>
</div>
Masonry news blog #1
April 29, 2018
5 basic tips for colors
April 22, 2018
Ideas to stay happy and productive all day for 365 days
April 29, 2018
Classic design principles
April 1, 2018
Smartbtc sees the need for contracts
<div class="card-sm-columns card-sm-2-count card-lg-3-count">
<!-- Blog Masonry -->
<article class="card border-0 mb-3">
<img class="img-fluid rounded" src="../../assets/img/380x250/img6.jpg" alt="Image Description">
<div class="card-body p-5">
<small class="d-block text-secondary mb-1">April 29, 2018</small>
<h3 class="h6 mb-0">
<a href="#">5 basic tips for colors</a>
</h3>
</div>
</article>
<!-- End Blog Masonry -->
<!-- Masonry -->
<article class="card bg-primary text-white border-0 mb-3">
<div class="card-body p-5">
<small class="d-block mb-1">April 22, 2018</small>
<h3 class="h6 text-white mb-0">
<a href="#">Ideas to stay happy and productive all day for 365 days</a>
</h3>
</div>
</article>
<!-- End Blog Masonry -->
<!-- Blog Masonry -->
<article class="card border-0 mb-3">
<img class="img-fluid rounded" src="../../assets/img/380x250/img8.jpg" alt="Image Description">
<div class="card-body p-5">
<small class="d-block text-secondary mb-1">April 29, 2018</small>
<h3 class="h6 mb-0">
<a href="#">Classic design principles</a>
</h3>
</div>
</article>
<!-- End Blog Masonry -->
<!-- Blog Masonry -->
<article class="card border-0 mb-3">
<img class="img-fluid rounded" src="../../assets/img/500x550/img4.jpg" alt="Image Description">
<div class="card-body p-5">
<small class="d-block text-secondary mb-1">April 1, 2018</small>
<h3 class="h6 mb-0">
<a href="single-article-classic.html">Smartbtc sees the need for contracts</a>
</h3>
</div>
</article>
<!-- End Blog Masonry -->
</div>
Agency news blog #1
- Scott Levine
- –
- 30 mins ago
2018's Most Relaxing and Affordable Vacations
At Wake, our mission has always been focused on bringing openness and transparency to the design process.
- Charlotte Moore
- –
- 23 hours ago
<div class="container u-cubeportfolio">
<!-- Content -->
<div class="cbp mb-7"
data-layout="mosaic"
data-animation="quicksand"
data-x-gap="30"
data-y-gap="30"
data-media-queries='[
{"width": 1500, "cols": 3},
{"width": 1100, "cols": 3},
{"width": 800, "cols": 3},
{"width": 480, "cols": 1}
]'>
<!-- Item -->
<div class="cbp-item">
<div class="cbp-caption">
<!-- Blog Card -->
<article class="card border-0">
<div class="card-body p-0">
<div class="row align-items-stretch no-gutters">
<div class="col-md-6">
<div class="p-5">
<!-- Post Info -->
<ul class="list-inline small text-muted mb-1">
<li class="list-inline-item mr-0">Scott Levine</li>
<li class="list-inline-item mx-2">–</li>
<li class="list-inline-item">30 mins ago</li>
</ul>
<!-- End Post Info -->
<!-- Info -->
<div class="mb-4">
<h2 class="h5 mb-3">
<a href="#">2018's Most Relaxing and Affordable Vacations</a>
</h2>
<p>At Wake, our mission has always been focused on bringing openness and transparency to the design process.</p>
</div>
<!-- End Info -->
<!-- Labels -->
<ul class="list-inline mb-0">
<li class="list-inline-item g-mb-10">
<a class="btn btn-xs btn-soft-danger" href="#">Start-Up</a>
</li>
</ul>
<!-- End Labels -->
</div>
</div>
<div class="col-md-6 bg-img-hero min-height-300 rounded" style="background-image: url(../../assets/img/500x550/img1.jpg);"></div>
</div>
</div>
</article>
<!-- End Blog Card -->
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="cbp-item">
<div class="cbp-caption">
<!-- Blog Card -->
<article class="card border-0">
<img class="card-img-top" src="../../assets/img/450x450/img2.jpg" alt="Image Description">
<div class="card-body p-5">
<!-- Post Info -->
<ul class="list-inline small text-muted mb-1">
<li class="list-inline-item mr-0">Charlotte Moore</li>
<li class="list-inline-item mx-2">–</li>
<li class="list-inline-item">4 hours ago</li>
</ul>
<!-- End Post Info -->
<!-- Info -->
<div class="mb-4">
<h3 class="h5 mb-0">
<a href="#">Love for food always comes first</a>
</h3>
</div>
<!-- End Info -->
<!-- Labels -->
<ul class="list-inline mb-0">
<li class="list-inline-item g-mb-10">
<a class="btn btn-xs btn-soft-success" href="#">Food</a>
</li>
<li class="list-inline-item g-mb-10">
<a class="btn btn-xs btn-soft-warning btn-pill" href="#">Art</a>
</li>
</ul>
<!-- End Labels -->
</div>
</article>
<!-- End Blog Card -->
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="cbp-item">
<div class="cbp-caption">
<!-- Blog Card -->
<article class="card border-0">
<img class="card-img-top" src="../../assets/img/450x450/img5.jpg" alt="Image Description">
<div class="card-body p-5">
<!-- Post Info -->
<ul class="list-inline small text-muted mb-1">
<li class="list-inline-item mr-0">Charlotte Moore</li>
<li class="list-inline-item mx-2">–</li>
<li class="list-inline-item">23 hours ago</li>
</ul>
<!-- End Post Info -->
<!-- Info -->
<div class="mb-4">
<h3 class="h5 mb-0">
<a href="#">InVision is investing $5 million in design startups</a>
</h3>
</div>
<!-- End Info -->
<!-- Labels -->
<ul class="list-inline mb-0">
<li class="list-inline-item g-mb-10">
<a class="btn btn-xs btn-soft-warning btn-pill" href="#">House</a>
</li>
<li class="list-inline-item g-mb-10">
<a class="btn btn-xs btn-soft-warning btn-pill" href="#">Real Estate</a>
</li>
</ul>
<!-- End Labels -->
</div>
</article>
<!-- End Blog Card -->
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="cbp-item">
<div class="cbp-caption">
<!-- Blog Card -->
<article class="card border-0 bg-primary text-center">
<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 mb-1">Andrea Gard</small>
</a>
</article>
<!-- End Blog Card -->
</div>
</div>
<!-- End Item -->
</div>
<!-- End Content -->
</div>
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/cubeportfolio/js/jquery.cubeportfolio.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.cubeportfolio.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of cubeportfolio
$.HSCore.components.HSCubeportfolio.init('.cbp');
});
</script>
Thumbnail news blog #1
<!-- Thumbnail News -->
<article class="card border-0 mb-5">
<div class="card-body p-0">
<div class="media">
<div class="u-avatar mr-3">
<img class="img-fluid rounded" src="../../assets/img/100x100/img5.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 font-weight-normal mb-0">
<a href="#">
Homemade Clabatta donuts
</a>
</h4>
</div>
</div>
</div>
</article>
<!-- End Thumbnail News -->
<!-- Thumbnail News -->
<article class="card border-0 mb-5">
<div class="card-body p-0">
<div class="media">
<div class="u-avatar mr-3">
<img class="img-fluid rounded" src="../../assets/img/100x100/img7.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 font-weight-normal mb-0">
<a href="#">
Spruce up your coffee table
</a>
</h4>
</div>
</div>
</div>
</article>
<!-- End Thumbnail News -->
<!-- Thumbnail News -->
<article class="card border-0 mb-5">
<div class="card-body p-0">
<div class="media">
<div class="u-avatar mr-3">
<img class="img-fluid rounded" src="../../assets/img/100x100/img6.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 font-weight-normal mb-0">
<a href="#">
Breating in the crisp air of cozy place
</a>
</h4>
</div>
</div>
</div>
</article>
<!-- End Thumbnail News -->
Thumbnail news blog #2
<!-- News Carousel -->
<div class="bg-primary">
<div class="container space-1">
<div class="js-slick-carousel u-slick u-slick--gutters-3"
data-slides-show="3"
data-slides-scroll="1"
data-autoplay="true"
data-speed="5000"
data-responsive='[{
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}]'>
<div class="js-slide">
<!-- News -->
<div class="u-blog-thumb-minimal">
<a class="media" href="#">
<span class="d-flex u-blog-thumb-minimal__img-wrapper mr-3">
<span class="u-blog-thumb-minimal__img-wrapper">
<img class="img-fluid u-blog-thumb-minimal__img" src="../../assets/img/380x360/img23.jpg" alt="Image Description">
</span>
</span>
<span class="media-body">
<span class="d-block h6 text-white mb-1">Interior photographs</span>
<small class="d-block text-white-70">It doesn't talk about the usual photography attractions.</small>
</span>
</a>
</div>
<!-- End News -->
</div>
<div class="js-slide">
<!-- News -->
<div class="u-blog-thumb-minimal">
<a class="media" href="#">
<span class="d-flex u-blog-thumb-minimal__img-wrapper mr-3">
<span class="u-blog-thumb-minimal__img-wrapper">
<img class="img-fluid u-blog-thumb-minimal__img" src="../../assets/img/380x360/img9.jpg" alt="Image Description">
</span>
</span>
<span class="media-body">
<span class="d-block h6 text-white mb-1">My portfolio update</span>
<small class="d-block text-white-70">Portfolio offers a user a new way of experiencing design.</small>
</span>
</a>
</div>
<!-- End News -->
</div>
<div class="js-slide">
<!-- News -->
<div class="u-blog-thumb-minimal">
<a class="media" href="#">
<span class="d-flex u-blog-thumb-minimal__img-wrapper mr-3">
<span class="u-blog-thumb-minimal__img-wrapper">
<img class="img-fluid u-blog-thumb-minimal__img" src="../../assets/img/380x360/img8.jpg" alt="Image Description">
</span>
</span>
<span class="media-body">
<span class="d-block h6 text-white mb-1">The guide to Italian living</span>
<small class="d-block text-white-70">Learn how to live Italian and become happier</small>
</span>
</a>
</div>
<!-- End News -->
</div>
<div class="js-slide">
<!-- News -->
<div class="u-blog-thumb-minimal">
<a class="media" href="#">
<span class="d-flex u-blog-thumb-minimal__img-wrapper mr-3">
<span class="u-blog-thumb-minimal__img-wrapper">
<img class="img-fluid u-blog-thumb-minimal__img" src="../../assets/img/380x360/img10.jpg" alt="Image Description">
</span>
</span>
<span class="media-body">
<span class="d-block h6 text-white mb-0">19 design fails that prove fonts and spacing are everything</span>
</span>
</a>
</div>
<!-- End News -->
</div>
<div class="js-slide">
<!-- News -->
<div class="u-blog-thumb-minimal">
<a class="media" href="#">
<span class="d-flex u-blog-thumb-minimal__img-wrapper mr-3">
<span class="u-blog-thumb-minimal__img-wrapper">
<img class="img-fluid u-blog-thumb-minimal__img" src="../../assets/img/380x360/img11.jpg" alt="Image Description">
</span>
</span>
<span class="media-body">
<span class="d-block h6 text-white mb-1">Warm spring is coming！</span>
<small class="d-block text-white-70">Australian trees 'sweat' to survive extreme heatwaves</small>
</span>
</a>
</div>
<!-- End News -->
</div>
</div>
</div>
</div>
<!-- End News Carousel -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>