No notes defined.
<div class=" tiles">
<div class="tiles__tile">
<h4>One Great Headline</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et voluptatum aliquam neque beatae.</p>
</div>
<div class="tiles__tile">
<h4>One Great Headline</h4>
<p>Lorem ipsum dolor</p>
</div>
<div class="tiles__tile">
<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 class="tiles__tile">
<h4>One Great Headline</h4>
<p>Lorem ipsum dolor</p>
</div>
<div class="tiles__tile">
<h4>One Great Headline</h4>
<p>Lorem ipsum dolor</p>
</div>
<div class="tiles__tile">
<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 class="tiles__tile">
<h4>One Great Headline</h4>
<p>Lorem ipsum dolor</p>
</div>
</div>
@use "/resources/styles/common" as *;
@use "/resources/styles/config";
///
/// 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
///
.tiles {
$b: &;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: config.$h-space config.$h-space;
@include at(lg) {
grid-template-columns: repeat(auto-fit, minmax(305px, 1fr));
}
&__tile {
background-color: #EEE;
padding: config.$padding;
}
}