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
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 #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
<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>
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>
Grid #11
<!-- 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 #12
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>