England Football

Content Card: Video Card Youtube 

<a target="_blank" href="https://www.youtube.com/watch?v=H11o250_xCA" class="content-card content-card--video">
    <div class="content-card__image-bg">
        <img src="/assets/example-content/video-card-image.png" />
    </div>
    <div class="time">5 min <span>read</span></div>
    <div class="content-card__content">
        <div class="content-card__content--dark-gradient">
            <div class="sponsor-logo">
                <img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
            </div>
        </div>
        <div class="content-card__content--info">
            <div class="sponsored-label">Men's Senior</div>
            <p class="title">Video Card - 1</p>
            <hr />
            <div class="dateduration-wrap">
                <span class="date">11 Oct 2020</span>
            </div>
        </div>
    </div>
</a>

Content Card

A common to display content in a card.

Usages

It will be used for curated carousel widget, but might be reusable for other components as well.

issues

  1. There is a minor glitch for hover animation
  2. Needs more information on how the backaground image would behave when hovered over the element, an example of it would help.
{
  "title": "Video Card - 1",
  "thumbnail": "/assets/example-content/video-card-image.png",
  "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab non voluptas minima cupiditate odio",
  "date": "11 Oct 2020",
  "href": "",
  "modifier": "video",
  "sponsors-show": true,
  "duration": "3:30",
  "withYoutube": true,
  "videoId": "H11o250_xCA"
}
  • Content: 
    @mixin divider($width: 100%, $color: $color-interface-light) {
  width: calc(100% - 2rem);
  border: 0;
  border-top: 0.1rem solid $color;
  opacity: 0.2;
}

.content-card {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  position: relative;
  width: 100%;
  max-width: 34.6rem;
  height: 100%;
  max-height: 12rem;
  text-decoration: none;
  margin-bottom: 2.4rem;

  &__image-bg,
  &__image-bg img {
    width: 12rem;
    height: 12rem;
    object-fit: cover;
    border-radius: 0.2rem 0 0 0.2rem;
    display: flex;
  }
  .time {
    @include text-xs;

    background: $white;
    padding: 1.1rem 1.2rem 1rem 4.4rem;
    display: inline-block;
    position: absolute;
    height: 3.2rem;
    color: $color-interface-light;
    top: 8.8rem;
    left: 0;
    z-index: 1;

    &::before {
      content: '';
      background: $white url(./assets/images/news-article-icon.svg) no-repeat
        center;
      padding: 0.9rem 1rem;
      display: block;
      position: absolute;
      left: 0;
      width: 3.2rem;
      height: 3.1rem;
      bottom: 0;
      border-right: 1px solid $grey-light1;
    }
    span {
      display: none;
    }
  }
  &__content {
    @include text-xs;

    width: 100%;
    max-width: 22.6rem;
    background-color: transparent;
    color: $blue;
    border-left: 0;
    border-radius: 0 0.2rem 0.2rem 0;
    height: 8.5rem;

    .title {
      font: normal normal 1.4rem/1.8rem $text-font;
      letter-spacing: 0.01em;
      padding-right: 0.8rem;
      white-space: pre-wrap;
    }

    hr {
      @include divider(100%);

      margin: 1.3rem 0 1.3rem 0;
      display: none;
    }

    .description {
      white-space: pre-wrap;
    }

    .dateduration-wrap {
      @include text-xs;

      display: flex;
      justify-content: space-between;
      align-items: right;
      line-height: 1.4rem;
      letter-spacing: 0.01em;
      position: absolute;
      bottom: 1rem;
      right: 1.2rem;
    }

    .duration {
      margin-left: 5rem;
      &::before {
        content: '';
        background: url(./assets/images/clock-icon.svg) no-repeat center/1.4rem;
        height: 1.4rem;
        width: 1.4rem;
        position: relative;
        display: inline-block;
        top: 0.2rem;
        margin-right: 0.8rem;
      }
    }
    &--dark-gradient {
      display: none;
    }
    &--info {
      background: $white;
      padding: 0.8rem 0.8rem 0.8rem 1.2rem;
      height: 12rem;
      position: relative;
      border: 1px solid $grey-light1;
      border-radius: 0 0 0.4rem 0.4rem;
      text-align: left;

      .sponsored-label {
        font-size: 1rem;
        line-height: 2.4rem;
        text-transform: uppercase;
        color: $red;
      }
    }
  }

  // video card styling
  &--video {
    border: none;
    background: none;
    padding: 0;

    .time {
      background: $blue;
      padding: 1.1rem 1.2rem 1rem 4.4rem;
      display: inline-block;
      position: absolute;
      height: 3.2rem;
      color: $white;
      top: 8.8rem;
      left: 0;
      z-index: 1;

      &::before {
        content: '';
        background: #c30024 url(./assets/images/video-play-button.svg) no-repeat
          center;
        padding: 0.9rem 1rem;
        display: block;
        position: absolute;
        left: 0;
        width: 3.2rem;
        height: 3.2rem;
        bottom: 0;
        border: 0;
      }
      span {
        display: none;
      }
    }

    .content-card__content {
      color: $white;
      border: 0;
      transition: all 0.2s ease-in-out;

      .duration {
        &::before {
          background: url(./assets/images/clock-icon-white.svg) no-repeat center /
            1.4rem;
        }
      }
      &--info {
        background: $blue;
        padding: 0.8rem 0.8rem 0.8rem 1.2rem;
        border: 1px solid transparent;
        border-radius: 0 0.4rem 0.4rem 0;
        position: relative;

        .sponsored-label {
          font-size: 1rem;
          line-height: 2.4rem;
          text-transform: uppercase;
          color: $white;
        }
      }
    }
  }

  @media screen and (min-width: $mq-medium) {
    flex-direction: column;
    max-width: 27.4rem;
    max-height: 37.5rem;
    border-radius: 0.4rem;
    margin: 2.5rem 1.2rem 2.4rem 0;
    transition: box-shadow 0.3s ease-in-out;
    min-height: 37.5rem;

    &__image-bg,
    &__image-bg img {
      width: 100%;
      height: 23.6rem;
      border-radius: 0.4rem;
    }
    .time {
      top: 20.3rem;
      border-bottom: 1px solid $grey-light1;
      span {
        display: inline-block;
      }
    }

    &__content {
      height: 23.8rem;
      max-width: 100%;
      max-height: 23.8rem;
      border-top: 0;
      box-sizing: border-box;
      border-radius: 0 0 0.4rem 0.4rem;
      position: absolute;
      bottom: 0;

      .title {
        font-size: 1.6rem;
        line-height: 2rem;
      }

      .description {
        font: normal normal 1.4rem/2rem $text-font;
        margin-top: 1.6rem;
        margin-bottom: 4.9rem;
      }

      hr {
        margin: 0;
        display: block;
        position: absolute;
        bottom: 4rem;
      }

      .dateduration-wrap {
        position: absolute;
        bottom: 1rem;
        left: 1.2rem;
        &::after {
          position: static;
        }
      }
      .date {
        &::before {
          content: '';
          background: url(./assets/images/calendar.svg) no-repeat center /
            1.4rem;
          height: 1.4rem;
          width: 1.4rem;
          position: relative;
          display: inline-block;
          top: 0.2rem;
          margin-right: 0.8rem;
        }
      }
      &--dark-gradient {
        background: linear-gradient(
          180deg,
          rgba(1, 25, 49, 0) 0%,
          rgba(1, 32, 64, 0.7) 50.52%,
          rgba(0, 18, 37, 1) 100%
        );
        height: 9.7rem;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;

        &.no-sponsor {
          background: none !important;
        }

        .sponsor-logo {
          max-height: 6rem;
          max-width: 6.4rem;
          margin-bottom: 1.7rem;
          margin-right: 0.3rem;
        }
      }
      &--info {
        padding: 1.5rem 0.8rem 0.8rem 1.2rem;
        height: 14.3rem;
      }
    }
    // video card styles
    &--video {
      border-radius: 0.4rem;
      .content-card__image-bg {
        height: 37.5rem;
        max-height: 37.5rem;
        border-radius: 0.4rem;
        background-repeat: no-repeat;
        &::before {
          top: 1.1rem;
          left: 1.2rem;
        }
      }
      .time {
        background: $blue;
        padding: 1.1rem 1.2rem 1rem 4.4rem;
        display: inline-block;
        position: absolute;
        height: 3.2rem;
        color: $white;
        top: 20.2rem;
        z-index: 1;
        border-bottom: none;

        &::before {
          content: '';
          background: #c30024 url(./assets/images/video-play-button.svg)
            no-repeat center;
          padding: 0.9rem 1rem;
          display: block;
          position: absolute;
          left: 0;
          width: 3.2rem;
          height: 3.2rem;
          bottom: 0;
          border: 0;
        }
      }
      .content-card__content {
        @include text-xs;

        background: transparent;
        position: absolute;
        bottom: 0;
        border: 0;
        max-height: 23.8rem;
        height: 23.8rem;
        text-align: left;

        hr {
          @include divider(100%, $white);

          margin: 0;
          opacity: 0.2;
          position: absolute;
          bottom: 4rem;
        }

        &--dark-gradient {
          background: linear-gradient(
            180deg,
            rgba(1, 25, 49, 0) 0%,
            rgba(1, 32, 64, 0.7) 50.52%,
            rgba(0, 18, 37, 1) 100%
          );
          height: 9.7rem;
          display: flex;
          align-items: flex-end;
          justify-content: flex-end;

          .sponsor-logo {
            max-height: 6rem;
            max-width: 6.4rem;
            margin-bottom: 1.7rem;
            margin-right: 0.3rem;
          }
        }

        &--info {
          background: $blue;
          padding: 1.5rem 0.8rem 0.8rem 1.2rem;
          border: 1px solid transparent;
          border-radius: 0 0 0.4rem 0.4rem;
          height: 14.3rem;
          position: relative;

          .sponsored-label {
            font-size: 1rem;
            line-height: 2.4rem;
            text-transform: uppercase;
            color: $white;
          }
        }

        .date {
          &::before {
            content: '';
            background: url(./assets/images/calendar-white.svg) no-repeat center /
              1.4rem;
            height: 1.4rem;
            width: 1.4rem;
            position: relative;
            display: inline-block;
            top: 0.2rem;
            margin-right: 0.8rem;
          }
        }
      }
    }
    &:hover {
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
    }
  }
}

:root [data-brand='englandfootball'],
:root [data-brand='englandfootball--supplimentary'] {
  .content-card {
    .time {
      font-family: $text-font-ef;
    }
    &__content {
      font-family: $text-font-ef;
      .title {
        font-family: $text-font-ef;
        font-weight: 500;
        font-size: 1.6rem;
        line-height: 2rem;
      }
      .dateduration-wrap {
        font-family: $text-font-ef;
        line-height: 1.2rem;
      }
      &--info {
        .sponsored-label {
          font-size: 1.2rem;
          line-height: 1.2rem;
          margin-bottom: 0.8rem;
        }
      }
    }

    @media screen and (min-width: $mq-medium) {
      &__content {
        .title {
          font-size: 1.8rem;
        }
      }
    }
  }
}
  • URL: /components/raw/content-card/content-card.scss
  • Filesystem Path: src/library/components/content-card/content-card.scss
  • Size: 9.8 KB 
{{!-- Will add href while integrating this in curated carousel --}}
<a target="_blank"
  href="{{#if href}}{{href}}{{/if}}{{#if withYoutube}}https://www.youtube.com/watch?v={{videoId}}{{/if}}{{#if withVimeo}}https://vimeo.com/{{videoId}}{{/if}}"
  class="content-card {{#if modifier}}content-card--{{modifier}}{{/if}}">
  <div class="content-card__image-bg">
    <img src="{{thumbnail}}" />
  </div>
  {{#if sponsors-show}}
  <div class="time">5 min <span>read</span></div>
  {{/if}}
  <div class="content-card__content">
    <div class="content-card__content--dark-gradient">
      {{#if sponsors-show}}      
      <div class="sponsor-logo">
        <img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
      </div>
      {{/if}}
    </div>    
    <div class="content-card__content--info">
      <div class="sponsored-label">Men's Senior</div>
      <p class="title">{{title}}</p>
      {{#if sponsors-show}}
      <hr />     
      <div class="dateduration-wrap">
        <span class="date">{{date}}</span>       
      </div>
      {{/if}}
    </div>  
  </div>
</a>