England Football

Efl Bundle Article 

<section class="efl-bundle-article" data-behavior="efl-bundle-article">
    <div class="efl-bundle-article--header">
        <h2>Quizzes in this bundle</h2>
    </div>
    <div class="efl-bundle-article__section">
        <a href="#" class="efl-bundle-article__card ">
            <div class="efl-bundle-article--img">
                <img src="/assets/example-content/bundle-article/article-1.jpg" alt="">
            </div>
            <div class="efl-bundle-article--info">
                <div class="title">article</div>
                <div class="description">How to build trust with your players</div>
            </div>
        </a>
        <a href="#" class="efl-bundle-article__card ">
            <div class="efl-bundle-article--img">
                <img src="/assets/example-content/bundle-article/article-2.jpg" alt="">
            </div>
            <div class="efl-bundle-article--info">
                <div class="title">article</div>
                <div class="description">The relationship of trust when working with under-18s</div>
            </div>
        </a>
        <a href="#" class="efl-bundle-article__card efl-bundle-article__card--completed">
            <div class="efl-bundle-article--img">
                <canvas class="completed-bundle-rive" width="60px" height="60px"></canvas>
                <img src="/assets/example-content/bundle-article/article-3.jpg" alt="">
            </div>
            <div class="efl-bundle-article--info">
                <div class="title">article</div>
                <div class="description">How to create a great matchday experience</div>
            </div>
        </a>
    </div>
</section>

No notes defined.

{
  "heading": "Quizzes in this bundle",
  "bundle-article": [
    {
      "title": "article",
      "description": "How to build trust with your players",
      "img": "/assets/example-content/bundle-article/article-1.jpg"
    },
    {
      "title": "article",
      "description": "The relationship of trust when working with under-18s",
      "img": "/assets/example-content/bundle-article/article-2.jpg"
    },
    {
      "title": "article",
      "description": "How to create a great matchday experience",
      "img": "/assets/example-content/bundle-article/article-3.jpg",
      "modifier": "completed",
      "isCompleted": true
    }
  ]
}
  • Content: 
    import { Rive, Fit, Layout } from '@rive-app/canvas';

export default parentElement => {
  // Rive
  const surveyCanvas = parentElement.querySelectorAll('.completed-bundle-rive');

  if (surveyCanvas) {
    surveyCanvas.forEach(completedArticle => {
      const lyout = new Layout({
        fit: Fit.Cover,
      });

      const completeAnimation = new Rive({
        src: '/assets/example-content/quiz_complete.riv',
        canvas: completedArticle,
        layout: lyout,
        onLoad: () => {
          completeAnimation.resizeDrawingSurfaceToCanvas();
        },
      });

      completeAnimation.play('Loop');
    });
  }
};
  • URL: /components/raw/efl-bundle-article/efl-bundle-article.js
  • Filesystem Path: src/library/components/efl-bundle-article/efl-bundle-article.js
  • Size: 635 Bytes
  • Content: 
    .efl-bundle-article {
  width: 100%;
  max-width: 70.6rem;
  background: $white;
  border-radius: 0.8rem;
  padding: 2.4rem;
  margin: 0 auto;
  &--header {
    @extend .efl-heading-4;

    font-size: 2.4rem;
    line-height: 2.6rem;
    color: $blue;
    border-bottom: 0.1rem solid $grey-light;
    padding-bottom: 1.6rem;
  }

  &--img {
    position: relative;
    width: 100%;
    max-width: 6.2rem;
    height: 7.2rem;
    img {
      width: 100%;
      max-width: 6.2rem;
      height: 6.6rem;
      object-fit: cover;
      object-position: center;
    }
  }

  &--info {
    .title {
      @extend .efl-p-small;

      font-size: 1.2rem;
      line-height: 1.2rem;
      color: $red;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .description {
      @extend .efl-heading-5;

      font-size: 1.8rem;
      letter-spacing: 0.02em;
      color: $blue;
    }
  }

  &__card {
    display: flex;
    align-items: center;
    column-gap: 1.6rem;
    padding: 1.6rem 0;
    border-bottom: 0.1rem solid $grey-light;
    text-decoration: none;
    &:last-child {
      padding-bottom: 0;
      border-bottom: none;
    }

    &--completed {
      .efl-bundle-article--img img {
        filter: grayscale(1);
        opacity: 0.3;
      }
      .efl-bundle-article--img canvas {
        width: 4.8rem;
        height: 4.8rem;
        background-size: cover;
        background-repeat: no-repeat;
        position: absolute;
        top: 0.9rem;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 5;
      }
      .efl-bundle-article--img::after {
        content: '';
        width: 100%;
        height: 100%;
        background-color: $light-blue;
        opacity: 0.5;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 4;
      }
      .title {
        color: $light-blue;
      }
      .description {
        text-decoration-line: line-through;
        color: $color-interface-light;
      }
    }
  }

  @media screen and (min-width: $mq-medium) {
    padding: 4rem;
    margin: 0 auto;

    &--header {
      line-height: 3rem;
    }

    &--img {
      max-width: 14rem;
      height: 8.5rem;
      img {
        max-width: 14rem;
        height: 8.5rem;
      }
    }

    &--info {
      .title {
        font-size: 1.6rem;
        line-height: 2rem;
        letter-spacing: 0.06em;
      }
      .description {
        font-size: 2.2rem;
        letter-spacing: -0.01em;
      }
    }

    &__card {
      &--completed {
        .efl-bundle-article--img canvas {
          width: 6rem;
          height: 6rem;
          top: 1.2rem;
        }
      }
    }
  }
}
  • URL: /components/raw/efl-bundle-article/efl-bundle-article.scss
  • Filesystem Path: src/library/components/efl-bundle-article/efl-bundle-article.scss
  • Size: 2.7 KB 
<section class="efl-bundle-article" data-behavior="efl-bundle-article">
    <div class="efl-bundle-article--header">
        <h2>{{heading}}</h2>
    </div>
    <div class="efl-bundle-article__section">
        {{#each bundle-article}}
        <a href="#" class="efl-bundle-article__card {{#if modifier}}efl-bundle-article__card--{{modifier}}{{/if}}">
            <div class="efl-bundle-article--img">
                {{#if isCompleted}}
                    <canvas class="completed-bundle-rive" width="60px" height="60px"></canvas>
                {{/if}}
                <img src="{{img}}" alt="">
            </div>
            <div class="efl-bundle-article--info">
                <div class="title">{{title}}</div>
                <div class="description">{{description}}</div>
            </div>
        </a>
        {{/each}}
    </div>
</section>