University of Leeds Design System v1.0.15

Hero Banner

Hero Banner guidance

A Hero banner is a singular banner which must contain a title and image and has an optional lead sentence.

When to use

Use on pages that are homepages or section pages.

Images are displayed at various sizes dependent on viewing device and orientation. Banner images should always have a 2:1 (width:height) aspect ratio. The required dimension for a banner image is 1200px x 600px. If smaller images are used, they will be stretched and will suffer from degradation in quality, so it is essential to use the correct size of image.

Parameters

  • ‘heading_level’ - Set the heading level accordingly defaults to h3 (Optional)
  • ‘title’ - title for the banner (Required)
  • ‘lead’ - description for the banner (Optional)
  • ‘src’ - relative path to image (Required)
  • ‘alt’ - descriptive text (Required)
<section class="uol-hero-banner"  aria-label="Hero banner">
  <div class="uol-hero-banner--inner">
    <div class="uol-hero-banner__text-container">
    <{{ banner.heading_level if banner.heading_level else 'h2' }} class="uol-hero-banner__title" aria-label="Hero banner">
      {{ banner.title }}
    </{{ banner.heading_level if banner.heading_level else 'h2' }}>
    {% if banner.lead %}
      <p class="uol-hero-banner__lead">{{ banner.lead }}</p>
    {% endif %}
    </div>
    {% if banner.img.src %}
      <img class="uol-hero-banner__img" src="{{ banner.img.src }}" alt="{{ banner.img.alt }}" loading="lazy">
    {% endif %}
  </div>

</section>
 
<section class="uol-hero-banner" aria-label="Hero banner">
    <div class="uol-hero-banner--inner">
        <div class="uol-hero-banner__text-container">
            <h1 class="uol-hero-banner__title" aria-label="Hero banner">
                Lorem Ipsum Dolor sit Amet Consectetural
            </h1>

        </div>

        <img class="uol-hero-banner__img" src="/placeholders/banner/banner-01.jpg" alt="University campus" loading="lazy">

    </div>

</section>
  • Content: 
    .uol-hero-banner {
  width: 100%;
  position: relative;
  // left: 50%;
  // right: 50%;
  // margin-left: -50vw;
  // margin-right: -50vw;
  background-color: $color-black;
}

.uol-hero-banner--inner {
  max-width: calc(103.75rem - 64px);
  margin: 0 auto;
  display: flex;
  height: auto;
  flex-direction: column-reverse;
	background: $color-black;
  color: $color-white;
	overflow: hidden;
  max-height: 592px;
  // background: navy;

  @include media(">=uol-media-l") {
    flex-direction: row;
    align-items: center;
    // padding-right: 100px;
  }

  @include media(">=uol-media-xl") {
    // padding-right: 130px;
  }
}

  .uol-hero-banner__text-container {
    padding: $spacing-5 $spacing-4 $spacing-6;

    @include media(">=uol-media-m") {
      padding: $spacing-6 $spacing-4 $spacing-7 $spacing-4;
    }

    @include media(">=uol-media-l") {
      // width: calc(38% - 64px);
      width: 38%;
      padding-left: $spacing-6;
      padding-right: $spacing-5;
    }

    @include media(">=uol-media-xxl") {
      padding-left: 0;
    }
  }

    .uol-hero-banner__title {
      @extend .uol-typography-heading-2;
      margin: 0;
    }

    .uol-hero-banner__lead {
      @extend .uol-typography-paragraph;
      margin: $spacing-2 0 0;
    }

  .uol-hero-banner__img {
    // width: calc(100% + #{$spacing-4} * 2);
    // margin: 0 -#{$spacing-4};
    // height: auto;
    // padding: 0 32px 0 0;
    @include media(">=uol-media-l") {
      width: 62%;
      padding: 40px 0 48px;
    }

    @include media(">=uol-media-xl") {
      padding: 0;
    }
  }
  • URL: /components/raw/uol-hero-banner/_banner-hero.scss
  • Filesystem Path: src/library/02-components/banner-hero/_banner-hero.scss
  • Size: 1.6 KB 
{
  "banner": {
    "heading_level": "h1",
    "title": "Lorem Ipsum Dolor sit Amet Consectetural",
    "img": {
      "src": "/placeholders/banner/banner-01.jpg",
      "alt": "University campus"
    }
  }
}