Component Library

Feature: Video 

<div class="iastate22-callout">
    <div class="iastate22-callout__media">
        <img src="../../img/Component-Featured-Image-Small_FPO.jpg" alt="" width="622" height="414" loading="lazy">
    </div>
    <div class="iastate22-callout__content text-content">
        <h3>Feature Title Lorem Ipsum Dolor</h3>
        <div>
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <button class="iastate22-button iastate22-button--clear" data-micromodal-trigger=Video-Modal-FS-3>
      Link Lorem Ipsum Dolor
      <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-FS-3" 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-FS-3-content" role="dialog" aria-modal="true" aria-labelledby="Video-Modal-FS-3-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-FS-3-title">Video Modal</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
 
<div class="iastate22-callout{% if image %}{% else %} iastate22-callout--no-image{% endif %}">
  {% if image %}
  <div class="iastate22-callout__media">
    <img src="{{ image|path }}" alt="" width="622" height="414" loading="lazy" >
  </div>
  {% endif %}
  <div class="iastate22-callout__content text-content">
    <h3>{{title}}</h3>
    {% if body_copy %}<div>{{body_copy|raw}}</div>{% endif %}
    {% if button %}
      {# {% include "@button--clear-video" with button %} #}
      <button class="iastate22-button iastate22-button--clear" data-micromodal-trigger={{ button.modal.id }}>
      {{button.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 button.modal %}
    {% endif %}
    {# Needs to be link set #}
      {# {% include "@link-set" with link_set %}  #}
  </div>
</div>
 
{
  "image": "../../img/Component-Featured-Image-Small_FPO.jpg",
  "title": "Feature Title Lorem Ipsum Dolor",
  "body_copy": "<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>",
  "link_set": {
    "links": [
      {
        "url": "https://iastate.edu",
        "text": "Link Lorem Ipsum Dolor",
        "variant": "iastate22-link-secondary"
      }
    ]
  },
  "button": {
    "text": "Link Lorem Ipsum Dolor",
    "modal": {
      "id": "Video-Modal-FS-1",
      "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: 
    .iastate22-callout {
  // @include media-breakpoint-up(md) {
  //   align-items: flex-start;
  // }
  @include media-breakpoint-up(lg) {
    display: flex;
    align-items: center;
  }
  &.iastate22-callout--no-image {
    @include media-breakpoint-up(md) {
      display: block;
    }
  }
}

.iastate22-callout__media {
  @extend %responsive-img;
  margin-bottom: rem(17);
  &:before {
    padding-top: 57.31%;
  }
  @include media-breakpoint-up(md) {
    flex: 1 1 0px;
  }
  @include media-breakpoint-up(lg) {
    flex: 0 1 auto;
    width: 60%;
  }
}

.iastate22-callout__content {
  @include media-breakpoint-up(md) {
    flex: 1 1 0px;
    padding-left: rem(45);
  }
  @include media-breakpoint-up(lg) {
    padding-left: rem(90);
    flex: 0 1 auto;
    width: 60%;
  }
  .iastate22-button {
    margin-top: rem(22);
  }
  p {
    margin-top: rem(20);
  }
  .iastate22-callout--no-image & {
    background-color: $white;
    box-shadow: rem(9) rem(9) rem(20) rgba($black, 0.2);
    width: 100%;
    position: relative;
    padding: rem(25) rem(54) rem(30);
    @include media-breakpoint-up(xl) {
      width: calc(100% + #{rem(112)});
    }
  }
}

.iastate22-callout__content .iastate22-button {
  margin-left: rem(-20);
}
  • URL: /components/raw/feature/_feature.scss
  • Filesystem Path: src/components/feature/_feature.scss
  • Size: 1.2 KB

Feature

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

  • There is a companion component associated, called feature-set which outputs multiple instances with a background color included
  • The image is optional, if none is added an additional class of .iastate22-callout--no-image is added to stretch the content to be full-width
  • The component allows for multiple links to be added
  • The custom styles are imported into the index.scss file as @import "../components/feature/feature";