Component Library

Hero: Event Details 

<div class="hero--event-detail text-content">
    <h1 class="hero--event-detail__headline">Event Title Lorem Ipsum Dolor Sit</h1>
    <div class="hero--event-detail__media">
        <img src="../../img/Article_Hero.jpg" alt="">
    </div>
</div>
 
<div class="hero--event-detail text-content">
    <h1 class="hero--event-detail__headline">{{ headline }}</h1>
    <div class="hero--event-detail__media">
      <img src="{{ image.src }}" alt="{{ image.alt }}">
    </div>
</div>
 
{
  "breadcrumbs": {
    "links": [
      {
        "url": "https://www.iastate.edu/",
        "name": "Home"
      },
      {
        "url": "https://www.iastate.edu/",
        "name": "Parent Page"
      },
      {
        "url": "https://www.iastate.edu/",
        "name": "Kitchen Sink"
      }
    ]
  },
  "title": "Kitchen Sink",
  "image": {
    "src": "../../img/Article_Hero.jpg",
    "alt": ""
  },
  "subnav": {
    "items": [
      {
        "url": "https://www.iastate.edu/",
        "title": "Parent Page",
        "current": false,
        "children": []
      },
      {
        "url": "https://www.iastate.edu/",
        "title": "Sibling Page Title Lorem Ipsum",
        "current": false,
        "children": []
      },
      {
        "url": "https://www.iastate.edu/",
        "title": "Sibling Page Title Lorem Ipsum",
        "current": false,
        "children": []
      },
      {
        "url": "https://www.iastate.edu/",
        "title": "Sibling Page Title Lorem Ipsum",
        "current": false,
        "children": []
      },
      {
        "url": "https://www.iastate.edu/",
        "title": "Kitchen Sink",
        "current": true,
        "children": [
          {
            "url": "https://www.iastate.edu/",
            "title": "Child Page Title Lorem",
            "current": false,
            "children": []
          },
          {
            "url": "https://www.iastate.edu/",
            "title": "Child Page Title Lorem",
            "current": false,
            "children": []
          }
        ]
      },
      {
        "url": "https://www.iastate.edu/",
        "title": "Sibling Page Title Lorem Ipsum",
        "current": false,
        "children": []
      }
    ]
  },
  "subnav_horizontal": {
    "items": [
      {
        "url": "https://www.iastate.edu/",
        "title": "Level 2 Page Lorem Ipsum"
      },
      {
        "url": "https://www.iastate.edu/",
        "title": "Level 2 Page Lorem"
      },
      {
        "url": "https://www.iastate.edu/",
        "title": "Level 2 Page Lorem Ipsum Dolor Sit Amet"
      },
      {
        "url": "https://www.iastate.edu/",
        "title": "Level 2 Page Lorem"
      },
      {
        "url": "https://www.iastate.edu/",
        "title": "Level 2 Page Lorem Ipsum Dolor"
      }
    ]
  },
  "headline": "Event Title Lorem Ipsum Dolor Sit"
}
  • Content: 
    .hero {
  margin-bottom: rem(126);
  position: relative;
  @include media-breakpoint-up(lg) {
    padding-top: rem(40);
  }
  @include media-breakpoint-up(xl) {
    margin-bottom: 0;
  }
  &.hero--top-level-lp {
    @include media-breakpoint-up(lg) {
      padding-top: rem(25);
      margin-bottom: rem(65);
      margin-right: rem(-110);
    }
  }
  &.hero--no-media,
  &.hero--top-level-lp--no-media {
    @include media-breakpoint-up(xl) {
      margin-bottom: rem(40);
    }
  }
}

.hero__title {
  margin: 0;
  font-size: rem(36);
  font-weight: 600;
  @include media-breakpoint-up(sm) {
    font-size: rem(50);
    font-weight: 400;
  }
  @include media-breakpoint-up(md) {
    font-size: rem(70);
    line-height: (93 / 70);
  }
  @include media-breakpoint-up(lg) {
    margin: rem(25) 0 rem(10) 0;
  }
}

.hero__text-wrap {
  margin-bottom: rem(10);
  @include media-breakpoint-up(xl) {
    margin-left: rem(-108);
  }
  .hero--top-level-lp & {
    margin-top: rem(24);
    margin-bottom: rem(20);
    @include media-breakpoint-up(lg) {
      margin-bottom: rem(10);
    }
  }
}

.hero__media {
  @extend %responsive-img;
  margin: 0 rem(-11) rem(30) rem(-36);

  @include media-breakpoint-up(md) {
    margin-left: rem(-70);
    margin-right: rem(130);
  }

  @include media-breakpoint-up(xl) {
    margin-left: rem(-190);
    margin-right: rem(-110);
  }
  .hero--top-level-lp & {
    margin-right: rem(-36);
    @include media-breakpoint-up(md) {
      margin-right: rem(-70);
    }
    @include media-breakpoint-up(xl) {
      margin-right: 0;
    }
  }
  &:before {
    padding-top: 37.4%;
  }
}

.hero__subnav-wrap {
  z-index: 2;
  max-width: rem(342);
  position: absolute;
  @include media-breakpoint-up(xl) {
    top: 0;
    right: rem(-70);
    left: initial;
    max-width: rem(278);
  }
  @include media-breakpoint-up(xl) {
    right: rem(-298);
  }

  // top level lp horizontal version
  .hero--top-level-lp & {
    @include media-breakpoint-up(lg) {
      top: initial;
      right: initial;
      left: 0;
      position: relative;
      margin-top: rem(-53);
      margin-bottom: rem(58);
      max-width: none;
    }
    @include media-breakpoint-up(xl) {
      right: initial;
      margin-right: rem(-109);
    }
  }
  .hero--top-level-lp--no-media & {
    margin-top: rem(30);
  }
}

.hero--news-article,
.hero--event-detail {
  position: relative;
  background-color: $white;
  padding-top: rem(50);
  @include media-breakpoint-up(md) {
    margin-inline: rem(-35);
  }
  @include media-breakpoint-up(lg) {
    padding-top: rem(70);
  }
  @include media-breakpoint-up(xl) {
    margin-inline: rem(-158) rem(-251);
  }
  @include media-breakpoint-up(xxl) {
    margin-inline: rem(-110) rem(-207);
  }
}

.hero--news-article__headline,
.hero--event-detail__headline {
  color: $iastate-red;
  .hero--news-article--cyclone-story &,
  .hero--event-detail--cyclone-story & {
    width: 75%;
  }
}

.hero--news-article__subhead {
  font-family: $typeface-sans-serif;
  font-weight: 700;
  color: $iastate-maroon;
  font-size: rem(21);
  line-height: (30 / 21);
  margin: 0;
  position: relative;
  &:after {
    content: "";
    position: absolute;
    bottom: rem(-25);
    width: rem(50);
    border-bottom: rem(2) solid $iastate-gold;
    left: 0;
  }
  .hero--news-article--cyclone-story &,
  .hero--event-detail--cyclone-story & {
    width: 75%;
  }
}

.hero--news-article__cyclone-stories-logo {
  position: absolute;
  right: 0;
  top: rem(60);
  @include media-breakpoint-up(lg) {
    top: rem(120);
  }
}

.hero--news-article__attribution {
  margin-top: rem(20);
}

.hero--news-article__media,
.hero--event-detail__media {
  margin-top: rem(40);
  @extend %responsive-img;

  &:before {
    padding-top: 56.27%;
  }
}
  • URL: /components/raw/hero/_hero.scss
  • Filesystem Path: src/components/hero/_hero.scss
  • Size: 3.8 KB

Hero

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

  • There are two variants, the default for the main site (which places the subnav in the top right on desktop), and the --top-level-lp variant for for top-level landing pages (contains a modified version of the subnav below the main image)
  • The image within the hero__media element will be inline img and is sized using the css object-fit property (a polyfill is included for older browsers)
  • The image field is optional
  • Contains two subcomponents: breadcrumb and subnav
  • The custom styles are imported into the index.scss file as @import "../components/hero/hero";
  • The hero component should be placed in the page in the following order relative to the <main> element:
    <div class="off-canvas">
        <div class="max-bound">
            {% include "@site-header" with header %}
                <main id="main-content">