England Football

Efl Bundles Overview Card List 

<section class="efl-learner-profile__section efl-bundles-overview-card-list" data-behavior="efl-bundle-overview-list">
    <div class="efl-bundles-overview-card-list__details">
        <div class="efl-learner-profile__section--header">
            <h2 class="bundles-list">My bundle list</h2>
        </div>
        <div class="efl-bundles-overview-card-list__details--list">
            <a class="efl-bundles-overview-card" href="#" target="_blank">
                <div class="efl-bundles-overview-card__content">
                    <div class="efl-bundles-overview-card__content--info">
                        <p>COACHING SKILLS</p>
                        <div class="title">The basics</div>
                        <hr>
                        <div class="quiz-time">
                            <span>20 - mins</span>
                            <span>5 - Quizzes</span>
                        </div>
                    </div>
                    <div class="efl-bundles-overview-card__content--img">
                        <img src="/assets/example-content/bundles-tropy-1.svg" />
                    </div>
                </div>
                <div class="efl-bundles-overview-card__status not-started">Not started</div>
            </a>
            <a class="efl-bundles-overview-card" href="#" target="_blank">
                <div class="efl-bundles-overview-card__content">
                    <div class="efl-bundles-overview-card__content--info">
                        <p>COACHING SKILLS</p>
                        <div class="title">Session design</div>
                        <hr>
                        <div class="quiz-time">
                            <span>20 - mins</span>
                            <span>5 - Quizzes</span>
                        </div>
                    </div>
                    <div class="efl-bundles-overview-card__content--img">
                        <img src="/assets/example-content/bundles-tropy-2.svg" />
                    </div>
                </div>
                <div class="efl-bundles-overview-card__status started">Started</div>
            </a>
            <a class="efl-bundles-overview-card" href="#" target="_blank">
                <div class="efl-bundles-overview-card__content">
                    <div class="efl-bundles-overview-card__content--info">
                        <p>COACHING SKILLS</p>
                        <div class="title">Communication and connection</div>
                        <hr>
                        <div class="quiz-time">
                            <span>20 - mins</span>
                            <span>5 - Quizzes</span>
                        </div>
                    </div>
                    <div class="efl-bundles-overview-card__content--img">
                        <img src="/assets/example-content/bundles-tropy-3.svg" />
                    </div>
                </div>
                <div class="efl-bundles-overview-card__status complete">Complete!</div>
            </a>
            <a class="efl-bundles-overview-card" href="#" target="_blank">
                <div class="efl-bundles-overview-card__content">
                    <div class="efl-bundles-overview-card__content--info">
                        <p>COACHING SKILLS</p>
                        <div class="title">Session design</div>
                        <hr>
                        <div class="quiz-time">
                            <span>20 - mins</span>
                            <span>5 - Quizzes</span>
                        </div>
                    </div>
                    <div class="efl-bundles-overview-card__content--img">
                        <img src="/assets/example-content/bundles-tropy-2.svg" />
                    </div>
                </div>
                <div class="efl-bundles-overview-card__status started">Started</div>
            </a>
        </div>
    </div>
</section>

No notes defined.

{
  "bundle-list": [
    {
      "category": "COACHING SKILLS",
      "title": "The basics",
      "image": "/assets/example-content/bundles-tropy-1.svg",
      "status": "Not started",
      "status-class": "not-started"
    },
    {
      "category": "COACHING SKILLS",
      "title": "Session design",
      "image": "/assets/example-content/bundles-tropy-2.svg",
      "status": "Started",
      "status-class": "started"
    },
    {
      "category": "COACHING SKILLS",
      "title": "Communication and connection",
      "image": "/assets/example-content/bundles-tropy-3.svg",
      "status": "Complete!",
      "status-class": "complete"
    },
    {
      "category": "COACHING SKILLS",
      "title": "Session design",
      "image": "/assets/example-content/bundles-tropy-2.svg",
      "status": "Started",
      "status-class": "started"
    }
  ]
}
  • Content: 
    .efl-bundles-overview-card-list {
  padding: 2.4rem 1.6rem;
  .efl-learner-profile__section--header {
    max-width: 31.1rem;
  }
  &__details {
    .bundles-list {
      @extend .efl-heading-3;

      white-space: nowrap;
    }
    &--list {
      display: grid;
      gap: 2.4rem 1.6rem;
      grid-template-columns: auto;
      justify-content: center;
      margin-top: 0.8rem;
    }
  }

  @media screen and (min-width: 768px) {
    padding: 4rem;
    &__details {
      &--list {
        gap: 2.4rem 1.6rem;
        grid-template-columns: 50% 50%;
      }
    }
  }
}
  • URL: /components/raw/efl-bundles-overview-card-list/efl-bundles-overview-card-list.scss
  • Filesystem Path: src/library/modules/efl-bundles-overview-card-list/efl-bundles-overview-card-list.scss
  • Size: 574 Bytes 
<section class="efl-learner-profile__section efl-bundles-overview-card-list" data-behavior="efl-bundle-overview-list">
    <div class="efl-bundles-overview-card-list__details">
        <div class="efl-learner-profile__section--header">
            <h2 class="bundles-list">My bundle list</h2>
        </div>
        <div class="efl-bundles-overview-card-list__details--list">
            {{#each bundle-list}}
              {{render '@efl-bundles-overview-card' this merge="true"}}
            {{/each}}
        </div>
    </div>
</section>