Efl Card: Horizontal News Card

Ready

HTML
Notes
Context
Assets
View
Info


        
        <a href="#" class="efl-card efl-card--horizontal completed" id="video-dialog-label" data-behavior="get-started-lightbox" data-video-id="ufLSGCZEPrg" data-video-type="youtube" aria-label="Five interviews you may have missed in 2021">
    <div class="efl-card__image efl-card__image--video">

        <img src="/assets/example-content/news-vertical-1.jpg" />
    </div>
    <div class="efl-card__content ">
        <div class="efl-card__inner">
            <div class="efl-card__content--category">CAT TITLE</div>
            <div class="efl-card__content--title">Five interviews you may have missed in 2021</div>
            <p class="efl-card__content--description">Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance</p>
        </div>

    </div>
</a>

No notes defined.


        
            
            {
  "title": "Five interviews you may have missed in 2021",
  "category": "CAT TITLE",
  "image": "/assets/example-content/news-vertical-1.jpg",
  "description": "Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance",
  "date": "11 Oct 2020",
  "time": "5 min",
  "hasVideo": true,
  "modifier": "horizontal",
  "href": "/",
  "find-out-more-cta": {
    "href": "#",
    "copy": "Find Out More",
    "modifier": "tertiary",
    "id": "find-out-more-button",
    "name": "find out more",
    "disabled": true
  },
  "getstartedcta": "BECOME AN EE PLAYMAKER",
  "isCompleted": true
}

File:

Content:


                                .efl-card {
  width: 100%;
  text-decoration: none;
  padding-bottom: 1.6rem;
  border-bottom: 0.1rem solid $grey-light;

  &:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }

  /* stylelint-disable no-descending-specificity */
  &.efl-card:hover {
    .efl-card__image {
      box-shadow: none;
      img {
        transform: scale(1.1);
      }
    }
  }

  &__image {
    transition: box-shadow 0.3s ease-in-out;
    background: url(./assets/images/new-card-placeholder-ef.jpg) no-repeat
      center;
    background-size: cover;
    overflow: hidden;
  }

  &__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.2rem 0;
    background: $white;

    p {
      font-family: $text-font-ef;
      color: $color-interface-light;
      font-size: 1.6rem;
      line-height: 2.4rem;
      font-style: normal;
      font-weight: 400;
      text-align: left;
    }
    &--date-wrap {
      display: none;
      font-family: $text-font-ef;
      color: $color-interface-light;
      font-size: 1.2rem;
      line-height: 1.2rem;
      letter-spacing: -0.01em;
      margin-top: 1.2rem;
      align-items: center;
      gap: 2rem;
      // @include text-limit(1);
      .time {
        display: flex;
        align-items: center;
        &::before {
          content: '';
          background: url('./assets/images/clock-icon.svg') no-repeat center;
          background-size: cover;
          width: 1.4rem;
          height: 1.6rem;
          position: relative;
          top: 0.2rem;
          margin-bottom: 0.5rem;
          margin-right: 0.8rem;
        }
      }

      .date {
        display: flex;
        align-items: center;
        &::before {
          display: flex;
          align-content: center;
          content: '';
          background: url('./assets/images/calendar.svg') no-repeat center;
          background-size: cover;
          width: 1.4rem;
          height: 1.6rem;
          position: relative;
          top: 0.2rem;
          margin-bottom: 0.5rem;
          margin-right: 0.8rem;
        }
      }
    }
    &--category {
      font-family: var(--brand-text--font-family);
      font-size: 1.2rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: $red;

      .cpd {
        text-transform: none;
      }

      @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;
    }

    .get-started-cta {
      &::after {
        content: '';
        position: relative;
        top: -0.1rem;
        background: url('./assets/images/redirect-icon.svg') no-repeat center;
        background-size: cover;
        width: 1.4rem;
        height: 1.6rem;
        margin-left: 0.6rem;
      }
    }
  }

  .efl-card__image {
    object-fit: cover;
    object-position: center;
    position: relative;
    border-radius: 0.4rem;

    &--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;
    }

    &--video.featured::before {
      bottom: unset;
      left: unset;
      top: 0;
      right: 0;
    }

    &--blue {
      position: absolute;
      text-transform: uppercase;
      color: $white;
      display: block;
      z-index: 2;
      background-color: $blue-accent3;
      bottom: 0;
      right: 0;
      padding: 0.8rem 1.6rem;

      @extend .efl-category-title;

      font-weight: 400;
    }

    &--red {
      white-space: nowrap;
      position: absolute;
      text-transform: uppercase;
      color: $white;
      display: block;
      z-index: 2;
      background-color: $red;
      bottom: 0;
      right: 0;
      padding: 0.8rem 1.6rem;
      font-family: $text-font-ef;
      font-size: 1.6rem;
      line-height: 1.6rem;
    }

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

  &--single.article {
    border-bottom: none;
    .efl-card__content--date-wrap {
      display: flex !important;
      padding-top: 1.6rem;
      border-top: 0.1rem solid $grey-light;
    }
  }

  &--1--full-width {
    display: block;
    grid-template-rows: 1fr 1fr;
    grid-column: span 1;
    background-color: $blue-accent3;
    transition: box-shadow 0.3s ease-in-out;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 4rem;
    color: $white;
    width: 100%;
    .efl-card__content {
      background-color: $blue-accent3;
      color: $white;
      max-width: unset;
      border: none;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: flex-end;
      padding-left: 3.2rem;
      padding-right: 3.2rem;
      padding-bottom: 4.5rem;
      padding-top: 0;
      height: 100%;

      .efl-card__inner {
        display: flex;
        flex-direction: column;
        gap: 2.4rem;
      }

      .cta#find-out-more-button {
        max-width: none;
      }

      &--category {
        display: none;
      }

      &--title {
        font-family: $ef-font;
        color: white;
        font-size: 4.2rem;
        line-height: 4rem;
        font-weight: 700;

        @include text-limit(3);
      }

      p {
        @extend .efl-p-large;

        margin-bottom: 2.4rem;
        color: white;
      }
    }

    .efl-card__image {
      height: 39rem;
      width: auto;
      position: relative;
      border-radius: 0 0.4rem 0.4rem 0;
      img {
        width: 100%;
        height: 100%;
        transition: transform 0.3s ease-in-out;
      }
      &::after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        bottom: -1px;
        left: 0;
        z-index: 2;
        background-image: url('./assets/images/efl-card-full-width-efl-blue-crop.svg');
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 100% auto;
      }
    }
  }

  &--1--full-width.article {
    position: relative;
    min-height: 52.4rem;
    display: flex;
    align-items: end;
    .efl-card__content {
      position: relative;
      z-index: 3;
      background: transparent;
      padding-bottom: 2.4rem;

      &--date-wrap {
        display: flex;
        color: $white;
        padding-top: 1.6rem;
        border-top: 0.1rem solid $blue-accent;
        margin-top: 1rem;
        .date::before {
          background: url('./assets/images/calendar-white.svg') no-repeat center;
        }
        .time::before {
          background: url('./assets/images/clock-icon-white.svg') no-repeat
            center;
        }
      }
      &--category {
        display: block;
        color: $light-blue;
      }

      &--title {
        font-style: normal;
        font-size: 2.8rem;
        line-height: 3rem;

        @include text-limit(1);
      }

      &--description {
        font-size: 1.6rem;
        line-height: 2.4rem;
        margin-bottom: 0;

        @include text-limit(3);
      }
    }

    .efl-card__inner {
      gap: 0.8rem;
    }

    .cta#find-out-more-button {
      display: none;
    }

    .efl-card__image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 0.4rem;
      &::after {
        background: linear-gradient(
          180deg,
          rgba(0, 79, 159, 0) 0%,
          #004f9f 100%
        );
      }
    }
  }

  &:hover {
    .efl-card__content {
      &--title {
        text-decoration: underline;
      }

      &--description {
        text-decoration: underline;
      }
    }
  }

  &.completed {
    .efl-card__image {
      img {
        filter: grayscale(100%);
      }
      &::before {
        content: '\2713  Completed';
        position: absolute;
        text-transform: uppercase;
        color: $white;
        display: block;
        z-index: 2;
        background-color: $blue-accent3;
        background-image: url;
        bottom: 0;
        right: 0;
        padding: 0.8rem 1.6rem;
        font-size: 1.2rem;
        line-height: 1.2rem;

        @extend .efl-category-title;
      }

      &::after {
        content: '';
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #004f9f;
        mix-blend-mode: soft-light;
        z-index: 1;
      }
    }
  }

  // For Horizontal/Horizonal News Card
  &--single,
  &--horizontal {
    display: grid;
    grid-template-rows: 28.6rem auto;
    .efl-card__image {
      position: relative;
      img {
        object-fit: cover;
      }

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

    .efl-card__content {
      border-radius: 0 0 0.4rem 0.4rem;
      min-height: 16rem;
      padding-top: 2.4rem;

      &.cpd {
        .efl-card__content--description {
          display: -webkit-box;
        }
      }

      &--title {
        font-family: $text-font-ef;
        font-size: 2.8rem;
        font-weight: 700;
        line-height: 3rem;
        letter-spacing: 0;
        margin-bottom: 0.8rem;
      }

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

        @include text-limit(3);
      }
    }
  }

  // For Vertical News Card (Article/Session)
  &--vertical.article {
    padding-bottom: 1.6rem;
    border-bottom: 0.1rem solid $grey-light;

    &:last-child {
      border-bottom: 0;
    }
    .efl-card {
      &__content {
        border-bottom: none;
        &--description {
          display: none;
        }
        &--date-wrap {
          display: flex !important;
          margin-top: 0.8rem;
        }
        &--title {
          @include text-limit(3);
        }
      }
    }
  }

  // For Vertical News Card
  &--vertical {
    display: grid;
    grid-template-columns: 10.9rem auto;

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

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

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

    .efl-card__inner {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .efl-card__content {
      padding: 0 1.5rem;
      border-radius: 0 0.4rem 0.4rem 0;
      width: 100%;

      &--title {
        font-size: 2rem;
        line-height: 2.4rem;
        letter-spacing: 0.01em;
        margin-bottom: 0.2rem;
      }

      p {
        @include text-limit(3);
      }
    }
  }

  // Get Started Cards
  &--get-started-article,
  &--get-started-session,
  &--get-started-podcast,
  &--get-started-youtube,
  &--get-started-community {
    display: grid !important;
    grid-template-rows: 31.1rem auto;
    padding-bottom: 0 !important;
    .efl-card__content {
      padding: 1.6rem 0 0 0;
      border-bottom: 0;
      background: transparent;
      &--category {
        margin-bottom: 0.8rem;
      }

      &--title {
        font-family: $text-font-ef;
        font-size: 2.8rem;
        font-weight: 700;
        line-height: 3rem;
        letter-spacing: 0;
        margin-bottom: 0.8rem;

        @include text-limit(1);
      }

      &--description {
        letter-spacing: -0.01em;

        @include text-limit(3);
      }
    }
  }

  // Media Queries

  @media screen and (min-width: $mq-medium) {
    display: flex;
    width: 100%;
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 1rem;

    &:last-child {
      padding-bottom: 1rem;
      border-bottom: unset;
    }

    &__image {
      order: 2;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform 0.5s ease-in-out;
      }

      .time {
        display: none;
      }

      &--red,
      &--blue {
        padding: 1rem 2.4rem;
      }
    }

    .efl-card__image--video.featured::before {
      bottom: 0;
      left: 0;
      top: unset;
      right: unset;
    }

    &__content {
      order: 1;
      width: 100%;
      max-width: 35.4rem;
      padding: 2.8rem 0;
      border-bottom: 0.1rem solid $grey-light;

      &.cpd {
        .efl-card__content--description {
          display: -webkit-box;
          -webkit-line-clamp: 3 !important;
        }
      }

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

    &--1--full-width {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 37.4rem;
      width: 100%;
      margin: 0 auto;

      &.efl-card {
        padding-bottom: 0;
        border-radius: 0.4rem;
      }
      .efl-card__content {
        border-radius: 0.4rem 0 0 0.4rem;
        max-width: unset;
        border: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        padding: 0 0 0 3.2rem;

        p {
          font-size: 1.6rem !important;
          line-height: 2.4rem !important;
        }

        .efl-card__inner {
          display: flex;
          flex-direction: column;
          gap: 2.4rem;
          max-width: 38.4rem;
        }

        .cta#find-out-more-button {
          min-width: 27.8rem;
          margin-right: 10.3rem;
        }

        &--title {
          font: $efl-heading-3;
          letter-spacing: -0.01em;
        }

        &--category {
          display: none;
        }
      }

      .efl-card__image {
        position: relative;
        height: 100%;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        &::after {
          content: '';
          display: block;
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          bottom: unset;
          z-index: 2;
          background-image: url('./assets/images/efl-card-full-width-efl-blue.svg');
          background-repeat: no-repeat;
          background-size: auto 100%;
          background-position: center left;
        }
      }
    }

    &--1--full-width.article {
      border-radius: 0.4rem;
      .efl-card__inner {
        display: grid;
        // grid-template-columns: 1fr 1fr 1fr;
        column-gap: 3.2rem;
        row-gap: 0;
        padding: 0 4.8rem;
        max-width: unset;
        grid-template-areas:
          'col-1-1 col-1-2 col-1-2'
          'col-1-1 col-2-2 col-2-2';
        width: 100%;
      }

      .efl-card__image::after {
        background: linear-gradient(
          180deg,
          rgba(0, 79, 159, 0) 0%,
          #004f9f 60%
        );
        height: 29.6rem;
        bottom: 0;
        top: unset;
      }

      .efl-card__content {
        padding: 0 0 3.2rem 0;
        &--title {
          font-size: 2.8rem;
          line-height: 3rem;
          margin-bottom: 1.6rem;
          // grid-column: 1;
          // grid-row: 3;
          grid-area: col-1-1;
          margin-top: 14px;
          position: relative;
          top: -14px;

          @include text-limit(2);
        }

        &--category {
          // grid-column: 1;
          // grid-row: 2;
          grid-area: col-1-1;
          margin-top: -20px;
        }

        &--description {
          margin-top: auto;
          // grid-column: 2 / span 2;
          // grid-row: 2;
          grid-area: col-1-2;
        }

        &--date-wrap {
          display: flex;
          // grid-column: 2 / span 2;
          // grid-row: 3;
          grid-area: col-2-2;
          padding-bottom: 1.6rem;
          margin-bottom: 0.8rem;
        }
      }
    }

    // For Single News Card - Desktop Version
    &--single {
      flex-direction: column-reverse;
      grid-column: span 6;
      column-gap: 3.2rem;
      min-height: unset;
      .efl-card__image {
        max-height: 40.7rem;
        img {
          height: 100%;
          width: 100%;
          object-fit: cover;
        }

        &--video::before {
          bottom: 0;
          left: 0;
          height: 5.2rem;
          width: 5.2rem;
          border-radius: 0;
        }
      }
      .efl-card__content {
        min-width: 39.5rem;
        max-width: unset;
        padding-top: 2.4rem;
        border-bottom: none;

        &--title {
          font-size: 2.8rem;
          line-height: 3rem;
          margin-bottom: 0.8rem;
          grid-column: 1;
          grid-row: 2 / span 2;
        }

        &--category {
          grid-column: 1;
          grid-row: 1;
        }

        &--description {
          grid-column: 2 / span 2;
          grid-row: 2;
        }

        &--date-wrap {
          display: flex;
          margin-top: 1.6rem;
          grid-column: 2 / span 2;
          grid-row: 3;
        }
      }

      .efl-card__inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 3.2rem;
      }
    }

    &--single.article {
      border-bottom: none;
    }

    // For Horizontal/Vertical News Card - Desktop Version
    &--horizontal,
    &--vertical {
      padding-right: 0;
      display: grid;
      grid-template-columns: none;
      grid-template-rows: 22.6rem auto;
      grid-column: span 2;

      &:last-child {
        padding-right: 0;
        margin-bottom: unset;
      }

      .efl-card__image {
        order: 1;
        width: auto;
        height: 100%;
        max-width: unset;
        flex-shrink: 0;
        img {
          width: 100%;
          max-width: unset;
          height: 100%;
        }

        &--video::before {
          border-radius: 0;
          padding: 2.6rem;
          background-size: 1.95rem 2.275rem;
        }
      }

      .efl-card__content {
        min-height: 16rem;
        flex-shrink: 0;
        padding: 2.4rem 0 2.3rem 0;
        max-width: unset;
        border-radius: 0;
        height: unset;
        &--title {
          font-family: $text-font-ef;
          font-size: 2.8rem;
          line-height: 3rem;
          font-weight: 700;
        }

        p {
          line-height: 2.4rem;

          @include text-limit(4);
        }
      }
      .efl-card__inner {
        row-gap: 0.8rem;
        justify-content: start;
      }
    }

    &--get-started-article,
    &--get-started-session {
      grid-template-columns: 19.9rem auto;
      grid-template-rows: 19.9rem;
      grid-column-gap: 2.4rem;
      .efl-card__content {
        order: 2;
      }
    }

    &--get-started-podcast,
    &--get-started-youtube {
      grid-template-rows: 30.9rem auto;
      .efl-card__content {
        max-width: 50rem;
        order: 2;
      }
    }

    &--get-started-community {
      .efl-card__content {
        order: 2;
        max-width: unset;
        p {
          font-size: 1.8rem;
          letter-spacing: 0.02em;
        }
      }
    }
  }

  @media screen and (min-width: $mq-medium) and (max-width: 1024px) {
    &--horizontal,
    &--vertical {
      grid-column: span 3;
    }
  }

  @media screen and (max-width: 819px) {
    &--horizontal,
    &--vertical {
      .efl-card__content--date-wrap .time::before {
        width: 0.9rem;
        height: 1rem;
      }
      .efl-card__content--date-wrap .date::before {
        width: 0.9rem;
        height: 1rem;
      }
    }
  }
}

.efl-card-list--1 {
  .efl-card-list__inner--1 {
    .efl-card--vertical {
      @media screen and (min-width: $mq-medium) {
        display: flex;
        width: 100%;
        flex-direction: column;
        column-gap: 3.2rem;
        min-height: unset;
        .efl-card__image {
          max-height: 40.7rem;
        }
        .efl-card__content {
          min-width: 39.5rem;
          max-width: unset;
          padding-top: 2.4rem;
          border-bottom: none;

          &--title {
            font-size: 2.8rem;
            line-height: 3rem;
            margin-bottom: 0.8rem;
            grid-column: 1;
            grid-row: 2 / span 2;
          }

          &--category {
            grid-column: 1;
            grid-row: 1;
          }

          &--description {
            grid-column: 2 / span 2;
            grid-row: 2;
            border-bottom: 0.1rem solid $grey-light;
            padding-bottom: 1.6rem;
          }

          &--date-wrap {
            display: none;
            margin-top: 1.6rem;
            grid-column: 2 / span 2;
            grid-row: 3;
          }
        }
        .efl-card__inner {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          column-gap: 3.2rem;
        }
      }
    }
  }
}

URL: /components/raw/efl-card/efl-card.scss
Filesystem Path: src/library/components/efl-card/efl-card.scss
Size: 21.2 KB


        <a href="#" {{#if target}}target="{{target}}"{{/if}} class="efl-card {{#if modifier}}efl-card--{{modifier}}{{/if}} {{#if isCompleted}}completed{{/if}}"
{{#if hasVideo}}id="video-dialog-label" data-behavior="get-started-lightbox" data-video-id="ufLSGCZEPrg" data-video-type="youtube"{{/if}}
{{#if courseFilter}}data-filter='{ "course-type": "{{filter.course-type}}", "level": "{{filter.level}}", "price": "{{filter.price}}", "venue": "{{filter.venue}}", "your-role": "{{filter.your-role}}" }'{{/if}}  {{#if ajaxFilter}}data-filter='{{taxonomies}}'{{/if}}  aria-label="{{title}}">
    <div class="efl-card__image {{#if hasVideo}}efl-card__image--video{{/if}}">
        {{#if hasStartHere}}<span class="efl-card__image--blue">Start Here</span>{{/if}}
        {{#if newCourse}}<span class="efl-card__image--red">New Course</span>{{/if}}
        <img src="{{image}}"/>
    </div>
    <div class="efl-card__content {{#if isCpd}}cpd{{/if}}">
        <div class="efl-card__inner">
            <div class="efl-card__content--category">{{category}}{{#if isCpd}}<span class="cpd"> - {{date}}</span>{{/if}}</div>
            <div class="efl-card__content--title">{{title}}</div>
            <p class="efl-card__content--description">{{description}}</p>
            {{#if datetime}}
            <div class="efl-card__content--date-wrap"><span class="time">{{time}}</span><span class="date">{{date}}</span></div>
            {{/if}}
        </div>
        {{#if fullWidth}}
            {{render '@cta' find-out-more-cta merge="true"}}
            {{else}}
            {{#if isCpd}}<div class="efl-card__content--date-wrap">{{time}}</div>{{/if}}
            
        {{/if}}
        {{#if getStartedCta}}
            <span class="cta cta--efl get-started-cta" tabindex="0">{{getstartedcta}}</span>
        {{/if}}
    </div>
</a>

Handle: @efl-card--horizontal-news-card
Variants (9): Default , Single News Card , Horizontal News Card , Full Width News Card , Get Started Article , Get Started Session , Get Started Podcast , Get Started Youtube , Get Started Community
Preview:
- With layout
- Component only
Filesystem Path: src/library/components/efl-card/efl-card.hbs
References (1): @cta