Component Library

Feature 

<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>
        <div class="link-set">
            <ul>
                <li>
                    <a href="https://iastate.edu" class="link-set__link iastate22-link-secondary">Link Lorem Ipsum Dolor<span class="arrow"></span></a>
                </li>
            </ul>
        </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 %}
    {% 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"
      }
    ]
  }
}
  • 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)});
    }
  }
}
  • 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";