England Football

Large Signpost Article: Default 

<a class="large-signpost-article " href="#">
    <img class="large-signpost-article__img" src="/assets/example-content/large-signpost-article.png" alt="">
    <div class="large-signpost-article--gradient"></div>
    <div class="large-signpost-article__overlay ">
        <h3 class="large-signpost-article__title">&#x27;Playing as a kid were the best times of my life&#x27;</h3>
        <div class="large-signpost-article__tag">
            <p>11 Oct 2020 <span>|</span> 5 min read</p>
        </div>
    </div>
</a>

No notes defined.

{
  "image": "/assets/example-content/large-signpost-article.png",
  "caption": "'Playing as a kid were the best times of my life'"
}
  • Content: 
    .large-signpost-article {
  position: relative;
  border-radius: 0.8rem;
  display: block;
  text-decoration: none;
  cursor: pointer;

  &__img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 480px;
    max-height: 480px;
    border-radius: 0.8rem;
  }

  &--gradient {
    background: linear-gradient(
      180deg,
      rgba(var(--brand-primary-rgb), 0) 52.02%,
      rgba(var(--brand-primary-rgb), 0.14) 71.6%,
      var(--brand-primary) 94.79%
    );
    bottom: 0;
    content: '';
    display: block;
    height: 100%;
    top: 0;
    width: 100%;
    position: absolute;
    border-radius: 0 0 0.8rem 0.8rem;
  }

  &.full-width {
    border-radius: 0;
    .large-signpost-article__img {
      border-radius: 0;
    }
    .large-signpost-article--gradient {
      border-radius: 0;
    }
  }

  &__title {
    @extend .heading-1;

    color: $white;
    letter-spacing: 0.02em;
    z-index: 2;
    width: 100%;
    position: inherit;
    padding: 0 30px 0 24px;
    bottom: 76px;
  }
  &__tag {
    position: inherit;
    bottom: 24px;
    z-index: 2;
  }
  &__tag p {
    @include text-s;

    color: $white;
    left: 0;
    right: 0;
    margin-left: 24px;
    text-align: left;

    span {
      margin: 0 8px 0 18px;
      &::after {
        content: '';
        background: url('./assets/images/clock-icon-white.svg') no-repeat center;
        height: 1.4rem;
        width: 1.4rem;
        position: relative;
        display: inline-block;
        top: 0.2rem;
        margin-left: 1.8rem;
      }
    }
  }

  &__overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    &::after {
      content: '';
      background: linear-gradient(
        180deg,
        rgba(34, 34, 34, 0) 38.98%,
        rgba(34, 34, 34, 0.315) 100%
      );
      width: 100%;
      height: 100%;
      display: block;
    }
    &.text-middle {
      justify-content: center;
      align-items: center;
      .large-signpost-article__title {
        width: 100%;
        padding: 0 27px;
        text-align: center;
        bottom: 0;
        position: initial;
        align-items: center;
      }
      .large-signpost-article__tag p {
        margin-left: 0;
        text-align: center;
      }
    }
    &.text-center {
      .large-signpost-article__title {
        margin: 0 auto;
        text-align: center;
        padding: 0 27px;
        width: 100%;
        left: 0;
        right: 0;
      }
      .large-signpost-article__tag {
        margin: 0 auto;
        text-align: center;
        left: 0;
        right: 0;
      }
      .large-signpost-article__tag p {
        margin-left: 0;
        text-align: center;
      }
    }
  }

  .large-signpost-article__overlay--middle {
    justify-content: center;
  }

  @media screen and (min-width: $mq-medium) {
    &__img {
      height: 100%;
    }
    &__title {
      padding-left: 48px;
      width: 960px;
      bottom: 92px;
      white-space: pre-wrap;
    }
    &__tag {
      width: 960px;
    }
    &__tag p {
      margin-left: 48px;
    }
    &__overlay {
      &.text-middle {
        .large-signpost-article__title {
          padding-left: 0;
          width: 960px;
          text-align: center;
          bottom: 0;
        }
      }
      &.text-center {
        .large-signpost-article__title {
          padding-left: 0;
          width: 960px;
        }
      }
    }
    &.full-width {
      .large-signpost-article__img {
        height: 520px;
        max-height: 520px;
      }
    }
  }
}

:root [data-brand='englandfootball'],
:root [data-brand='englandfootball--supplimentary'] {
  .large-signpost-article {
    &__tag p {
      font-family: $text-font-ef;
    }
  }
}

:root [data-brand=''] {
  .large-signpost-article {
    &--gradient {
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
      opacity: 0.8;
    }
    &__overlay {
      &::after {
        display: none;
      }
    }

    @media screen and (max-width: $mq-medium) {
      &--gradient {
        height: 22.6rem;
        top: initial;
        bottom: 0;
      }
    }
  }
}
  • URL: /components/raw/large-signpost-article/large-signpost-article.scss
  • Filesystem Path: src/library/components/large-signpost-article/large-signpost-article.scss
  • Size: 4.2 KB 
<a class="large-signpost-article {{extra-class}}" href="#">
    <img class="large-signpost-article__img" src="{{image}}" alt="">
    <div class="large-signpost-article--gradient"></div>
    <div class="large-signpost-article__overlay {{#if modifier}}{{modifier}}{{/if}}">
      <h3 class="large-signpost-article__title">{{caption}}</h3>
      <div class="large-signpost-article__tag">
        <p>11 Oct 2020 <span>|</span>  5 min read</p>
      </div>
    </div>
</a>