Skip to main content

Promotional banner

A promotional section used for breaking up page content, featuring a headline and a call to action.

Important information:
This component requires documentation.

Default

<section class="promo-banner promo-banner--dark-theme">
  <div class="container">
    <div class="grid grid--gutterless">
      <div class="grid__col col-7@m">
        <div class="promo-banner__content">
          <h3><a href="#0">Get involved</a></h3>
          <p>There are lots of ways that you can get involved with Census 2021. Whether you are an individual, a group or organisation we would love to hear from you.</p>
          <p>By taking part and encouraging others to do the same, you’ll help make sure you and your community get the services you need.</p>
        </div>
      </div>
    </div>
  </div>
</section>

{% from "components/promotional-banner/_macro.njk" import onsPromoBanner %}
{% call
    onsPromoBanner({
        "darkTheme": true
    })
%}
<h3><a href="#0">Get involved</a></h3>
<p>There are lots of ways that you can get involved with Census 2021. Whether you are an individual, a group or organisation we would love to hear from you.</p>
<p>By taking part and encouraging others to do the same, you’ll help make sure you and your community get the services you need.</p>
{% endcall %}

{% macro onsPromoBanner(params) %}
    <section class="promo-banner{{ ' ' + 'promo-banner--dark-theme' if params.darkTheme }}{{ ' ' + 'promo-banner--has-image' if params.image }}">
        <div class="container">
            <div class="grid grid--gutterless">
            {% if params.image is defined %}
                <div class="grid__col col-7@s">
                    <div class="promo-banner__content">
                        {{ params.content | safe }}{{ caller() if caller }}
                    </div>
                </div>
                <div class="grid__col col-4@s push-1@s u-d-no@xxs@s">
                    <div class="promo-banner__image">
                        {% if params.image.smallSrc is defined and params.image.smallSrc %}
                            <img srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x" src="{{ params.image.smallSrc }}" alt="{{ params.image.alt }}">
                        {% else %}
                            <img src="{{ params.image.src }}" alt="{{ params.image.alt }}">
                        {% endif %}
                    </div>
                </div>
            {% else %}
                <div class="grid__col col-7@m">
                    <div class="promo-banner__content">
                        {{ params.content | safe }}{{ caller() if caller }}
                    </div>
                </div>
            {% endif %}
            </div>
        </div>
    </section>
{% endmacro %}

.promo-banner {
  background-color: $color-branded;
  background-image: linear-gradient(46deg, $color-branded-tertiary 0%, $color-branded 100%);
  overflow: hidden;
  padding-bottom: 5em;
  padding-top: 3em;
  position: relative;
  &::after {
    background-image: url(#{$static}/img/census-promo-banner.svg);
    background-position: 50% 0;
    background-repeat: no-repeat;
    bottom: 0;
    content: '';
    height: 244px;
    left: 50%;
    max-width: none;
    position: absolute;
    transform: translate(-50%, 50%);
    width: 100%;
  }
  &__content {
    position: relative;
    z-index: 1;
    :last-child {
      margin-bottom: 0;
    }
  }
  &__image {
    text-align: center;
    img {
      height: auto;
      width: 100%;
    }
  }
  &--dark-theme {
    h1,
    h2,
    h3,
    h4,
    h5,
    li,
    p,
    a {
      color: $color-white;
    }
    a {
      &:hover {
        text-decoration: underline solid $color-white 2px;
      }
    }
    h3 {
      a:hover {
        text-decoration: underline solid $color-white 3px;
      }
    }
  }
  &--has-image {
    padding-bottom: 3em;
    &::after {
      content: none;
    }
  }
}

Promotional banner with image

<section class="promo-banner promo-banner--dark-theme promo-banner--has-image">
  <div class="container">
    <div class="grid grid--gutterless">
      <div class="grid__col col-7@s">
        <div class="promo-banner__content">
          <h2 class="u-fs-xl">Why students should take part in the census</h2>
          <p>The census is a survey that happens every 10 years and gives us a picture of all the people and households in England and Wales.</p>
          <p>The information you give in the census makes sure your student community gets the services it needs. This includes things like university campus bus links and bike lanes, jobs and training.</p>
          <p>Your answers to the census will only be used for statistical purposes and personal census information cannot be used by government.</p>
          <p>Census Day is <strong>Sunday 21 March 2021</strong>.</p>
          <p><a href="#0">Find out more about census</a></p>
        </div>
      </div>
      <div class="grid__col col-4@s push-1@s u-d-no@xxs@s">
        <div class="promo-banner__image">
          <img src="/img/census-landscape.svg" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

{% from "components/promotional-banner/_macro.njk" import onsPromoBanner %}
{% call
    onsPromoBanner({
        "darkTheme": true,
        "image": {
            "src": '/img/census-landscape.svg'
        }
    })
%}
<h2 class="u-fs-xl">Why students should take part in the census</h2>
<p>The census is a survey that happens every 10 years and gives us a picture of all the people and households in England and Wales.</p>
<p>The information you give in the census makes sure your student community gets the services it needs. This includes things like university campus bus links and bike lanes, jobs and training.</p>
<p>Your answers to the census will only be used for statistical purposes and personal census information cannot be used by government.</p>
<p>Census Day is <strong>Sunday 21 March 2021</strong>.</p>
<p><a href="#0">Find out more about census</a></p>
{% endcall %}

{% macro onsPromoBanner(params) %}
    <section class="promo-banner{{ ' ' + 'promo-banner--dark-theme' if params.darkTheme }}{{ ' ' + 'promo-banner--has-image' if params.image }}">
        <div class="container">
            <div class="grid grid--gutterless">
            {% if params.image is defined %}
                <div class="grid__col col-7@s">
                    <div class="promo-banner__content">
                        {{ params.content | safe }}{{ caller() if caller }}
                    </div>
                </div>
                <div class="grid__col col-4@s push-1@s u-d-no@xxs@s">
                    <div class="promo-banner__image">
                        {% if params.image.smallSrc is defined and params.image.smallSrc %}
                            <img srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x" src="{{ params.image.smallSrc }}" alt="{{ params.image.alt }}">
                        {% else %}
                            <img src="{{ params.image.src }}" alt="{{ params.image.alt }}">
                        {% endif %}
                    </div>
                </div>
            {% else %}
                <div class="grid__col col-7@m">
                    <div class="promo-banner__content">
                        {{ params.content | safe }}{{ caller() if caller }}
                    </div>
                </div>
            {% endif %}
            </div>
        </div>
    </section>
{% endmacro %}

.promo-banner {
  background-color: $color-branded;
  background-image: linear-gradient(46deg, $color-branded-tertiary 0%, $color-branded 100%);
  overflow: hidden;
  padding-bottom: 5em;
  padding-top: 3em;
  position: relative;
  &::after {
    background-image: url(#{$static}/img/census-promo-banner.svg);
    background-position: 50% 0;
    background-repeat: no-repeat;
    bottom: 0;
    content: '';
    height: 244px;
    left: 50%;
    max-width: none;
    position: absolute;
    transform: translate(-50%, 50%);
    width: 100%;
  }
  &__content {
    position: relative;
    z-index: 1;
    :last-child {
      margin-bottom: 0;
    }
  }
  &__image {
    text-align: center;
    img {
      height: auto;
      width: 100%;
    }
  }
  &--dark-theme {
    h1,
    h2,
    h3,
    h4,
    h5,
    li,
    p,
    a {
      color: $color-white;
    }
    a {
      &:hover {
        text-decoration: underline solid $color-white 2px;
      }
    }
    h3 {
      a:hover {
        text-decoration: underline solid $color-white 3px;
      }
    }
  }
  &--has-image {
    padding-bottom: 3em;
    &::after {
      content: none;
    }
  }
}

Help improve this component

Let us know how we could improve this component or share your user research findings.

Discuss ‘Promotional banner’ component on GitHub