6.2.0, 6.2.1, 6.2.2, 6.2.3, 6.2.4, 6.3.0, 6.3.1
A block grid of featured images useful for showing things like destinations, real estate photos, or similar
<div class="featured-image-block-grid">
<div class="featured-image-block-grid-header small-10 medium-8 large-7 columns text-center">
<h2>Top Destinations</h2>
<p>Start planning your travels here with the latest deals for popular destinations.</p>
</div>
<div class="row large-up-4 small-up-2">
<div class="featured-image-block column">
<a href="#">
<img src="https://unsplash.it/600/440?image=899" />
<p class="text-center featured-image-block-title">New York</p>
</a>
</div>
<div class="featured-image-block column">
<a href="#">
<img src="https://unsplash.it/600/440?image=693" />
<p class="text-center featured-image-block-title">San Francisco</p>
</a>
</div>
<div class="featured-image-block column">
<a href="#">
<img src="https://unsplash.it/600/440?image=452" />
<p class="text-center featured-image-block-title">Las Vegas</p>
</a>
</div>
<div class="featured-image-block column">
<a href="#">
<img src="https://unsplash.it/600/440?image=792" />
<p class="text-center featured-image-block-title">Sacramento</p>
</a>
</div>
<div class="featured-image-block column">
<a href="#">
<img src="https://unsplash.it/600/440?image=667" />
<p class="text-center featured-image-block-title">Los Angeles</p>
</a>
</div>
<div class="featured-image-block column">
<a href="#">
<img src="https://unsplash.it/600/440?image=249" />
<p class="text-center featured-image-block-title">Chicago</p>
</a>
</div>
<div class="featured-image-block column">
<a href="#">
<img src="https://unsplash.it/600/440?image=382" />
<p class="text-center featured-image-block-title">Boston</p>
</a>
</div>
<div class="featured-image-block column">
<a href="#">
<img src="https://unsplash.it/600/440?image=1075" />
<p class="text-center featured-image-block-title">Seattle</p>
</a>
</div>
</div>
</div>
.featured-image-block-grid-header {
margin-left: auto;
margin-right: auto;
}
.featured-image-block {
margin-bottom: 20px;
.featured-image-block-title {
font-weight: 600;
margin-top: 10px;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 1em;
color: #404040;
}
a:hover {
p {
color: map-get($foundation-palette, primary);
}
}
}
.featured-image-block-grid-header {
margin-left: auto;
margin-right: auto;
}
.featured-image-block {
margin-bottom: 20px;
}
.featured-image-block .featured-image-block-title {
font-weight: 600;
margin-top: 10px;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 1em;
color: #404040;
}
.featured-image-block a:hover p {
color: #1779ba;
}