England Football

Quick Links: Default 

<div class="quick-links ">
    <div>
        <div class="quick-links__headings">
            <div class="quick-links__title">visual impairment</div>
            <div class="quick-links__links">
                <a class="link" href="/">blind football</a>
            </div>
            <div class="quick-links__links">
                <a class="link" href="/">blind football</a>
            </div>
            <div class="quick-links__links">
                <a class="link" href="/">blind football</a>
            </div>
        </div>
        <div class="quick-links__headings">
            <div class="quick-links__title">physical impairment</div>
            <div class="quick-links__links">
                <a class="link" href="/">blind football</a>
            </div>
            <div class="quick-links__links">
                <a class="link" href="/">blind football</a>
            </div>
            <div class="quick-links__links">
                <a class="link" href="/">blind football</a>
            </div>
        </div>
        <div class="quick-links__headings">
            <div class="quick-links__title">mental health impairment</div>
            <div class="quick-links__links">
                <a class="link" href="/">amputee football</a>
            </div>
            <div class="quick-links__links">
                <a class="link" href="/">blind football</a>
            </div>
            <div class="quick-links__links">
                <a class="link" href="/">blind football</a>
            </div>
        </div>
    </div>
</div>

No notes defined.

{
  "data": [
    {
      "headings": "visual impairment",
      "links": [
        {
          "link": "blind football",
          "id": "/"
        },
        {
          "link": "blind football",
          "id": "/"
        },
        {
          "link": "blind football",
          "id": "/"
        }
      ]
    },
    {
      "headings": "physical impairment",
      "links": [
        {
          "link": "blind football",
          "id": "/"
        },
        {
          "link": "blind football",
          "id": "/"
        },
        {
          "link": "blind football",
          "id": "/"
        }
      ]
    },
    {
      "headings": "mental health impairment",
      "links": [
        {
          "link": "amputee football",
          "id": "/"
        },
        {
          "link": "blind football",
          "id": "/"
        },
        {
          "link": "blind football",
          "id": "/"
        }
      ]
    }
  ]
}
  • Content: 
    .quick-links {
  background: $grey-light;
  border-radius: 0;
  padding: 4.3rem 2rem 4.2rem 2rem;

  &__headings:not(:last-child) {
    margin-bottom: 5.2rem;
  }

  &__title {
    font-family: var(--brand-text--font-family);
    font-style: italic;
    font-weight: 700;
    font-size: 2.8rem;
    line-height: 2.6rem;
    letter-spacing: -0.02em;
    text-transform: capitalize;
    color: $blue-accent;
    margin-bottom: 1.4rem;
  }

  &__links {
    .link {
      font-family: var(--brand-text--font-family);
      font-weight: 400;
      font-size: 2rem;
      line-height: 2.2rem;
      letter-spacing: 0.02em;
      color: $color-interface-light;
      border-bottom: 0.1rem solid $grey;
      padding: 1.1rem 2.6rem 1.1rem 1.2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-decoration: none;
      transition: 0.3s;
      text-transform: capitalize;

      &::after {
        content: '';
        background: url(./assets/images/arrow-quick-links.svg) no-repeat center;
        display: inline-block;
        width: 1.4rem;
        height: 1.1rem;
        -webkit-transition: transform 0.3s ease-out;
        -moz-transition: transform 0.3s ease-out;
        -ms-transition: transform 0.3s ease-out;
        -o-transition: transform 0.3s ease-out;
        transition: transform 0.3s ease-out;
      }

      &:hover {
        background: $white;
        color: $blue;
        border-radius: 0.4rem;
        border-bottom: 0.1rem solid $white;

        &::after {
          -webkit-transform: translateX(0.6rem);
          -moz-transform: translateX(0.6rem);
          -ms-transform: translateX(0.6rem);
          -o-transform: translateX(0.6rem);
          transform: translateX(0.6rem);
        }
      }
    }
  }

  @media screen and (min-width: $mq-medium) {
    margin: 0 7rem;
    padding: 4rem 11rem 4rem 11.1rem;
    border-radius: 0.8rem;

    &.left-aligned {
      margin: 0 14rem 0 0;
      padding: 4rem 4rem 4rem 18.6rem;
      border-radius: 0 0.8rem 0.8rem 0;
    }

    &.right-aligned {
      margin: 0 0 0 14rem;
      padding: 4rem 18.2rem 4rem 4rem;
      border-radius: 0.8rem 0 0 0.8rem;
    }

    &__links {
      .link {
        padding: 1.1rem 2.6rem 1.1rem 1.6rem;
      }
    }
  }
}
  • URL: /components/raw/quick-links/quick-links.scss
  • Filesystem Path: src/library/components/quick-links/quick-links.scss
  • Size: 2.4 KB 
<div class="quick-links {{#if modifier}}{{modifier}}{{/if}}">
    <div>
        {{#each data}}
        <div class="quick-links__headings">
            <div class="quick-links__title">{{headings}}</div>
            {{#each links}}
            <div class="quick-links__links">
                <a class="link" href="{{id}}">{{link}}</a>
            </div>
            {{/each}}
        </div>
        {{/each}}
    </div>
</div>