College of Business Style Guide

Infographic with SVG 

<section class="infographic" role="region" aria-label="info graphic">
    <div class="infographic-left">
        <h2>New Core Curriculum for Career Success</h2>
        <p>Starting in Fall 2019, Lehigh Business will place stronger emphasis on the skills employers covet most with three new multi-course sequences on analytics/programming, communications and leadership.</p>
    </div>
    <div class="infographic-right">
        <img src="/images/infographic.svg" alt="" />
    </div>
</section>
 
<section class="infographic" role="region" aria-label="info graphic">
    <div class="infographic-left">
        <h2>{{ infographic_header }}</h2>
        <p>{{ infographic_content }}</p>
    </div>
    <div class="infographic-right">
        {% block cms_override %}
            <img src="{{ infographic }}" alt="{{ infographic_alt }}" />
        {% endblock cms_override %}
    </div>
</section>
 
{
  "infographic_header": "New Core Curriculum for Career Success",
  "infographic_content": "Starting in Fall 2019, Lehigh Business will place stronger emphasis on the skills employers covet most with three new multi-course sequences on analytics/programming, communications and leadership.",
  "infographic": "/images/infographic.svg",
  "infographic_mobile": "/images/infographic-mobile.svg"
}
  • Content: 
    .infographic {
  background-color: $white;
  color: inherit;
  padding: $space-triple 0 $space-triple $space-triple;

  @media only screen and (min-width: $break-desktop) {
    padding: $space-quadruple 0 $space-quadruple $space-quadruple;
    position: relative;
    height: 500px;
    overflow: hidden;
    color: $grey_darkest;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;

    &::before {
      content: '';
      color: $grey_dark;
      position: absolute;
      left: 0;
      top: 0;
      width: 0;
      height: 0;
      border-bottom: 85vw solid $grey_dark;
      border-left: 65vw solid transparent;
      border-right: 140vh solid;
    }
  }

  @media only screen and (min-width: $break-tablet-land) {
    &::before {
      border-bottom: 55vw solid $grey_dark;
      border-left: 55vw solid transparent;
      border-right: 140vh solid;
    }
  }

  @media only screen and (min-width: $break-desktop-large) {
    &::before {
      border-bottom: 30vw solid $grey_dark;
      border-left: 40vw solid transparent;
      border-right: 140vh solid;
    }
  }

  &-left {
    @media only screen and (min-width: $break-desktop) {
      position: relative;
      width: 400px;
    }
  }

  &-right {
    color: $white;
    background-color: $grey_dark;
    overflow: hidden;

    @media only screen and (min-width: $break-desktop) {
      position: relative;
      background-color: unset;
    }
  }

  img {
    position: relative;
    right: -$space-quadruple;
    margin: $space-double 0 0 0;

    @media only screen and (min-width: $break-tablet) {
      right: -$space-nonagon;
    }

    @media only screen and (min-width: $break-desktop) {
      right: -$space-decagon;
      margin: 0;
    }
  }
}
  • URL: /components/raw/infographic_svg/infographic_svg.scss
  • Filesystem Path: components/03-sections/10-infographic_svg/infographic_svg.scss
  • Size: 1.8 KB

No notes defined.