England Football

Article Session Card: Single News Card 

<a href="#" class="article-session-card article-session-card--single">
    <div class="article-session-card__image article-session-card__image--video">
        <img src="/assets/example-content/news-single.jpg" />
    </div>
    <div class="article-session-card__content">
        <div class="article-session-card__inner">
            <div class="article-session-card__content--category">featured</div>
            <div class="article-session-card__content--title">What is Passing in Football?</div>
            <p class="article-session-card__content--description">We explore what passing is, why it matters and how to help your team develop this essential skill.</p>
        </div>
        <div class="article-session-card__content--date-wrap">5 min read &nbsp;&nbsp;&#8211;&nbsp;&nbsp; Further Education / Higher Education</div>
    </div>
</a>

No notes defined.

{
  "title": "What is Passing in Football?",
  "category": "featured",
  "image": "/assets/example-content/news-single.jpg",
  "description": "We explore what passing is, why it matters and how to help your team develop this essential skill.",
  "date": "11 Oct 2020",
  "time": "5 min",
  "hasVideo": "true",
  "modifier": "single",
  "href": "/",
  "extraInfo": "Further Education / Higher Education"
}
  • Content: 
    @mixin text-limit($lines) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: #{$lines};
}

.article-session-card {
  width: 100%;
  margin-bottom: 0.8rem;
  text-decoration: none;
  transition: box-shadow 0.3s ease-in-out;
  border-radius: 0.8rem;

  &:focus {
    outline: 3px solid $blue-accent3;
  }

  &__image {
    overflow: hidden;
    background: url('./assets/images/new-card-placeholder-ef.jpg') no-repeat
      center;
    background-size: cover;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }

  &__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.2rem 1.5rem;
    background: $white;
    border: 0.1rem solid $grey-light;

    p {
      font-family: $text-font-ef;
      color: $color-interface-light;
      font-size: 1.6rem;
      font-style: normal;
      font-weight: 400;
      text-align: left;

      @include text-limit(3);
    }
    &--date-wrap {
      font-family: $text-font-ef;
      color: $color-interface-light;
      font-size: 1.2rem;
      line-height: 1.2rem;
      letter-spacing: -0.01em;

      @include text-limit(1);
    }
    &--category {
      font-family: var(--brand-text--font-family);
      font-size: 1.2rem;
      letter-spacing: 0.08em;
      color: $red;
      text-transform: uppercase;

      @include text-limit(1);
    }

    &--title {
      font-family: $text-font-ef;
      font-weight: 700;
      letter-spacing: 0.01em;
      color: $blue;

      @include text-limit(2);
    }

    hr {
      display: none;
    }
  }

  &:hover {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  }

  .article-session-card__image {
    object-fit: cover;
    object-position: center;
    position: relative;

    &--video::before {
      content: '';
      display: block;
      z-index: 2;
      background-color: $red;
      background-image: url('assets/images/video-play.svg');
      background-repeat: no-repeat;
      background-position: center;
    }
  }

  // For Single News Card
  &--single {
    border-radius: 0.8rem;
    .article-session-card__image {
      border-radius: 0.8rem 0.8rem 0 0;
      position: relative;
      height: 28.6rem;

      &--video::before {
        position: absolute;
        width: 5.2rem;
        height: 5.2rem;
        bottom: 0;
        left: 0;
        background-size: 1.95rem 2.275rem;
      }
    }

    .article-session-card__content {
      border-radius: 0 0 0.8rem 0.8rem;
      min-height: 15.8rem;
      &--title {
        font-family: $text-font-ef;
        font-size: 2rem;
        font-weight: 700;
        line-height: 2.4rem;
        letter-spacing: 0;
        margin-bottom: 0.3rem;
      }

      p {
        font-family: $text-font-ef;
        font-size: 1.6rem;
        line-height: 2.4rem;
        letter-spacing: 0;
      }

      &--category {
        margin-bottom: 0.3rem;
      }
    }
  }

  // For Horizontal News Card
  &--horizontal {
    display: flex;
    margin-bottom: 1.6rem;

    &:last-child {
      margin-bottom: 0;
    }

    .article-session-card__image {
      max-width: 12rem;
      max-height: 13rem;
      min-width: 12rem;
      border-radius: 0.8rem 0 0 0.8rem;

      &--video::before {
        border-bottom-left-radius: 0.8rem;
        background-size: 1.2rem 1.4rem;
        padding: 1.6rem;
        position: absolute;
        bottom: 0;
        left: 0;
      }
    }

    .article-session-card__content {
      padding: 1.5rem;
      border-radius: 0 0 0.8rem 0.8rem;
      width: 100%;

      &--title {
        font-size: 1.6rem;
        line-height: 2rem;
        min-height: 4rem;
        letter-spacing: 0.01em;
        margin-bottom: 0.8rem;
      }

      p {
        display: none !important;
      }

      &--category {
        margin-bottom: 0.2rem;
      }
    }
  }

  // For Vertical News Card
  &--vertical {
    display: flex;
    margin-bottom: 1.6rem;
    border-top-left-radius: 0.8rem;
    border-bottom-left-radius: 0.8rem;

    .article-session-card__image {
      border-radius: 0.8rem 0 0 0.8rem;
      max-width: 12rem;
      max-height: 13rem;
      min-width: 12rem;
      object-fit: cover;
      object-position: center;
      position: relative;

      &--video::before {
        border-bottom-left-radius: 0.8rem;
        background-size: 1.2rem 1.4rem;
        position: absolute;
        padding: 1.6rem;
        bottom: 0;
        left: 0;
      }

      img {
        object-fit: cover;
        object-position: center;
        width: auto;
        height: 100%;
      }

      &:focus {
        outline: 3px solid $blue-accent3;
      }
    }

    .article-session-card__content {
      padding: 1.5rem;
      border-radius: 0 0.8rem 0.8rem 0;
      width: 100%;

      &--title {
        font-size: 1.6rem;
        line-height: 2rem;
        min-height: 4rem;
        letter-spacing: 0.01em;
        margin-bottom: 0.8rem;
      }

      p {
        display: none;
      }

      &--category {
        margin-bottom: 0.2rem;
      }
    }
  }

  // Media Queries

  @media screen and (min-width: $mq-medium) {
    display: flex;
    max-width: 78.5rem;
    width: 100%;
    margin-bottom: 0;
    border-radius: 0.8rem;

    &__image {
      order: 2;

      img {
        transition: transform 0.5s ease-in-out;

        /* stylelint-disable no-descending-specificity */
        .article-session-card:hover & {
          transform: scale(1.1);
        }
      }

      .time {
        display: none;
      }
    }

    &__content {
      order: 1;
      width: 100%;
      max-width: 35.4rem;
      padding: 2.8rem 2.4rem;
      border-radius: 0.8rem 0 0 0.8rem;

      hr {
        margin: 1.4rem 0;
        background: $color-interface-light;
        opacity: 0.2;
        display: block;
      }
      &--date-wrap {
        margin-top: 0;
      }
    }

    // For Single News Card - Desktop Version
    &--single {
      min-height: unset;
      .article-session-card__image {
        border-radius: 0 0.8rem 0.8rem 0;
        height: 35.1rem;
        min-width: 39rem;

        &--video::before {
          bottom: 50%;
          left: 50%;
          height: 5.2rem;
          width: 5.2rem;
          margin: -2.6rem -2.6rem;
          border-radius: 0;
        }
      }
      .article-session-card__content {
        min-width: 39.5rem;
        border-radius: 0.8rem 0 0 0.8rem;
        padding-left: 4.8rem;
        padding-top: 6.8rem;
        padding-bottom: 3.5rem;
        padding-right: 3.6rem;

        &--title {
          font-size: 4.2rem;
          line-height: 4rem;
          margin-bottom: 0.8rem;

          @include text-limit(3);
        }

        &--category {
          margin-bottom: 0.8rem;
        }
      }
    }

    // For Horizontal News Card - Desktop Version
    &--horizontal {
      max-width: 27.4rem;
      padding-right: 0;
      display: block;

      &:last-child {
        padding-right: 0;
      }

      .article-session-card__image {
        width: 100%;
        border-radius: 0.8rem 0.8rem 0 0;
        max-width: 27.8rem;
        max-height: 27.4rem;
        height: 23.1rem;

        &--video::before {
          border-radius: 0;
          background-size: 1.95rem 2.275rem;
          padding: 2.6rem;
          position: absolute;
          bottom: 50%;
          left: 50%;
          margin: -2.6rem -2.6rem;
        }
      }

      .article-session-card__content {
        padding: 1.5rem 2.4rem 2.4rem 2.4rem;
        max-width: 27.4rem;
        border-radius: 0 0 0.8rem 0.8rem;
        height: 23.2rem;
        &--title {
          font-family: $text-font-ef;
          font-size: 2rem;
          line-height: 2.4rem;
          font-weight: 700;
          min-height: 0;
        }

        &--category {
          margin-bottom: 0.6rem;
        }

        p {
          display: -webkit-box !important;
          line-height: 2.4rem;
        }
      }
    }

    // For Vertical News Card - Desktop Version
    &--vertical {
      display: flex;
      max-width: 34.3rem;
      max-height: 10.6rem;
      margin-bottom: 1.6rem;
      padding-right: 0;
      margin-right: 0;

      &:last-child {
        margin-bottom: 0;
      }

      .article-session-card__image {
        order: unset;
        max-width: 13.6rem;
        min-width: 13.6rem;
        &--time {
          display: block;
        }
      }

      .article-session-card__content {
        padding: 1.5rem;
        border-radius: 0 0.8rem 0.8rem 0;
        min-width: 20.7rem;

        &--category {
          margin-bottom: 0.2rem;
        }

        &--title {
          margin-bottom: 0.8rem;
        }

        hr {
          display: none;
        }
      }
    }
  }
}
  • URL: /components/raw/article-session-card/article-session-card.scss
  • Filesystem Path: src/library/components/article-session-card/article-session-card.scss
  • Size: 8.8 KB 
<a href="#" class="article-session-card {{#if modifier}}article-session-card--{{modifier}}{{/if}}" {{#if ajaxFilter}}data-filter='{{taxonomies}}'{{/if}} >
    <div class="article-session-card__image {{#if hasVideo}}article-session-card__image--video{{/if}}">
        <img src="{{image}}"/>
    </div>
    <div class="article-session-card__content">
        <div class="article-session-card__inner">
            <div class="article-session-card__content--category">{{category}}</div>
            <div class="article-session-card__content--title">{{title}}</div>
            {{#unless ongoingLearning}}<p class="article-session-card__content--description">{{description}}</p>{{/unless}}
        </div>
        {{#unless ongoingLearning}}<div class="article-session-card__content--date-wrap">{{time}} read &nbsp;&nbsp;&#8211;&nbsp;&nbsp; {{#if extraInfo}}{{extraInfo}}{{else}}{{date}}{{/if}}</div>{{/unless}}
    </div>
</a>