Tiles

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>
  • Content:
    @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;
        }
    }
    
  • URL: /components/raw/tiles/_index.scss
  • Filesystem Path: resources/styles/molecules/tiles/_index.scss
  • Size: 1 KB