Tile Grid

Available since 1.0.0

A tile grid is layout component used to display tiles on a grid layout.

This uses CSS grid which is not supported by some older browsers. A flexbox fallback is included but it is recommended you test your page if you have a significant number of users on IE 11, for example.

Although the following examples use the <h3> tag for the title element, the styling provided by SAP Fundamentals will remain consistent for any heading level used. <h1> should be reserved for the page title.

3-col grid (default)

Also available as a modifier class --3col

Lorem ipsum

<div class="fd-tile-grid">
    <div class="fd-tile">
        <div class="fd-tile__content">
          <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
          <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
          <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
          <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
          <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
          <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
</div>

2 col grid

Lorem ipsum

<div class="fd-tile-grid fd-tile-grid--2col">
    <div class="fd-tile">
        <div class="fd-tile__media">
            <span class=" fd-identifier--m sap-icon--home fd-has-background-color-accent-3"></span>
        </div>
        <div class="fd-tile__content">
          <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__media">
            <span class=" fd-identifier--m sap-icon--home fd-has-background-color-accent-3"></span>
        </div>
        <div class="fd-tile__content">
          <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__media">
            <span class=" fd-identifier--m sap-icon--home fd-has-background-color-accent-3"></span>
        </div>
        <div class="fd-tile__content">
          <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__media">
            <span class=" fd-identifier--m sap-icon--home fd-has-background-color-accent-3"></span>
        </div>
        <div class="fd-tile__content">
          <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
</div>

4 col grid

Lorem ipsum

<div class="fd-tile-grid fd-tile-grid--4col">
    <div class="fd-tile">
        <div class="fd-tile__content">
          <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
          <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
          <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
          <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
          <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
          <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
          <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
          <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
</div>

5 col grid

Lorem ipsum

<div class="fd-tile-grid fd-tile-grid--5col">
    <div class="fd-tile">
        <div class="fd-tile__content">
            <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
            <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
            <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
            <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
            <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
            <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
            <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
            <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
            <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
            <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
</div>

6 col grid

Lorem ipsum

<div class="fd-tile-grid fd-tile-grid--6col">
    <div class="fd-tile">
        <div class="fd-tile__content">
            <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
            <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
            <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
            <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
            <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
            <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
            <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
            <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
            <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
            <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
            <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
            <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
</div>

Product Tile Grid (2 col)

Lorem ipsum

<div class="fd-tile-grid fd-tile-grid--2col">
    <div class="fd-product-tile" role="button">
        <div class="fd-product-tile__media" style="background-image: url('https://techne.yaas.io/images/product-thumbnail-wide.png');"></div>
        <div class="fd-product-tile__content">
          <h3 class="fd-product-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-product-tile" role="button">
        <div class="fd-product-tile__media" style="background-image: url('https://techne.yaas.io/images/product-thumbnail-wide.png');"></div>
        <div class="fd-product-tile__content">
          <h3 class="fd-product-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-product-tile" role="button">
        <div class="fd-product-tile__media" style="background-image: url('https://techne.yaas.io/images/product-thumbnail-wide.png');"></div>
        <div class="fd-product-tile__content">
          <h3 class="fd-product-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-product-tile" role="button">
        <div class="fd-product-tile__media" style="background-image: url('https://techne.yaas.io/images/product-thumbnail-wide.png');"></div>
        <div class="fd-product-tile__content">
          <h3 class="fd-product-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-product-tile" role="button">
        <div class="fd-product-tile__media" style="background-image: url('https://techne.yaas.io/images/product-thumbnail-wide.png');"></div>
        <div class="fd-product-tile__content">
          <h3 class="fd-product-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-product-tile" role="button">
        <div class="fd-product-tile__media" style="background-image: url('https://techne.yaas.io/images/product-thumbnail-wide.png');"></div>
        <div class="fd-product-tile__content">
          <h3 class="fd-product-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-product-tile" role="button">
        <div class="fd-product-tile__media" style="background-image: url('https://techne.yaas.io/images/product-thumbnail-wide.png');"></div>
        <div class="fd-product-tile__content">
          <h3 class="fd-product-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-product-tile" role="button">
        <div class="fd-product-tile__media" style="background-image: url('https://techne.yaas.io/images/product-thumbnail-wide.png');"></div>
        <div class="fd-product-tile__content">
          <h3 class="fd-product-tile__title">Lorem ipsum</h3>
        </div>
    </div>
</div>

6 col grid w/ span helpers

Shows use of helper classes .fd-has-grid-row-span-2 and .fd-has-grid-column-span-2.

Lorem ipsum

<div class="fd-tile-grid fd-tile-grid--6col">
    <div class="fd-tile fd-has-grid-row-span-2 fd-has-background-color-accent-7">
        <div class="fd-tile__content">
          <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
          <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
          <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
          <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
          <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
          <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
          <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
          <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile">
        <div class="fd-tile__content">
          <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
    <div class="fd-tile fd-has-grid-column-span-2 fd-has-background-color-accent-7">
        <div class="fd-tile__content">
          <h3 class="fd-tile__title">Lorem ipsum</h3>
        </div>
    </div>
</div>