Component Library

Modal: Image Download 

<div class="iastate22-modal iastate22-modal--image-download" id="modal-1" aria-hidden="false">
    <div class="iastate22-modal__overlay" tabindex="-1" data-micromodal-close>
        <div class="iastate22-modal__container iastate22-modal__container-with-media" id="modal-1-content" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
            <button class="iastate22-modal__close" aria-label="Close modal" data-micromodal-close>
        <i class="fa-light fa-xmark" aria-hidden="true"></i>
      </button>
            <figure>
                <div class="iastate22-modal__media">
                    <img src="../../img/Component-Modal-Square-Image_FPO.jpg" alt="" loading="lazy" width="400" height="400">
                    <a href="../../img/Component-Modal-Square-Image_FPO.jpg" class="iastate22-button iastate22-button--reverse" download>
              <span class="text">Download</span>
              <span class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14.397" viewbox="0 0 14 14.397">
                  <g id="SVG_icon_download" transform="translate(-804.5 -1307.103)">
                    <path id="Path_3234" data-name="Path 3234" d="M2463-10172.689v9.989" transform="translate(-1651.393 11479.792)" fill="none" stroke="#7c2529" stroke-width="2"/>
                    <path id="Path_3235" data-name="Path 3235" d="M2443.81-10144l4.594,4.594L2453-10144" transform="translate(-1636.81 11457.059)" fill="none" stroke="#7c2529" stroke-width="2"/>
                    <line id="Line_4" data-name="Line 4" x2="14" transform="translate(804.5 1320.5)" fill="none" stroke="#7c2529" stroke-width="2"/>
                  </g>
                </svg>
              </span>
            </a>
                </div>
                <figcaption class="iastate22-modal__content">
                    <h2 class="iastate22-modal__title" id="modal-1-title">Modal Title Lorem Ipsum Dolor Sit Amet</h2>
                    <p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </p>
                </figcaption>
            </figure>
        </div>
    </div>
</div>
 
<div class="iastate22-modal iastate22-modal--image-download" id="{{ id }}" aria-hidden="false">
  <div class="iastate22-modal__overlay" tabindex="-1" data-micromodal-close>
    <div class="iastate22-modal__container{% if image %} iastate22-modal__container-with-media{% endif %}" id="{{ id }}-content" role="dialog" aria-modal="true" aria-labelledby="{{ id }}-title">
      <button class="iastate22-modal__close" aria-label="Close modal" data-micromodal-close>
        <i class="fa-light fa-xmark" aria-hidden="true"></i>
      </button>
      <figure>
        {% if image %}
          <div class="iastate22-modal__media">
            <img src="{{ image|path }}" alt="" loading="lazy" width="400" height="400">
            <a href="{{ image|path }}" class="iastate22-button iastate22-button--reverse" download>
              <span class="text">Download</span>
              <span class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14.397" viewbox="0 0 14 14.397">
                  <g id="SVG_icon_download" transform="translate(-804.5 -1307.103)">
                    <path id="Path_3234" data-name="Path 3234" d="M2463-10172.689v9.989" transform="translate(-1651.393 11479.792)" fill="none" stroke="#7c2529" stroke-width="2"/>
                    <path id="Path_3235" data-name="Path 3235" d="M2443.81-10144l4.594,4.594L2453-10144" transform="translate(-1636.81 11457.059)" fill="none" stroke="#7c2529" stroke-width="2"/>
                    <line id="Line_4" data-name="Line 4" x2="14" transform="translate(804.5 1320.5)" fill="none" stroke="#7c2529" stroke-width="2"/>
                  </g>
                </svg>
              </span>
            </a>
          </div>
        {% endif %}
        <figcaption class="iastate22-modal__content">
          <h2 class="iastate22-modal__title" id="{{ id }}-title">{{ title }}</h2>
          <p>{{ content|raw }}</p>
        </figcaption>
      </figure>
    </div>
  </div>
</div>
 
{
  "id": "modal-1",
  "image": "../../img/Component-Modal-Square-Image_FPO.jpg",
  "title": "Modal Title Lorem Ipsum Dolor Sit Amet",
  "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>",
  "call_to_action": "<a href=\"#\" class=\"iastate22-button\">Button Label Lorem</a>"
}
  • Content: 
    .iastate22-modal {
  display: none;

  &.is-open {
    display: block;
    position: relative;
    z-index: 11;
  }
}

.iastate22-modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba($white, 0.9);

  .iastate22-modal--image-download & {
    backdrop-filter: blur(rem(9));
    background: rgba($white, 0.95);
  }
}

.iastate22-modal__container {
  background-color: $white;
  max-width: rem(414);
  width: 80%;
  max-height: 90vh;
  box-shadow: rem(9) rem(9) rem(20) rgba($black, 0.2);
  overflow-y: auto;
  position: relative;
  padding: rem(45);
  @include media-breakpoint-up(md) {
    max-width: rem(844);
    width: 90%;
    max-height: 100vh;
    padding: 0;
  }
  @include media-breakpoint-up(lg) {
    width: 100%;
  }

  .iastate22-modal--image-download & {
    width: 100%;
    position: unset;
    background-color: transparent;
    box-shadow: none;
  }

  .iastate22-modal--with-video &,
  .iastate22-modal--image-download & {
    @include media-breakpoint-up(md) {
      padding: rem(45) rem(45) 0;
    }
  }
  &.iastate22-modal__container-with-media {
    @include media-breakpoint-up(md) {
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;

      .iastate22-modal--with-video &,
      .iastate22-modal--image-download & {
        flex-direction: column;
        flex-wrap: nowrap;
      }
    }
  }
}

.iastate22-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.iastate22-modal__content {
  padding: rem(20) 0 0 0;
  @include media-breakpoint-up(md) {
    flex: 0 1 auto;
    width: 100%;
    padding: rem(45) rem(75) rem(45) rem(54);

    .iastate22-modal--with-video &,
    .iastate22-modal--image-download & {
      padding: rem(24) 0 rem(45);
    }
  }
  .iastate22-modal__container-with-media & {
    @include media-breakpoint-up(md) {
      width: 64%;

      .iastate22-modal--with-video &,
      .iastate22-modal--image-download & {
        width: 100%;
      }
    }
  }
  .iastate22-modal__content-cta {
    margin-top: rem(20);
  }
}

.iastate22-modal__title {
  margin: 0 0 rem(10) 0;
  padding: 0;
  font-family: $typeface-sans-serif;
  font-size: rem(21);
  line-height: (30 / 21);
  font-weight: 700;
}

.iastate22-modal__close {
  background: transparent;
  z-index: 1;
  width: rem(44);
  height: rem(44);
  position: absolute;
  top: rem(2);
  right: rem(2);
  padding: 0;
  border: none;
  cursor: pointer;
  &:hover {
    .fa-xmark {
      color: $iastate-maroon;
    }
  }
  .fa-xmark {
    pointer-events: none;
    font-size: rem(25);
    color: $iastate-red;
    transition: 0.2s color ease-in-out;
    @include media-breakpoint-up(md) {
      font-size: rem(30);
    }
  }

  .iastate22-modal--image-download & {
    @include media-breakpoint-up(lg) {
      top: rem(60);
      right: rem(80);
    }
  }
}

.iastate22-modal__media {
  @extend %responsive-img;
  @include media-breakpoint-up(md) {
    flex: 0 1 auto;
    width: 36%;

    .iastate22-modal--with-video &,
    .iastate22-modal--image-download & {
      width: 100%;
      flex: 0 0 100%;
    }
  }
  &:before {
    padding-top: 100%;

    .iastate22-modal--with-video &,
    .iastate22-modal--image-download & {
      display: none;
    }
  }

  .iastate22-modal--image-download & {
    aspect-ratio: initial;
    > img {
      position: relative;
      width: 100%;
      height: auto;
      object-fit: contain;
    }
  }
}

.iastate22-modal__content-form {
  margin-top: rem(20);
  @include media-breakpoint-up(md) {
    display: flex;
    align-items: flex-end;
  }
  label {
    margin-bottom: 0;
    padding-right: rem(10);
    @include media-breakpoint-up(md) {
      flex: 1 1 auto;
    }
    .label-text {
      margin-bottom: rem(3);
    }
    input {
      width: 100%;
    }
  }
  button[type="submit"] {
    @extend %iastate22-button;
    margin-bottom: 0;
    @include media-breakpoint-up(md) {
      flex: 0 0 auto;
    }
  }
}

.iastate22-modal--with-video {
  .video-embed__caption {
    display: none;
  }

  .video-embed {
  }
}

.iastate22-modal--image-download .iastate22-modal__media .iastate22-button {
  position: absolute;
  bottom: rem(32);
  right: rem(32);
  margin-bottom: 0;

  @include media-breakpoint-down("lg") {
    padding: rem(8) rem(13.5);
    bottom: rem(24);
    right: rem(24);
  }

  .text {
    color: $iastate-maroon;

    @include media-breakpoint-down("lg") {
      display: none;
    }
  }

  .icon {
    @include media-breakpoint-down("lg") {
      position: relative;
      padding-left: 0;
      right: 0;
      bottom: 0;
    }
  }
}
  • URL: /components/raw/modal/_modal.scss
  • Filesystem Path: src/components/modal/_modal.scss
  • Size: 4.7 KB

Modal

This is a custom component (the class has been prefaced with .iastate22-[classname]).

  • This uses a 3rd-party library (which is lightweight and very accessible) called Micromodal.js
  • There are two variants, the default modal contains an optional image, with headline, raw html and a raw html call to action section, and --with-form with also contains an optional image, with headline, raw html and a small form with an input and submit button. The type of input field and button is configurable.
  • The image field is optional in both variants
  • This uses a data-attribute of [data-micromodal-trigger] on the modal trigger and requires a corresponding id on the modal
  • The examples here use the .iastate22-button but any element can be used to trigger the modal
  • The custom styles are imported into the index.scss file as @import "../components/modal/modal";
  • The .ts file for the javascript is imported into the index.ts file as import Modal from "./components/modal"; and called as Modal.init();