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.
News Blogs
To help you reach your audience in a personal and more informal way, Front includes several News Blogs to start with.
Classic News Blog
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="row">
<div class="col-sm-6 mb-7 md-sm-0">
<article>
<div class="mb-5">
<img class="img-fluid w-100 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>
</article>
</div>
<div class="col-sm-6 mb-7 md-sm-0">
<article>
<div class="mb-5">
<img class="img-fluid w-100 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>
</article>
</div>
</div>
Grid News Blog
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-group d-block d-lg-flex u-card--gutters-2-lg">
<div class="card border-0 rounded shadow-sm mb-3">
<article class="card-body d-flex align-items-start flex-column w-100 bg-white rounded 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>Clark Valberg is the founder and CEO of InVision.</p>
<div class="w-100 mt-auto">
<hr>
<div class="media">
<div class="d-flex mr-3">
<img class="u-sm-avatar rounded-circle" src="../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="d-inline-block mb-0">
<a class="d-block font-size-13" href="#">Andrea Gard</a>
</h4>
</div>
</div>
</div>
</article>
</div>
<div class="card border-0 rounded shadow-sm mb-3">
<article class="card-body d-flex align-items-start flex-column w-100 bg-white rounded 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>We've always believed that by providing a space</p>
<div class="w-100 mt-auto">
<hr>
<div class="media">
<div class="d-flex mr-3">
<img class="u-sm-avatar rounded-circle" src="../assets/img/100x100/img3.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="d-inline-block mb-0">
<a class="d-block font-size-13" href="#">James Austin</a>
</h4>
</div>
</div>
</div>
</article>
</div>
<div class="card border-0 rounded shadow-sm mb-3">
<article class="card-body d-flex align-items-start flex-column w-100 bg-white rounded p-5">
<small class="d-block text-muted mb-2">May 30, 2018</small>
<h3 class="h5">
<a href="#">Design principles</a>
</h3>
<p>The biggest collections of design principles on the internet</p>
<div class="w-100 mt-auto">
<hr>
<div class="media">
<div class="d-flex mr-3">
<img class="u-sm-avatar rounded-circle" src="../assets/img/100x100/img2.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="d-inline-block mb-0">
<a class="d-block font-size-13" href="#">Charlotte Moore</a>
</h4>
</div>
</div>
</div>
</article>
</div>
</div>
List News Blog
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...
<article class="row mb-7">
<div class="col-lg-5 mb-5 mb-lg-0">
<img class="img-fluid w-100 rounded" src="../assets/img/480x320/img12.jpg" alt="Image Description">
</div>
<div class="col-lg-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-bold" href="#">James Austin</a></small>
</div>
</div>
</article>
<article class="row mb-7">
<div class="col-lg-5 mb-5 mb-lg-0">
<img class="img-fluid w-100 rounded" src="../assets/img/480x320/img17.jpg" alt="Image Description">
</div>
<div class="col-lg-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-bold" href="#">James Austin</a></small>
</div>
</div>
</article>
Modern News Blog
<div class="row mx-gutters-2">
<div class="col-lg-7 mb-3">
<a class="d-flex align-items-end u-bg-img-hero u-gradient-overlay-half-dark-v1 transition-3d-hover rounded-pseudo min-height-450" 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 u-text-light mb-2">Neyton Burchie</strong>
<img class="img-fluid u-sm-avatar rounded-circle mx-auto" src="../assets/img/100x100/img3.jpg" alt="Image Description">
</div>
</article>
</a>
</div>
<div class="col-lg-5 mb-3">
<a class="d-flex align-items-end u-bg-img-hero u-gradient-overlay-half-dark-v1 transition-3d-hover rounded-pseudo min-height-450" 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 u-text-light mb-2">Tina Krueger</strong>
<img class="img-fluid u-sm-avatar rounded-circle mx-auto" src="../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
</article>
</a>
</div>
</div>
Card News Blog #1
How to get anyone to eat healthy food
A healthy diet at any age is high in plant foods such as fruit and vegetables.
Announcing a free plan for small teams
At Wake, our mission has always been focused on bringing openness.
<div class="row">
<div class="col-lg-6 mb-5 mb-lg-0">
<article class="bg-white shadow-sm transition-3d-hover rounded">
<div class="p-5">
<header class="d-flex justify-content-between align-items-center mb-4">
<a class="u-icon u-icon--xs u-icon-danger--air rounded-circle" href="javascript:;">
<span class="fa fa-arrow-down u-icon__inner"></span>
</a>
<small class="d-block text-muted">1 day ago</small>
</header>
<div class="mb-4">
<img class="img-fluid w-100 rounded" src="../assets/img/500x280/img3.jpg" alt="Image Description">
</div>
<h2 class="h5">
<a href="#">How to get anyone to eat healthy food</a>
</h2>
<p class="mb-0">A healthy diet at any age is high in plant foods such as fruit and vegetables.</p>
</div>
<hr class="my-0">
<footer class="p-5">
<div class="media align-items-center">
<div class="d-flex mr-3">
<a class="u-sm-avatar position-relative" href="#">
<img class="img-fluid u-sm-avatar rounded-circle" src="../assets/img/100x100/img4.jpg" alt="Image Description">
<span class="u-badge u-badge--md u-badge-border-primary u-badge-pos u-badge-pos--bottom-right rounded-circle">+</span>
</a>
</div>
<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>
</article>
</div>
<div class="col-lg-6 mb-5 mb-lg-0">
<article class="bg-white shadow-sm transition-3d-hover rounded">
<div class="p-5">
<header class="d-flex justify-content-between align-items-center mb-4">
<a class="u-icon u-icon--xs u-icon-success--air rounded-circle" href="javascript:;">
<span class="fa fa-arrow-up u-icon__inner"></span>
</a>
<small class="d-block text-muted">19 hours ago</small>
</header>
<div class="mb-4">
<img class="img-fluid w-100 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>
</div>
<hr class="my-0">
<footer class="p-5">
<div class="media align-items-center">
<div class="d-flex mr-3">
<a class="u-sm-avatar position-relative" href="#">
<img class="img-fluid u-sm-avatar rounded-circle" src="../assets/img/100x100/img4.jpg" alt="Image Description">
<span class="u-badge u-badge--md u-badge-border-primary u-badge-pos u-badge-pos--bottom-right rounded-circle">+</span>
</a>
</div>
<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>
</article>
</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-lg-6 mb-5 mb-lg-0">
<article class="d-flex align-items-start flex-column u-blog-overlay-v1 transition-3d-hover" style="background-image: url(../assets/img/500x550/img2.jpg);">
<header class="w-100 d-flex justify-content-between mb-3">
<div class="media align-items-center">
<div class="d-flex mr-3">
<a class="u-sm-avatar position-relative" href="#">
<img class="img-fluid u-sm-avatar rounded-circle" src="../assets/img/100x100/img3.jpg" alt="Image Description">
<span class="u-badge u-badge-primary u-badge-pos u-badge-pos--bottom-right rounded-circle">+</span>
</a>
</div>
<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="u-text-light" href="#">Buzzfeed</a></small>
</div>
</div>
<small class="d-block u-text-light">1 day ago</small>
</header>
<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="u-text-light mb-0">Facebook launched the Watch platform in August</p>
</div>
</article>
</div>
<div class="col-lg-6 mb-5 mb-lg-0">
<article class="d-flex align-items-start flex-column u-blog-overlay-v1 transition-3d-hover" style="background-image: url(../assets/img/500x550/img3.jpg);">
<header class="w-100 d-flex justify-content-between mb-3">
<div class="media align-items-center">
<div class="d-flex mr-3">
<a class="u-sm-avatar position-relative" href="#">
<img class="img-fluid u-sm-avatar rounded-circle" src="../assets/img/100x100/img1.jpg" alt="Image Description">
<span class="u-badge u-badge-primary u-badge-pos u-badge-pos--bottom-right rounded-circle">+</span>
</a>
</div>
<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="u-text-light" href="#">Buzzfeed</a></small>
</div>
</div>
<small class="d-block u-text-light">29 days ago</small>
</header>
<div class="mt-auto">
<h2 class="h5 text-white">
<a href="#">A last-minute Labor Day road trip</a>
</h2>
<p class="u-text-light mb-0">Time is running out on all those ambitious plans for barbecues, lounging at the beach and road trips.</p>
</div>
</article>
</div>
</div>
Card News Blog #3
<div class="row">
<div class="col-lg-6 mb-5 mb-lg-0">
<article class="bg-primary rounded text-center position-relative">
<a class="d-block u-space-2 px-7" href="#">
<figure class="mx-auto mb-3" style="width: 35px;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path class="u-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>
<h3 class="h4 text-white mb-4">In the future, design principles won't be about design</h3>
<small class="d-block u-text-light mb-1">Andrea Gard</small>
</a>
</article>
</div>
<div class="col-lg-6 mb-5 mb-lg-0">
<article class="bg-danger rounded text-center position-relative">
<a class="d-block u-space-2 px-5" href="#">
<figure class="mx-auto mb-3" style="width: 35px;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path class="u-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>
<h3 class="h4 text-white mb-4">Front makes you look at things from a different perspectives.</h3>
<small class="d-block u-text-light mb-1">Scott Levine</small>
</a>
</article>
</div>
</div>
Start-Up News Blog
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-lg-6 mb-5 mb-lg-0">
<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">
<img class="img-fluid u-sm-avatar rounded-circle mr-2" src="../assets/img/100x100/img1.jpg" alt="Image Description">
<a class="text-secondary font-size-14" 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 d-flex mr-2"></span>
3 Likes
</a>
</li>
</ul>
<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>
</div>
</article>
</div>
<div class="col-lg-6 mb-5 mb-lg-0">
<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">
<!-- Author -->
<li class="list-inline-item d-flex align-items-center pr-2">
<img class="img-fluid u-sm-avatar rounded-circle mr-2" src="../assets/img/100x100/img2.jpg" alt="Image Description">
<a class="text-secondary font-size-14" href="#">Charlotte Moore</a>
</li>
<!-- End Author -->
<!-- Likes -->
<li class="list-inline-item ml-auto">
<a class="d-flex align-items-center small text-secondary" href="javascript:;">
<span class="far fa-heart d-flex mr-2"></span>
56 Likes
</a>
</li>
<!-- End Likes -->
</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>
</div>
</div>
Masonry News Blog
March 18, 2018
How to make trust your competitive advantage
April 29, 2018
5 basic tips for colors
March 20, 2018
How to change careers or start a home-based business?
<div class="row">
<div class="col-md-6 col-lg-4 mb-5 mb-lg-0">
<article>
<img class="img-fluid w-100 rounded" src="../assets/img/480x320/img16.jpg" alt="Image Description">
<div class="bg-white p-5">
<small class="d-block text-secondary mb-1">March 18, 2018</small>
<h3 class="h6 mb-0">
<a href="#">How to make trust your competitive advantage</a>
</h3>
</div>
</article>
</div>
<div class="col-md-6 col-lg-4 mb-5 mb-lg-0">
<article>
<img class="img-fluid w-100 rounded" src="../assets/img/380x250/img6.jpg" alt="Image Description">
<div class="bg-white 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>
</div>
<div class="col-md-6 col-lg-4 mb-5 mb-lg-0">
<article>
<img class="img-fluid w-100 rounded" src="../assets/img/480x320/img13.jpg" alt="Image Description">
<div class="bg-white p-5">
<small class="d-block text-secondary mb-1">March 20, 2018</small>
<h3 class="h6 mb-0">
<a href="#">How to change careers or start a home-based business?</a>
</h3>
</div>
</article>
</div>
</div>
Agency news blog
- 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
<article class="row align-items-stretch no-gutters bg-white rounded mb-5">
<div class="col-md-6">
<div class="p-7">
<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>
<div class="mb-4">
<h2 class="h5 mb-3">
<a href="javascript:;">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>
<ul class="list-inline mb-0">
<li class="list-inline-item g-mb-10">
<a class="u-label u-label--sm u-label--danger" href="javascript:;">Start-Up</a>
</li>
</ul>
</div>
</div>
<div class="col-md-6 u-bg-img-hero min-height-300 rounded" data-bg-img-src="../assets/img/500x550/img1.jpg"></div>
</article>
<div class="row">
<div class="col-md-6 mb-5 mb-md-0">
<article>
<img class="img-fluid w-100" src="../assets/img/450x450/img2.jpg" alt="Image Description">
<div class="bg-white rounded-bottom p-5">
<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>
<div class="mb-4">
<h3 class="h5 mb-0">
<a href="#">Love for food always comes first</a>
</h3>
</div>
<ul class="list-inline mb-0">
<li class="list-inline-item g-mb-10">
<a class="u-label u-label--sm u-label--success" href="javascript:;">Food</a>
</li>
<li class="list-inline-item g-mb-10">
<a class="u-label u-label--sm u-label--primary" href="javascript:;">Art</a>
</li>
</ul>
</div>
</article>
</div>
<div class="col-md-6 mb-5 mb-md-0">
<article>
<img class="img-fluid w-100" src="../assets/img/450x450/img5.jpg" alt="Image Description">
<div class="bg-white rounded-bottom p-5">
<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>
<div class="mb-4">
<h3 class="h5 mb-0">
<a href="#">InVision is investing $5 million in design startups</a>
</h3>
</div>
<ul class="list-inline mb-0">
<li class="list-inline-item g-mb-10">
<a class="u-label u-label--sm u-label--warning" href="javascript:;">House</a>
</li>
<li class="list-inline-item g-mb-10">
<a class="u-label u-label--sm u-label--primary" href="javascript:;">Real Estate</a>
</li>
</ul>
</div>
</article>
</div>
</div>
Thumbnail News Blog 1
<div class="row">
<div class="col-lg-4 mb-5 mb-lg-0">
<article>
<div class="media mb-1">
<div class="d-flex mr-3">
<img class="img-fluid rounded u-avatar" 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>
</article>
</div>
<div class="col-lg-4 mb-5 mb-lg-0">
<article>
<div class="media mb-1">
<div class="d-flex mr-3">
<img class="img-fluid rounded u-avatar" 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>
</article>
</div>
<div class="col-lg-4 mb-5 mb-lg-0">
<article>
<div class="media mb-1">
<div class="d-flex mr-3">
<img class="img-fluid rounded u-avatar" 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>
</article>
</div>
</div>
Thumbnail News Blog 2
<div class="bg-primary p-3">
<div class="row">
<div class="col-lg-4 mb-5 mb-lg-0">
<div class="u-blog-thumb-v1">
<a class="media" href="#">
<span class="d-flex u-blog-thumb-v1__img-wrapper mr-3">
<span class="u-blog-thumb-v1__img-wrapper">
<img class="img-fluid u-blog-thumb-v1__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 u-text-light">It doesn't talk about the usual photography attractions.</small>
</span>
</a>
</div>
</div>
<div class="col-lg-4 mb-5 mb-lg-0">
<div class="u-blog-thumb-v1">
<a class="media" href="#">
<span class="d-flex u-blog-thumb-v1__img-wrapper mr-3">
<span class="u-blog-thumb-v1__img-wrapper">
<img class="img-fluid u-blog-thumb-v1__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 u-text-light">Learn how to live Italian and become happier</small>
</span>
</a>
</div>
</div>
<div class="col-lg-4 mb-5 mb-lg-0">
<div class="u-blog-thumb-v1">
<a class="media" href="#">
<span class="d-flex u-blog-thumb-v1__img-wrapper mr-3">
<span class="u-blog-thumb-v1__img-wrapper">
<img class="img-fluid u-blog-thumb-v1__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 u-text-light">Portfolio offers a user a new way of experiencing design.</small>
</span>
</a>
</div>
</div>
</div>
</div>