Component Library

Grid List 

<div class="grid-list">
    <h2 class="grid-list__label">Optional Label</h2>
    <h3 class="grid-list__sublabel">Lorem ipsum eiusmod proident duis dolore proident officia adipiscing sunt proident tempor enim aliquip commodo eiusmod enim ex quis dolor</h3>
    <ul>
        <li>
            <a href="https://iastate.edu" class="grid-list__item">
                <div class="grid-list__image">
                    <i class="fa-solid fa-graduation-cap"></i>
                </div>
                <span class="grid-list__text">Font Awesome Example
              </span>
            </a>

        </li>
        <li>
            <a href="https://iastate.edu" class="grid-list__item">
                <div class="grid-list__image">
                    <i class="fak fa-iastate22-email"></i>
                </div>
                <span class="grid-list__text">Font Awesome Example Two
              </span>
            </a>

        </li>
        <li>
            <a href="https://iastate.edu" class="grid-list__item">
                <div class="grid-list__image">
                    <img src="https://placehold.co/500x400" alt="" loading="lazy" width="130" height="130">
                </div>
            </a>

        </li>
        <li>
            <a href="https://iastate.edu" class="grid-list__item">
                                                <span class="grid-list__text grid-list--no-text">Lorem ipsum eiusmod proident duis dolore
              </span>
                                    </a>

        </li>
        <li>
            <a href="https://iastate.edu" class="grid-list__item">
                <div class="grid-list__image">
                    <img src="https://cdn.theme.iastate.edu/img/iastate22/icons/multicolor-icon-undergraduate.svg" alt="" loading="lazy" width="130" height="130">
                </div>
                <span class="grid-list__text">Undergraduate Student
              </span>
            </a>

        </li>
        <li>
            <div class="grid-list__item">
                <div class="grid-list__image">
                    <img src="https://cdn.theme.iastate.edu/img/iastate22/icons/multicolor-icon-undergraduate.svg" alt="" loading="lazy" width="130" height="130">
                </div>
                <span class="grid-list__text">Non-Link Example
              </span>
            </div>

        </li>
        <li>
            <a href="https://iastate.edu" class="grid-list__item">
                <div class="grid-list__image">
                    <img src="https://cdn.theme.iastate.edu/img/iastate22/icons/multicolor-icon-graduate.svg" alt="" loading="lazy" width="130" height="130">
                </div>
                <span class="grid-list__text">Graduate Student
              </span>
            </a>

        </li>
        <li>
            <a href="https://iastate.edu" class="grid-list__item">
                <div class="grid-list__image">
                    <img src="https://cdn.theme.iastate.edu/img/iastate22/icons/multicolor-icon-transfer.svg" alt="" loading="lazy" width="130" height="130">
                </div>
                <span class="grid-list__text">Transfer Student
              </span>
            </a>

        </li>
        <li>
            <a href="https://iastate.edu" class="grid-list__item">
                <div class="grid-list__image">
                    <img src="https://cdn.theme.iastate.edu/img/iastate22/icons/multicolor-icon-non-degree.svg" alt="" loading="lazy" width="130" height="130">
                </div>
                <span class="grid-list__text">Non-Degree Student
              </span>
            </a>

        </li>
        <li>
            <a href="https://iastate.edu" class="grid-list__item">
                <div class="grid-list__image">
                    <img src="https://cdn.theme.iastate.edu/img/iastate22/icons/multicolor-icon-military-non-traditional.svg" alt="" loading="lazy" width="130" height="130">
                </div>
                <span class="grid-list__text">Military or Nontraditional Student
              </span>
            </a>

        </li>
        <li>
            <a href="https://iastate.edu" class="grid-list__item">
                <div class="grid-list__image">
                    <img src="https://cdn.theme.iastate.edu/img/iastate22/icons/multicolor-icon-international.svg" alt="" loading="lazy" width="130" height="130">
                </div>
                <span class="grid-list__text">International Student
              </span>
            </a>

        </li>
    </ul>
</div>
 
<div class="grid-list">
  {% if label %}
    <h2 class="grid-list__label">{{ label }}</h2>
  {% endif %}
  {% if sublabel %}
    <h3 class="grid-list__sublabel">{{ sublabel }}</h3>
  {% endif %}
  <ul>
    {% for list_item in grid_list %}
      <li>
        {% if list_item.url %}
          <a href="{{ list_item.url }}" class="grid-list__item">
          {% else %}
            <div class="grid-list__item">
            {% endif %}
            {% if list_item.media.image or list_item.media.icon_id %}
              <div class="grid-list__image">
                {% if list_item.media.image %}
                  <img src="{{ list_item.media.image|path }}" alt="" loading="lazy" width="130" height="130">
                {% elseif list_item.media.icon_id %}
                  <i class="{{ list_item.media.icon_id }}"></i>
                {% endif %}
              </div>
            {% endif %}
            {% if list_item.text %}
              <span class="grid-list__text{% if not (list_item.media.image or list_item.media.icon_id) %} grid-list--no-text{% endif %}">{{ list_item.text }}
              </span>
            {% endif %}
            {% if list_item.url %}
            </a>
        {% else %}
          </div>
        {% endif %}

      </li>
    {% endfor %}
  </ul>
</div>
 
{
  "label": "Optional Label",
  "sublabel": "Lorem ipsum eiusmod proident duis dolore proident officia adipiscing sunt proident tempor enim aliquip commodo eiusmod enim ex quis dolor",
  "grid_list": [
    {
      "media": {
        "image": "",
        "icon_id": "fa-solid fa-graduation-cap"
      },
      "url": "https://iastate.edu",
      "text": "Font Awesome Example"
    },
    {
      "media": {
        "image": "",
        "icon_id": "fak fa-iastate22-email"
      },
      "url": "https://iastate.edu",
      "text": "Font Awesome Example Two"
    },
    {
      "media": {
        "image": "https://placehold.co/500x400",
        "icon_id": ""
      },
      "url": "https://iastate.edu",
      "text": ""
    },
    {
      "media": {
        "image": "",
        "icon_id": ""
      },
      "url": "https://iastate.edu",
      "text": "Lorem ipsum eiusmod proident duis dolore"
    },
    {
      "media": {
        "image": "https://cdn.theme.iastate.edu/img/iastate22/icons/multicolor-icon-undergraduate.svg",
        "icon_id": ""
      },
      "url": "https://iastate.edu",
      "text": "Undergraduate Student"
    },
    {
      "media": {
        "image": "https://cdn.theme.iastate.edu/img/iastate22/icons/multicolor-icon-undergraduate.svg",
        "icon_id": ""
      },
      "url": "",
      "text": "Non-Link Example"
    },
    {
      "media": {
        "image": "https://cdn.theme.iastate.edu/img/iastate22/icons/multicolor-icon-graduate.svg",
        "icon_id": ""
      },
      "url": "https://iastate.edu",
      "text": "Graduate Student"
    },
    {
      "media": {
        "image": "https://cdn.theme.iastate.edu/img/iastate22/icons/multicolor-icon-transfer.svg",
        "icon_id": ""
      },
      "url": "https://iastate.edu",
      "text": "Transfer Student"
    },
    {
      "media": {
        "image": "https://cdn.theme.iastate.edu/img/iastate22/icons/multicolor-icon-non-degree.svg",
        "icon_id": ""
      },
      "url": "https://iastate.edu",
      "text": "Non-Degree Student"
    },
    {
      "media": {
        "image": "https://cdn.theme.iastate.edu/img/iastate22/icons/multicolor-icon-military-non-traditional.svg",
        "icon_id": ""
      },
      "url": "https://iastate.edu",
      "text": "Military or Nontraditional Student"
    },
    {
      "media": {
        "image": "https://cdn.theme.iastate.edu/img/iastate22/icons/multicolor-icon-international.svg",
        "icon_id": ""
      },
      "url": "https://iastate.edu",
      "text": "International Student"
    }
  ]
}
  • Content: 
    .grid-list {
  margin-top: rem(55);
  @include media-breakpoint-up(lg) {
    margin-bottom: rem(70);
  }
  ul {
    @include media-breakpoint-up(lg) {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: stretch;
      flex-wrap: wrap;
      gap: rem(30);
    }
    li {
      padding: rem(11) rem(50) rem(11) rem(36);
      position: relative;
      @include media-breakpoint-up(lg) {
        flex: 1 1 0;
        padding: 0;
      }
      &:last-child {
        &:after {
          display: none;
        }
      }
      &:after {
        content: "";
        position: absolute;
        inset: auto rem(35) 0;
        border-bottom: rem(2) solid $off-white;
        @include media-breakpoint-up(sm) {
          inset: auto auto 0 50%;
          width: rem(500);
          transform: translateX(-50%);
        }
        @include media-breakpoint-up(lg) {
          display: none;
        }
      }
    }
  }
}

.grid-list__label {
  padding: 0;
}
.grid-list__sublabel {
  color: $black;
  margin-bottom: rem(40);
}

.grid-list__item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  max-width: rem(450);
  margin-left: auto;
  margin-right: auto;

  color: $iastate-maroon;

  @include media-breakpoint-up(lg) {
    max-width: none;
    flex-direction: column;
    gap: rem(20);
  }
}

a.grid-list__item {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: rem(1);
  transition: 0.3s text-decoration-color ease-in-out;
  &:focus,
  &:hover {
    text-decoration-color: transparent;
  }
}

.grid-list__image {
  flex: 0 0 auto;
  width: rem(65);
  display: flex;
  align-items: center;
  justify-content: center;
  @extend %responsive-img;

  @include media-breakpoint-up(lg) {
    width: rem(130);
  }

  &:before {
    padding-top: 100%;
  }

  .svg-inline--fa {
    display: block;
    height: 100%;
    max-height: rem(70);
    width: auto !important;
  }
}

.grid-list__text {
  flex: 1 1 0px;
  font-family: $typeface-sans-serif;
  font-weight: 700;
  color: currentColor;
  font-size: rem(21);
  line-height: (30 / 21);
  padding: 0 rem(20);
  transition: 0.2s color ease-in-out;
  position: relative;
  text-align: left;
  @include media-breakpoint-up(lg) {
    text-align: center;
  }
  &.grid-list--no-text {
    position: relative;
    left: rem(65);
    @include media-breakpoint-up(lg) {
      margin-top: rem(150);
      left: initial;
    }
  }
}
  • URL: /components/raw/grid-list/_grid-list.scss
  • Filesystem Path: src/components/grid-list/_grid-list.scss
  • Size: 2.5 KB

There are no notes for this item.