Lehigh Clutch Style Guide

Hero for Homepage 

<section class="homepage_hero left ">

    <div class="hero_text">
        <h2>This is Page Heading</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
        <div class="hero-buttons">
            <a href="#" class="btn btn-primary dark-grey" role="button">
                <span class="button_text">Action Button</span>
                <span class="arrow fal fa-chevron-right"></span>
            </a>
        </div><!-- end hero-buttons -->
    </div><!-- end hero_text -->
    <div class="hero_img" style="background-image: url('/img/maxresdefault.jpg');">
        <div class="d-block d-lg-none">
            <img src="/img/maxresdefault.jpg" alt="" />
        </div>
    </div>
    <!-- end hero_img -->

</section>
 
{% set freeform = freeform|default(false) %}
{% set freeform_classes = freeform ? 'hero-freeform' : '' %}

<section class="homepage_hero {{ align_text }} {{ freeform_classes }}">

  <div class="hero_text">
    {% block headings %}
    <h2>{{ hero_heading }}</h2>
    {% endblock headings %}
    <p>{% block cms_override_text %}{{ hero_text }}{% endblock cms_override_text %}</p>
    <div class="hero-buttons">
    {% block hero_buttons %}
    {% for button in buttons %}
      {% include "@a_tag" with button only %}
    {% endfor %}
    {% endblock hero_buttons %}
    </div><!-- end hero-buttons -->
  </div><!-- end hero_text -->
  <div class="hero_img" style="background-image: url('{{ hero_img }}');">
    <div class="d-block d-lg-none">
      <img src="{{ hero_img }}" alt="{{ hero_img_alt }}"/>
    </div>
  </div>
<!-- end hero_img -->

</section>
 
{
  "hero_img": "/img/maxresdefault.jpg",
  "hero_heading": "This is Page Heading",
  "hero_text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.",
  "align_text": "left",
  "buttons": {
    "1": {
      "text": "Action Button",
      "url": "#",
      "color": "dark-grey"
    }
  }
}
  • Content: 
    .homepage_hero {
  display: flex;
  flex-direction: column;
  margin: 0 0 $spacer 0;

  @include media-breakpoint-up(lg) {
    flex-direction: row;
    flex-wrap: nowrap;
    max-height: 600px;
    overflow: hidden;
  }

  .hero_text {
    order: 2;
    background-color: $grey_lightest;
    width: 100%;
    max-width: 100%;
    padding: $spacer;
    z-index: 100;

    .color-scheme-dark & {
      background-color: $dark_mode_grey;
    }

    @include media-breakpoint-up(lg) {
      max-width: 50%;
      padding: $space_two;
    }

    h3 {
      font-size: 1.875rem;
    }

    .hero-buttons {
      margin: 0;
    }
  }

  .hero_img {
    order: 1;
    aspect-ratio: 13 / 10;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;

    @include media-breakpoint-down(md) {
      aspect-ratio: unset;
      background-image: none !important;
    }

    @include media-breakpoint-up(lg) {
      width: 50%;
    }

    img {
      max-width: 100%;
    }
  }

  &.left {
    .hero_text {
      border-top: 3px solid $accent_color;
      border-top: 3px solid var(--accent_color, $accent_color);

      @include media-breakpoint-up(lg) {
        order: 1;
        border-top: 0;
        border-right: 3px solid $accent_color;
        border-right: 3px solid var(--accent_color, $accent_color);
      }
    }

    .hero_img {
      @include media-breakpoint-up(lg) {
        order: 2;
      }
    }
  }

  &.right {
    .hero_text {
      border-top: 3px solid $accent_color;
      border-top: 3px solid var(--accent_color, $accent_color);

      @include media-breakpoint-up(lg) {
        order: 2;
        border-top: 0;
        border-left: 3px solid $accent_color;
        border-left: 3px solid var(--accent_color, $accent_color);
      }
    }

    .hero_img {
      @include media-breakpoint-up(lg) {
        order: 1;
      }
    }
  }

  &.hero-freeform {
    .hero_img {
      aspect-ratio: unset !important;
    }
    .hero_text {
      padding: 4rem 2rem;
    }
  }
}

.main-content {
  .homepage_hero {
    margin-top: $space_and_half;
    margin-bottom: $space_and_half;
  }
}
  • URL: /components/raw/hero_homepage_image/hero_homepage_image.scss
  • Filesystem Path: bits/04-components/heros/hero_homepage_image/hero_homepage_image.scss
  • Size: 2.1 KB

Display homepage hero where image is 50% of the width along with the content. On a mobile display it becomes a stacked component.