College of Business Style Guide

Hero: Default 

<section class="hero " role="region">
    <div class="main-img">
        <img src="/images/hero.jpg" alt="" />
    </div>
    <p class="u-a11y-text">Break Out of the Box</p>
    <div class="caption ">Get the transformative education a dynamic world demands where business and technology meet.</div>
</section>
 
<section class="hero {{ caption_class }}" role="region">
    <div class="main-img">
        {% block cms_override %}
            <img src="{{ img_src }}" alt="" />
        {% endblock cms_override %}
    </div>
    {% if headline_text|remove_html_comments_as_string|trim %}
      <p class="u-a11y-text">{{ headline_text }}</p>
    {% endif  %}
    {% if caption|remove_html_comments_as_string|trim %}
        <div class="caption {{ caption_class }}">{{ caption }}</div>
    {% endif  %}
</section>
 
{
  "img_src": "/images/hero.jpg",
  "caption": "Get the transformative education a dynamic world demands where business and technology meet.",
  "caption_class": "",
  "headline_text": "Break Out of the Box"
}
  • Content: 
    .hero {
  position: relative;

  &.white {
    background-color: $grey_dark;

    .u-a11y-text {
      color: $white;
    }
  }

  .main-img {
    z-index: 1;

    img {
      @include img;
    }
  }

  .caption {
    position: absolute;
    bottom: $space-one-half;
    left: $space;
    font-size: 1rem;
    line-height: 1;
    color: $black;
    text-shadow: 3px 0 3px $drop_shadow;
    z-index: 3;

    @media only screen and (min-width: $break-desktop) {
      font-size: calc(1.1vw + 10px);
      line-height: 1.2;
      max-width: 70%;
      bottom: $space-quadruple;
      left: $space-quintuple;
    }

    @media only screen and (min-width: $break-tablet-land) {
      bottom: $space-quadruple;
      max-width: 70%;
    }

    &.white {
      color: $white;
      text-shadow: 3px 0 3px $grey_darkest;
    }
  }
}
  • URL: /components/raw/hero/hero.scss
  • Filesystem Path: components/03-sections/03-hero/hero.scss
  • Size: 825 Bytes

No notes defined.