University of Leeds Design System v1.0.13

Global marketing banner

Guidance

The global marketing banner provides a means of communicating primary marketing messages e.g information on open days.

When to use

Use whenever a key marketing message is needed.

Developer guidance

Configuration parameters:

Name Type Required/Optional Description
title string Required heading for the marketing message
description string Required summary of the marketing message
link string Required includes link text and link href 
<div class="uol-global-marketing-banner">
  <h3 class="uol-global-marketing-banner__title">{{ title }}</h3>
  <p class="uol-global-marketing-banner__description">{{ description }} <a class="uol-global-marketing-banner__link" href="{{ link.href }}">{{ link.text }}</a></p>
</div>
 
<div class="uol-global-marketing-banner">
    <h3 class="uol-global-marketing-banner__title">Autumn Open Days – 10th September and 8th October</h3>
    <p class="uol-global-marketing-banner__description">Find out about our undergraduate courses and campus facilities and get a taste of student life. <a class="uol-global-marketing-banner__link" href="/open-days-register">Register your interest</a></p>
</div>
  • Content: 
    .uol-global-marketing-banner {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: $spacing-4;
  border-radius: 5px;
  background: $color-black;
  color: $color-white;

  @include media(">=uol-media-l") {
    padding: $spacing-4 $spacing-5;
  }

  &:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, .12);
  }

  &:focus-within,
  &:hover {
    .uol-global-marketing-banner__link {
      text-decoration: underline;
      text-decoration-color: $color-brand--bright
    }
  }
}

  .uol-global-marketing-banner__title {
    @extend .uol-typography-heading-6;

    margin: 0 0 $spacing-1 0;
  }

  .uol-global-marketing-banner__description {
    @extend .uol-typography-paragraph;

    margin: 0 0 $spacing-1 0;

    @include media(">=uol-media-m") {
      font-weight: $font-weight-medium--sans-serif;
    }

    @include media(">=uol-media-l") {
      margin: 0 0 0.0625rem 0;
    }
  }

  .uol-global-marketing-banner__link {
    @extend .uol-typography-paragraph;

    display: inline-block;
    font-weight: $font-weight-bold--sans-serif;
    text-decoration: none;
    margin: 0;

    svg {
      fill: $color-brand--bright;
    }

    &::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
  }
  • URL: /components/raw/uol-global-marketing-banner/_global-marketing-banner.scss
  • Filesystem Path: src/library/02-components/global-marketing-banner/_global-marketing-banner.scss
  • Size: 1.3 KB 
{
  "title": "Autumn Open Days – 10th September and 8th October",
  "description": "Find out about our undergraduate courses and campus facilities and get a taste of student life.",
  "link": {
    "text": "Register your interest",
    "href": "/open-days-register"
  }
}