England Football

Course Important Information 

<section class="course-important-information">
    <div class="course-important-information__container">
        <div class="course-important-information__inner">
            <div class="course-important-information__title">
                <h3>Important Information</h3>
            </div>
            <div>
                <h4>Course Prerequisites</h4>
                <p>

                    To begin Introduction to Coaching Football you must complete

                    <a href="#">BT Playmaker by England Football</a>

                    , which is a completely free online course focused on taking an active role in football. If you haven&#8217;t yet completed BT Playmaker, or you&#8217;d like to find out a bit more about how it works, you can

                    <a href="" aria-label="To Find Out a Bit More about BT Playmaker, Click Here">click here</a>

                    .
                </p>
            </div>
            <hr>
            <div>
                <h4>Replacing The FA Level 1 in Coaching Football Course</h4>
                <p>

                    The FA Level 1 in Coaching Football has now been replaced by Introduction to Coaching Football. We are excited to take you on this new journey to help you become the best coach you can be.
                </p>
            </div>
            <hr>

        </div>
    </div>
</section>

No notes defined.

{
  "passages": [
    {
      "title": "Course Prerequisites",
      "text": [
        {
          "isLink": false,
          "content": "To begin Introduction to Coaching Football you must complete "
        },
        {
          "isLink": true,
          "content": "BT Playmaker by England Football",
          "link": "#"
        },
        {
          "isLink": false,
          "content": ", which is a completely free online course focused on taking an active role in football. If you haven&#8217;t yet completed BT Playmaker, or you&#8217;d like to find out a bit more about how it works, you can"
        },
        {
          "isLink": true,
          "content": "click here",
          "aria-label": "To Find Out a Bit More about BT Playmaker, Click Here"
        },
        {
          "isLink": false,
          "content": "."
        }
      ]
    },
    {
      "title": "Replacing The FA Level 1 in Coaching Football Course",
      "text": [
        {
          "isLink": false,
          "content": "The FA Level 1 in Coaching Football has now been replaced by Introduction to Coaching Football. We are excited to take you on this new journey to help you become the best coach you can be."
        }
      ]
    }
  ]
}
  • Content: 
    /* stylelint-disable at-rule-empty-line-before, declaration-empty-line-before */
.course-important-information {
  @include rte;
  position: relative;
  padding: 4rem 3.2rem;
  padding-top: 5.1rem;
  padding-bottom: 12rem;
  background-image: url('./assets/images/course-important-information-crop.svg');
  background-position: center bottom;
  background-repeat: no-repeat;
  background-color: $blue-accent3;
  background-size: 100% auto;
  color: $white;

  &__container {
    margin: 0 auto;
    max-width: 103.2rem;
  }

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

  &::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.3;
    pointer-events: none;
  }

  &__inner {
    border-left: 2px solid $red;
    padding-left: 2.4rem;
  }

  &__title {
    display: flex;
    align-items: center;
    padding-bottom: 2.7rem;

    ::before {
      content: '';
      background-image: url('./assets/images/info-icon.svg');
      background-position: center;
      background-repeat: no-repeat;
      padding: 1.6rem;
      margin-right: 1rem;
    }
  }
  /* stylelint-disable no-descending-specificity */
  /* stylelint-disable no-duplicate-selectors */
  a {
    text-decoration: underline;
    font-weight: 500;
    color: $white;
    &:hover {
      color: $white;
    }
  }

  hr {
    opacity: 0.2;
    margin: 2.3rem 0;
  }

  hr:last-child {
    display: none;
  }

  h3 {
    margin-bottom: 0;
    color: $white;

    @extend .efl-heading-3;
  }

  h4 {
    text-transform: capitalize;
    margin-bottom: 1rem;
    color: $white;

    @extend .efl-heading-4;
  }

  p {
    @extend .efl-p-large;
  }

  @media screen and (min-width: $mq-medium) {
    padding: 7.5rem 0;
    background-image: url('./assets/images/course-important-information.svg');
    background-position: right center;
    background-size: auto 100%;
    padding-bottom: 7.3rem;
    &__inner {
      max-width: 58.6rem;
      padding-left: 4rem;
    }
    hr {
      margin: 2.4rem 0;
    }

    h3 {
      font-size: 2.8rem;
    }
  }

  @media screen and (min-width: $mq-medium) and (max-width: 1128px) {
    &__container {
      margin-left: 4rem;
    }
  }

  @media screen and (min-width: $mq-small) and (max-width: $mq-medium) {
    background-image: url('./assets/images/course-important-information-tablet-crop.svg');
    background-position: 300% 150%;
  }

  @media screen and (min-width: $mq-medium) {
    background-position: 45vw center;
  }
}
  • URL: /components/raw/course-important-information/course-important-information.scss
  • Filesystem Path: src/library/components/course-important-information/course-important-information.scss
  • Size: 2.8 KB 
<section class="course-important-information">
  <div class="course-important-information__container">
    <div class="course-important-information__inner">
      <div class="course-important-information__title"><h3>Important Information</h3></div>
      {{#each passages}}
      <div>
        <h4>{{title}}</h4>
        <p>
        {{#each text}}
        
          {{#if isLink}}
            <a href="{{link}}" {{#if aria-label}}aria-label="{{aria-label}}"{{/if}}>{{{content}}}</a>
          {{else}}
            {{{content}}}
          {{/if}}
        {{/each}}
        </p>
      </div>
      <hr>
      {{/each}}
      
    </div>
  </div>
</section>