Lehigh Clutch Style Guide

Tile Grid 

<div class="tile-grid">
    <div class="tile ">

        <label for="career_1" class="tile__label">
            <div class="tile__body">

                <h4 class="tile__heading">Academic Research</h4>

                <div class="tile__description">Conduct research in academic settings.</div>
            </div>

            <span class="tile__checkmark" aria-hidden="true"><i class="fas fa-check"></i></span>
        </label>
    </div>
    <div class="tile ">

        <label for="career_2" class="tile__label">
            <div class="tile__body">

                <h4 class="tile__heading">Academic Tenure Track</h4>

                <div class="tile__description">Pursue tenure-track faculty positions.</div>
            </div>

            <span class="tile__checkmark" aria-hidden="true"><i class="fas fa-check"></i></span>
        </label>
    </div>
    <div class="tile ">

        <label for="career_3" class="tile__label">
            <div class="tile__body">

                <h4 class="tile__heading">Academic Teaching Track</h4>

                <div class="tile__description">Focus on teaching and education.</div>
            </div>

            <span class="tile__checkmark" aria-hidden="true"><i class="fas fa-check"></i></span>
        </label>
    </div>
</div>
 
<div class="tile-grid">
{% block cms_override %}
  {% for tile in tiles %}
    {% include "@tile" with tile only %}
  {% endfor %}
{% endblock cms_override %}
</div>
 
{
  "tiles": [
    {
      "tile_id": "career_1",
      "tile_name": "career_pathway",
      "tile_value": "academic_research",
      "tile_heading": "Academic Research",
      "tile_description": "Conduct research in academic settings."
    },
    {
      "tile_id": "career_2",
      "tile_name": "career_pathway",
      "tile_value": "tenure_track",
      "tile_heading": "Academic Tenure Track",
      "tile_description": "Pursue tenure-track faculty positions."
    },
    {
      "tile_id": "career_3",
      "tile_name": "career_pathway",
      "tile_value": "teaching_track",
      "tile_heading": "Academic Teaching Track",
      "tile_description": "Focus on teaching and education."
    }
  ]
}
  • Content: 
    .tile-grid {
  display: flex;
  flex-direction: column;
  gap: $spacer;
  margin-bottom: $space_two;

  @include media-breakpoint-up(md) {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .tile {
    margin: 0;

    @include media-breakpoint-up(md) {
      flex: 0 0 calc(50% - ($spacer / 2));
      max-width: calc(50% - ($spacer / 2));
    }

    @include media-breakpoint-up(lg) {
      flex: 0 0 calc(33.333% - ($spacer * 2 / 3));
      max-width: calc(33.333% - ($spacer * 2 / 3));
    }
  }
}

.cssgrid {
  .tile-grid {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: $spacer;
    row-gap: $spacer;

    @media (min-width: 768px) {
      grid-template-columns: 1fr 1fr;
    }

    @media (min-width: 1024px) {
      grid-template-columns: repeat(5, 1fr);
    }

    .tile {
      flex: unset;
      max-width: unset;

      &.tile__center {
        grid-column: 3;
      }
    }
  }
}
  • URL: /components/raw/tile_grid/tile_grid.scss
  • Filesystem Path: bits/05-sections/tile_grid/tile_grid.scss
  • Size: 914 Bytes

Responsive grid layout for tile components