Lehigh Clutch Style Guide

Tile: Default 

<div class="tile ">

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

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

            <div class="tile__description">An optional description displays here and can be up to 100 characters.</div>
        </div>

        <span class="tile__checkmark" aria-hidden="true"><i class="fas fa-check"></i></span>
    </label>
</div>
 
<div class="tile {{ tile_style ? 'tile__' ~ tile_style }}">
  {{ children }}
  <label for="{{ tile_id }}" class="tile__label">
    <div class="tile__body">
      {% if tile_icon %}
        <div class="tile__icon">
          {% if tile_icon is iterable %}
            {{ tile_icon }}
          {% else %}
            <i class="{{ tile_icon }}" aria-hidden="true"></i>
          {% endif %}
        </div>
      {% endif %}

      <h4 class="tile__heading">{{ tile_heading }}</h4>

      {% if tile_description %}
        <div class="tile__description">{{ tile_description }}</div>
      {% endif %}
    </div>

    <span class="tile__checkmark" aria-hidden="true"><i class="fas fa-check"></i></span>
  </label>
</div>
 
{
  "tile_id": "tile_1",
  "tile_name": "tile_selection",
  "tile_value": "option1",
  "tile_type": "radio",
  "tile_heading": "Academic Research",
  "tile_description": "An optional description displays here and can be up to 100 characters.",
  "tile_required": false
}
  • Content: 
    .tile {
  position: relative;

  input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  &__label {
    background-color: $patina-green;
    background-color: var(--patina-green, $patina-green);
    border: 1px solid $patina-green;
    border: 1px solid var(--patina-green, $patina-green);
    color: $base_font;
    color: var(--base_font, $base_font);

    display: flex;
    flex-direction: column;
    padding: $space_and_half;
    cursor: pointer;
    min-height: 194px;
    transition: all 0.2s ease-in-out;

    &:hover,
    &:focus {
      color: $grey_darkest;
      color: var(--grey_darkest, $grey_darkest);
      background-color: $white;
      background-color: var(--white, $white);
      box-shadow: 6px 6px 16px 0 rgba(0, 0, 0, 0.10);

    }

    .tile__center & {
      min-height: auto;
    }

  }

  &__body {
    color: $grey_darkest;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.5rem;
  }

  &__icon {
    font-size: 2.5rem;
    margin-bottom: $space_one_half;

    @include media-breakpoint-up(md) {
      font-size: 3rem;
    }
  }

  &__heading {
    color: $black;
    text-align: center;
    font-size: 1.125rem;
    font-weight: 650;
    margin: 0 0 $space_one_half 0;
  }

  &__description {
    margin: 0;
    line-height: 1.4;
  }

  &__checkmark {
    position: absolute;
    top: $space_one_half;
    right: $space_one_half;
    width: 24px;
    height: 24px;
    background-color: $white;
    border: 2px solid $grey_k20;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;

    i {
      font-size: 1rem;
      color: $white;
    }
  }

  input:checked ~ &__label {
    background-color: $lehigh_brown;
    border-color: $white;

    .tile__heading {
      color: $white;
    }

    .tile__description, .tile__description p {
      color: $grey_20;
    }

    .tile__icon {
      color: $white;
    }

    .tile__checkmark {
      opacity: 1;
      background-color: transparent;
      border-color: transparent;

    }
  }

  input:focus ~ &__label {
    outline: 2px solid $hyperlink;
    outline-offset: 2px;
  }
}
  • URL: /components/raw/tile/tile.scss
  • Filesystem Path: bits/04-components/tile/tile.scss
  • Size: 2.2 KB

Selectable tile component for form choices with optional icons