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
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
![Image Description](../assets/img/500x280/img12.jpg)
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.
![Image Description](../assets/img/500x280/img23.jpg)
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
InVision design forward fund
Clark Valberg is the founder and CEO of InVision.
Announcing a plan for small teams
We've always believed that by providing a space
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
![Image Description](../assets/img/480x320/img12.jpg)
Smartbtc sees the need for contracts
Just recently the startup Smartbtc announced the execution of...
![Image Description](../assets/img/480x320/img17.jpg)
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
![Image Description](../assets/img/500x280/img1.jpg)
Rocky Mountains
New snowfall throughout the season is displayed with 24 hour and 72-hour snow totals, providing a snapshot of mountain conditions.
![Image Description](../assets/img/500x280/img11.jpg)
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
![Image Description](../assets/img/480x320/img35.jpg)
Amazon launched their enterprise platform and built a powerful user experience.
![Image Description](../assets/img/480x320/img31.jpg)
Mapbox empowers marketers to create digital marketing dashboards easily and share them with their team.
![Image Description](../assets/img/480x320/img32.jpg)
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>
Start-up news blog #1
![Image Description](../assets/img/900x450/img3.jpg)
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.
![Image Description](../assets/img/900x450/img4.jpg)
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
![Image Description](../assets/img/380x250/img6.jpg)
5 basic tips for colors
Ideas to stay happy and productive all day for 365 days
![Image Description](../assets/img/380x250/img8.jpg)
Classic design principles
![Image Description](../assets/img/500x550/img4.jpg)
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.
![Image Description](../assets/img/450x450/img2.jpg)
![Image Description](../assets/img/450x450/img5.jpg)
- 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>