England Football

Hero Section 

<div class="hero-section">
    <div class="hero-section__partner-logos">
        <img src="/assets/example-content/hero-partner-bt.png" alt="Nike" />
        <img src="/assets/example-content/hero-partner-deliveroo.png" alt="BT" />
    </div>
    <h3 class="hero-section__title">Eight England outsiders making a case for Gareth Southgate&#x27;s match against Iceland</h3>
    <div class="hero-section__description">Lorem ipsum dolor sit amet, consectetur</div>
</div>

No notes defined.

{
  "logos": [
    {
      "alt": "Nike",
      "logo": "/assets/example-content/hero-partner-bt.png"
    },
    {
      "alt": "BT",
      "logo": "/assets/example-content/hero-partner-deliveroo.png"
    }
  ],
  "title": "Eight England outsiders making a case for Gareth Southgate's match against Iceland",
  "description": "Lorem ipsum dolor sit amet, consectetur"
}
  • Content: 
    .hero-section {
  position: absolute;
  display: flex;
  flex-direction: column;
  bottom: 5.8rem;
  width: 100%;
  padding: 0 2.4rem;
  z-index: 11;
  font-style: normal;

  &__partner-logos {
    display: flex;
    justify-content: center;
    margin-bottom: 1.8rem;

    img {
      border-left: 0.08rem solid $grey;
      width: auto !important;
      max-height: 2.9rem !important;
      padding-left: 1.3rem;

      &:first-child {
        border-left: none;
        padding-right: 1.3rem;
      }
    }
  }

  &__title {
    font-family: var(--brand-text--font-family);
    font-weight: 700;
    font-size: 2.8rem;
    line-height: 3rem;
    text-align: center;
    letter-spacing: -0.01em;
    color: $white;
    margin-bottom: 1.2rem;
  }

  &__description {
    font-family: var(--brand-text--font-family);
    color: $white;
    font-weight: 400;
    font-size: 2rem;
    line-height: 2.2rem;
    text-align: center;
    letter-spacing: -0.02em;
    margin-bottom: 1.8rem;
  }

  &__count-down {
    font-family: var(--brand-text--font-family);
    font-size: 1.5rem;
    line-height: 1.6rem;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: $white;
    justify-content: center;
    margin-bottom: 1.8rem;

    span {
      padding-right: 0.5rem;
    }

    .days {
      padding-right: 1rem;
    }

    .hours {
      border-left: 0.2rem solid $white;
      padding: 0 1rem;
    }

    .minutes {
      border-left: 0.2rem solid $white;
      border-right: 0.2rem solid $white;
      padding: 0 1rem;
    }

    .seconds {
      padding-left: 1rem;
    }
  }

  &__cta {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--brand-text--font-family);
    margin: 0 auto;

    .cta {
      width: 23.4rem;
    }
  }

  @media screen and (min-width: $mq-medium) {
    bottom: 10.5rem;
    max-width: 82.3rem;
    padding: 0;

    &__title {
      font-size: 4.2rem;
      line-height: 4rem;
      margin-bottom: 1.8rem;
    }

    &__count-down {
      font-size: 2rem;
    }
  }
}
  • URL: /components/raw/hero-section/hero-section.scss
  • Filesystem Path: src/library/components/hero-section/hero-section.scss
  • Size: 2.2 KB 
<div class="hero-section">
  <div class="hero-section__partner-logos">
    {{#each logos}}
    <img src="{{logo}}" alt="{{alt}}" />
    {{/each}}
  </div>
  <h3 class="hero-section__title">{{title}}</h3>
  <div class="hero-section__description">{{description}}</div>
  {{#if countdown}}
  <div class="hero-section__count-down">
    <div class="days"><span>{{countdown.day}}</span>Days</div>
    <div class="hours"><span>{{countdown.hours}}</span>Hours</div>
    <div class="minutes"><span>{{countdown.minutes}}</span>Minutes</div>
    <div class="seconds"><span>{{countdown.seconds}}</span>Seconds</div>
  </div>
  {{/if}}
  {{#if cta}}
  <div class="hero-section__cta">
    {{render '@cta' cta merge=true }}
  </div>
  {{/if}}
</div>