There are no notes for this item.
<div class="tiles">
<div class="tiles__tile">
<div class="tiles__tileContent">
<h4>One Great Headline</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et voluptatum aliquam neque beatae.</p>
</div>
</div>
<div class="tiles__tile">
<div class="tiles__tileContent">
<h4>One Great Headline</h4>
<p>Lorem ipsum dolor</p>
</div>
</div>
<div class="tiles__tile">
<div class="tiles__tileContent">
<h4>One Great Headline</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et voluptatum aliquam neque beatae tempora distinctio numquam iusto sed iure impedit Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="tiles__tile">
<div class="tiles__tileContent">
<h4>One Great Headline</h4>
<p>Lorem ipsum dolor</p>
</div>
</div>
<div class="tiles__tile">
<div class="tiles__tileContent">
<h4>One Great Headline</h4>
<p>Lorem ipsum dolor</p>
</div>
</div>
<div class="tiles__tile">
<div class="tiles__tileContent">
<h4>One Great Headline</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et voluptatum aliquam neque beatae tempora distinctio numquam iusto sed iure impedit Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="tiles__tile">
<div class="tiles__tileContent">
<h4>One Great Headline</h4>
<p>Lorem ipsum dolor</p>
</div>
</div>
</div>
///
/// TILES helps you create an equal-width column grid layout without the use of row wrappers.
/// Tiles is similar to the Features component, except that TILES’ items can wrap.
/// Powered by flexbox, you can pass in a $gutter width and $column amount. Note that the
/// specified $column amount only is respected at the large breakpoint. Tiles will automatically
/// two-up your items at the medium breakpoint, and stack them at the small breakpoint.
///
/// @param {measure} $gutter [2rem] - vertical gutter between tiles
/// @param {number} $columns [4] - number of columns while min-width is $large
///
@mixin tiles($gutter: 2rem, $columns: 4) {
@include breakpoint(md) {
@include grid(2, $gutter, $element: tile);
}
@include breakpoint(lg) {
@include grid(3, $gutter, $element: tile);
}
&__tile {
background-color: #EEE;
text-align: left;
}
&__tileContent {
padding: 2rem;
}
}