carbon-components/src/components/tile/tile--grid.html

Carbon Components is a component library for IBM Cloud

<div class="bx--grid">

  <div class="bx--tile-container" style="width: 100%">
    <div class="bx--row">
      <div class="bx--col bx--col-md-12">
        <div data-tile="expandable" class="bx--tile bx--tile--expandable" tabindex="0">
          <button class="bx--tile__chevron">
            <svg width="12" height="8" viewBox="0 0 12 8" fill-rule="evenodd">
              <path d="M10.6 0L6 4.7 1.4 0 0 1.4l6 6.1 6-6.1z"></path>
            </svg>
          </button>
          <div class="bx--tile-content">
            <span data-tile-atf class="bx--tile-content__above-the-fold" style="height: 200px">
              <!-- Above the fold content here -->
              <h2>Above the fold content here</h2>
            </span>
            <span class="bx--tile-content__below-the-fold" style="height: 400px">
              <!-- Rest of the content here -->
              <h2>Below the fold content here</h2>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="bx--row">
      <div class="bx--col bx--col-sm-6 bx--col-xs-6">
        <label for="tile-id-1" aria-label="tile" class="bx--tile bx--tile--selectable" data-tile="selectable" tabindex="0">
          <input tabindex="-1" id="tile-id-1" class="bx--tile-input" data-tile-input value="tile" type="checkbox" name="tiles" title="tile" />
          <div class="bx--tile__checkmark">
            <svg width='16' height='16' viewBox='0 0 16 16' fill-rule='evenodd'>
              <path d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z'></path>
            </svg>
          </div>
          <div class="bx--tile-content">
          <!-- Tile content here -->
          </div>
        </label>
      </div>
      <div class="bx--col bx--col-sm-6 bx--col-xs-6">
        <label for="tile-id-2" aria-label="tile-2" class="bx--tile bx--tile--selectable" data-tile="selectable" tabindex="0">
          <input tabindex="-1" id="tile-id-2" class="bx--tile-input" data-tile-input value="tile-2" type="checkbox" name="tiles" title="tile-2" />
          <div class="bx--tile__checkmark">
            <svg width='16' height='16' viewBox='0 0 16 16' fill-rule='evenodd'>
              <path d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z'></path>
            </svg>
          </div>
          <div class="bx--tile-content">
          <!-- Tile content here -->
          </div>
        </label>
      </div>
    </div>
    <div class="bx--row">
      <div class="bx--col bx--col-md-4 bx--col-sm-4">
        <a data-tile="clickable" class="bx--tile bx--tile--clickable" tabindex="0"></a>
      </div>
      <div class="bx--col bx--col-md-4 bx--col-sm-4">
        <a data-tile="clickable" class="bx--tile bx--tile--clickable" tabindex="0"></a>
      </div>
      <div class="bx--col bx--col-md-4 bx--col-sm-4">
        <a data-tile="clickable" class="bx--tile bx--tile--clickable" tabindex="0"></a>
      </div>
    </div>
    <div class="bx--row">
      <div class="bx--col bx--col-md-3 bx--col-sm-12">
        <div class="bx--tile"></div>
      </div>
      <div class="bx--col bx--col-md-3 bx--col-sm-12">
        <div class="bx--tile"></div>
      </div>
      <div class="bx--col bx--col-md-3 bx--col-sm-12">
        <div class="bx--tile"></div>
      </div>
      <div class="bx--col bx--col-md-3 bx--col-sm-12">
        <div class="bx--tile"></div>
      </div>
    </div>
    <div class="bx--row">
      <div class="bx--col bx--col-lg-2 bx--col-md-12">
        <div class="bx--tile"></div>
      </div>
      <div class="bx--col bx--col-lg-2 bx--col-md-12">
        <div class="bx--tile"></div>
      </div>
      <div class="bx--col bx--col-lg-2 bx--col-md-12">
        <div class="bx--tile"></div>
      </div>
      <div class="bx--col bx--col-lg-2 bx--col-md-12">
        <div class="bx--tile"></div>
      </div>
      <div class="bx--col bx--col-lg-2 bx--col-md-12">
        <div class="bx--tile"></div>
      </div>
      <div class="bx--col bx--col-lg-2 bx--col-md-12">
        <div class="bx--tile"></div>
      </div>
    </div>
    <div class="bx--row">
      <div class="bx--col bx--col-md-8 bx--col-sm-8">
        <div class="bx--tile"></div>
      </div>
      <div class="bx--col bx--col-md-4 bx--col-sm-4">
        <div class="bx--tile"></div>
      </div>
    </div>
  </div>

</div>