England Football

Session Setup 

<section class="session-setup">
    <div class="session-setup__inner">
        <h2>Session setup</h2>
        <p class="session-setup__subtitle">To set up this session make sure to have these tools and rules in places for your players</p>
    </div>
    <div class="session-setup__grid">
        <div class="session-setup__grid__item">
            <img class="session-setup__icon" src=/assets/example-content/cog-icon.svg alt=1 Ball loading="lazy">
            <p>1 Ball</p>
        </div>
        <div class="session-setup__grid__item">
            <img class="session-setup__icon" src=/assets/example-content/cog-icon.svg alt=1 Ball loading="lazy">
            <p>1 Ball</p>
        </div>
        <div class="session-setup__grid__item">
            <img class="session-setup__icon" src=/assets/example-content/cog-icon.svg alt=4 Cones loading="lazy">
            <p>4 Cones</p>
        </div>
        <div class="session-setup__grid__item">
            <img class="session-setup__icon" src=/assets/example-content/cog-icon.svg alt=15 Mins loading="lazy">
            <p>15 Mins</p>
        </div>
        <div class="session-setup__grid__item">
            <img class="session-setup__icon" src=/assets/example-content/cog-icon.svg alt=Half Pitch loading="lazy">
            <p>Half Pitch</p>
        </div>
        <div class="session-setup__grid__item">
            <img class="session-setup__icon" src=/assets/example-content/cog-icon.svg alt=15 Mins loading="lazy">
            <p>15 Mins</p>
        </div>
    </div>
</section>

No notes defined.

{
  "items": [
    {
      "name": "1 Ball",
      "img": "/assets/example-content/cog-icon.svg"
    },
    {
      "name": "1 Ball",
      "img": "/assets/example-content/cog-icon.svg"
    },
    {
      "name": "4 Cones",
      "img": "/assets/example-content/cog-icon.svg"
    },
    {
      "name": "15 Mins",
      "img": "/assets/example-content/cog-icon.svg"
    },
    {
      "name": "Half Pitch",
      "img": "/assets/example-content/cog-icon.svg"
    },
    {
      "name": "15 Mins",
      "img": "/assets/example-content/cog-icon.svg"
    }
  ]
}
  • Content: 
    /* stylelint-disable at-rule-empty-line-before, declaration-empty-line-before */
.session-setup {
  @include rte;
  background-color: $blue-accent3;
  color: $white;
  padding-top: 3.4rem;
  padding-bottom: 4.2rem;
  padding-left: 3.2rem;
  padding-right: 3.2rem;
  position: relative;

  &::before {
    content: '';
    background-image: url('./assets/images/noise.png');
    background-repeat: repeat;
    mix-blend-mode: soft-light;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    opacity: 0.5;
    pointer-events: none;
  }

  strong {
    color: $white;
  }
  h1,
  h2,
  h3,
  h4,
  h5 {
    color: $white;
  }
  a {
    color: $white;
    &:hover {
      color: $white;
    }
  }

  &__inner {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
    max-width: 95.8rem;

    h2 {
      color: $white;
      text-align: left;
      margin-bottom: 1.6rem;
      &::after {
        content: '';
        display: block;
        width: 3.2rem;
        height: 0.4rem;
        padding-top: 0.8rem;
        border-bottom: 2px solid $red;
      }
    }

    p {
      @extend .efl-p-large;

      text-align: left;
    }
  }

  &__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.1rem;
    background-color: $white;
    border-radius: 0.8rem;
    margin-top: 2rem;
    padding: 1.6rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 100rem;

    &__item {
      display: flex;
      align-items: center;
      gap: 1.1rem;

      p {
        font-family: $text-font-ef;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        text-align: left;
        color: $color-interface-light;
      }
    }
  }

  &__icon {
    padding: 0.64rem;
    background-color: $color-interface-light;
    border-radius: 0.8rem;
    width: 4rem;
    height: auto;
  }

  @media screen and (min-width: $mq-medium) {
    padding-top: 4.3rem;
    padding-bottom: 6.2em;

    &__inner {
      margin-bottom: 3.1rem;
      h2 {
        margin-bottom: 1.4rem;
      }
    }
    &__grid {
      padding: 2.4rem 6.3rem;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 2.6rem;

      p {
        letter-spacing: 0.02em;
      }

      &__item {
        gap: 1.6rem;
      }
    }

    &__icon {
      padding: 0.94rem;
      width: 5.6rem;
      height: auto;
    }
  }
}
  • URL: /components/raw/session-setup/session-setup.scss
  • Filesystem Path: src/library/components/session-setup/session-setup.scss
  • Size: 2.4 KB 
<section class="session-setup">
  <div class="session-setup__inner">
    <h2>Session setup</h2>
    <p class="session-setup__subtitle">To set up this session make sure to have these tools and rules in places for your players</p>
  </div>
  <div class="session-setup__grid">
    {{#each items}}
    <div class="session-setup__grid__item">
      <img class="session-setup__icon" src={{img}} alt={{name}} loading="lazy">
      <p>{{name}}</p>
    </div>
    {{/each}}
  </div>
</section>