Component Library

Link Video 

<button class="" data-micromodal-trigger=>
  Video Link Style
  <span class="icon-video">
    <svg xmlns="http://www.w3.org/2000/svg" width="31" height="18.002" viewBox="0 0 31 18.002" class="icon-video--inactive">
      <path d="M31,3.984a2.153,2.153,0,0,0-2.891-1.846L23,3.75V2.979A3.03,3.03,0,0,0,19.916,0H3.1A3.052,3.052,0,0,0,0,3v12.02A3.047,3.047,0,0,0,3.026,18H19.9A3.055,3.055,0,0,0,23,15.007v-.746l5.045,1.59a2.2,2.2,0,0,0,.8.153h.014a1.992,1.992,0,0,0,1.063-.264A2.027,2.027,0,0,0,31,13.979Zm-10,11A1.079,1.079,0,0,1,19.916,16H3.063A1.08,1.08,0,0,1,2,15V3.024A1.049,1.049,0,0,1,3.061,2H19.933A1.062,1.062,0,0,1,21,3V14.981Zm7.98-1.005a.215.215,0,0,1-.108.028h0l-.155-.038L23,12.164V5.847l5.78-1.826a.229.229,0,0,1,.081-.016h.047A.119.119,0,0,1,29,4.037Z" transform="translate(0 0)" fill="#7c2529"/>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" width="30.873" height="18" viewBox="0 0 30.873 18" class="icon-video--active">
      <path id="SVG_Video_Gold_Fill" d="M-980.032,12916a2.129,2.129,0,0,1-1.968-2.249v-13.5a2.129,2.129,0,0,1,1.968-2.25h16.93a2.131,2.131,0,0,1,1.974,2.25v13.507A2.13,2.13,0,0,1-963.1,12916Zm27.316-2.1-6.412-2.162v-9.481l6.412-2.159a1.093,1.093,0,0,1,.451-.1,1.167,1.167,0,0,1,1.138,1.2v11.6a1.218,1.218,0,0,1-.541,1.021,1.1,1.1,0,0,1-.593.175A1.115,1.115,0,0,1-952.716,12913.9Z" transform="translate(982 -12898)" fill="#f1be48"/>
    </svg>
  </span>
</button>
<div class="iastate22-modal iastate22-modal--with-video" id="video-modal" aria-hidden="false">
    <div class="iastate22-modal__overlay" tabindex="-1" data-micromodal-close>
        <div class="iastate22-modal__container iastate22-modal__container-with-media" id="video-modal-content" role="dialog" aria-modal="true" aria-labelledby="video-modal-title">
            <button class="iastate22-modal__close" aria-label="Close modal" data-micromodal-close><i class="fa-light fa-xmark" aria-hidden="true"></i></button>
            <div class="iastate22-modal__media">
                <div class="video-embed">
                    <div class="video-embed__media-wrap">
                        <img src="../../img/IMG-Inline_Center_FPO.jpg" alt="" />
                        <div class="video-embed__video" aria-label="YouTube Video: Your future starts now." data-vid="LjOmcZkXVcU"></div>
                    </div>
                    <div class="video-embed__caption">Video caption lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat.</div>
                </div>
            </div>
            <div class="iastate22-modal__content">
                <h2 class="iastate22-modal__title" id="video-modal-title">Video Modal</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
        </div>
    </div>
</div>
 
<button class="{{ variant }}" data-micromodal-trigger={{ video.modal.id }}>
  {{text}}
  <span class="icon-video">
    <svg xmlns="http://www.w3.org/2000/svg" width="31" height="18.002" viewBox="0 0 31 18.002" class="icon-video--inactive">
      <path d="M31,3.984a2.153,2.153,0,0,0-2.891-1.846L23,3.75V2.979A3.03,3.03,0,0,0,19.916,0H3.1A3.052,3.052,0,0,0,0,3v12.02A3.047,3.047,0,0,0,3.026,18H19.9A3.055,3.055,0,0,0,23,15.007v-.746l5.045,1.59a2.2,2.2,0,0,0,.8.153h.014a1.992,1.992,0,0,0,1.063-.264A2.027,2.027,0,0,0,31,13.979Zm-10,11A1.079,1.079,0,0,1,19.916,16H3.063A1.08,1.08,0,0,1,2,15V3.024A1.049,1.049,0,0,1,3.061,2H19.933A1.062,1.062,0,0,1,21,3V14.981Zm7.98-1.005a.215.215,0,0,1-.108.028h0l-.155-.038L23,12.164V5.847l5.78-1.826a.229.229,0,0,1,.081-.016h.047A.119.119,0,0,1,29,4.037Z" transform="translate(0 0)" fill="#7c2529"/>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" width="30.873" height="18" viewBox="0 0 30.873 18" class="icon-video--active">
      <path id="SVG_Video_Gold_Fill" d="M-980.032,12916a2.129,2.129,0,0,1-1.968-2.249v-13.5a2.129,2.129,0,0,1,1.968-2.25h16.93a2.131,2.131,0,0,1,1.974,2.25v13.507A2.13,2.13,0,0,1-963.1,12916Zm27.316-2.1-6.412-2.162v-9.481l6.412-2.159a1.093,1.093,0,0,1,.451-.1,1.167,1.167,0,0,1,1.138,1.2v11.6a1.218,1.218,0,0,1-.541,1.021,1.1,1.1,0,0,1-.593.175A1.115,1.115,0,0,1-952.716,12913.9Z" transform="translate(982 -12898)" fill="#f1be48"/>
    </svg>
  </span>
</button>
{% include "@modal--with-video" with video.modal %}
 
{
  "text": "Video Link Style",
  "modal": {
    "id": "Video-Modal-Vid-Link",
    "title": "Video Modal",
    "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>",
    "video": {
      "wallpaper": "../../img/IMG-Inline_Center_FPO.jpg",
      "source": "youtube",
      "title": "Your future starts now.",
      "youtube_video_id": "LjOmcZkXVcU",
      "vimeo_video_id": ""
    }
  }
}
  • Content: 
    .link-video,
.link-video--reverse {
  display: inline-flex;
  appearance: none;
  margin: rem(10) 0;
  padding: 0;
  cursor: pointer;
  color: $iastate-maroon;
  font-family: $typeface-sans-serif;
  font-weight: 700;
  font-size: rem(18);
  line-height: (25 / 18);
  text-decoration: none;
  border: none;
  background: none;
  position: relative;
  transition: 0.2s text-decoration-color ease-in-out;

  .icon-video {
    padding-left: rem(40);
    position: relative;
    svg,
    svg path {
      fill: $iastate-maroon;
    }

    svg {
      position: absolute;
      left: rem(10);
      top: rem(4);
      transition: opacity 0.3s ease-out;

      &.icon-video--inactive {
        opacity: 1;
      }

      &.icon-video--active {
        opacity: 0;

        path {
          fill: $iastate-maroon;
        }
      }
    }
  }

  &:hover,
  &:focus-visible {
    // background-color: $iastate-maroon;
    color: $iastate-maroon;
    padding-right: rem(40);

    svg.icon-video--inactive {
      opacity: 0;
    }

    svg.icon-video--active {
      opacity: 1;
    }
  }

  &:has(.icon-video) {
    &:hover,
    &:focus-visible {
      padding-right: rem(20);
    }
  }
}

.link-video--reverse {
  color: $white;

  .icon-video {
    padding-left: rem(40);
    position: relative;
    svg,
    svg path {
      fill: $white;
    }

    svg.icon-video--active {
      fill: $white;

      path {
        fill: $white;
      }
    }
  }

  &:hover,
  &:focus-visible {
    color: $white;
  }
}
  • URL: /components/raw/link-video/_link-video.scss
  • Filesystem Path: src/components/link-video/_link-video.scss
  • Size: 1.5 KB

Link Tertiary

This is a custom component (no class prefix in place as it does not conflict with bootstrap)

  • For the arrow on the right side, the markup <span class="arrow"></span> is required after the button text
  • The custom styles are imported into the index.scss file as @import "../components/link-tertiary/link-tertiary";
  • Typically the button would be placed onto a page using the companion component link-set, which allows for multiple instances of the links to be output