<footer class="page-footer p-5">
    <div class="page-footer--wrapper main-column-wrapper container d-flex flex-column">
        <div class="page-footer__row row text-center text-lg-start align-items-center order-1 order-md-0">
            <p class="col-lg-4 fs-4 mt-3 mt-md-0">
                Box office: <span class="fw-semibold">020 7609 1800</span><br>
                Admin: <span class="fw-semibold">020 7619 6868</span>
            </p>
            <p class="col-lg-4 fs-4 fw-semibold">
                [email protected]
            </p>
            <ul class="col-lg-4 list-unstyled list-inline">
                <li class="list-inline-item"><a class="icon icon-account" href="https://twitter.com" aria-label="Twitter"><svg>
                            <use xlink:href="#twitter"></use>
                        </svg></a></li>
                <li class="list-inline-item"><a class="icon icon-account" href="https://facebook.com" aria-label="Facebook"><svg>
                            <use xlink:href="#facebook"></use>
                        </svg></a></li>
                <li class="list-inline-item"><a class="icon icon-account" href="https://instagram.com" aria-label="Instagram"><svg>
                            <use xlink:href="#instagram"></use>
                        </svg></a></li>
                <li class="list-inline-item"><a class="icon icon-account" href="https://tiktok.com" aria-label="Tiktok"><svg>
                            <use xlink:href="#tiktok"></use>
                        </svg></a></li>
            </ul>
        </div>
        <div class="page-footer__row row pt-3 pb-3 order-0 order-md-1 d-flex">
            <ul class="page-footer__menu col-md-4 list-unstyled order-1 order-md-0">
                <li>
                    <a href="/about" class="link-primary">About</a>
                </li>
                <li>
                    <a href="/privacy" class="link-primary">Privacy &amp; Cookies</a>
                </li>
                <li>
                    <a href="/terms" class="link-primary">Terms &amp; Conditions</a>
                </li>
            </ul>
            <div class="page-footer__newsletter-cta col-md-4 order-0 order-md-1">
                <h3 class="fs-4">Sign up to our weekly newsletter</h3>
                <p>
                    <a class="btn btn-primary" href="https://eepurl.com/dwIZcX" role="button" target="_blank">Sign up</a>
                </p>
            </div>
            <div class="page-footer__charity-info col-md-4 order-2">
                <p>Pleasance Theatre Trust Ltd is a registered Charity in England and Wales (Charity No. 1050944) and in Scotland (Charity No. SC043237)</p>
                <p>© 2019 Pleasance Theatre Trust.</p>
            </div>
        </div>
        <div class="page-footer__row pt-3 order-2">
            <ul class="list-unstyled">
                <li>
                    Designed by West Creative.
                </li>
                <li>
                    Built by Tom Dearden.
                </li>
            </ul>
        </div>
    </div>
</footer>
<footer class="page-footer p-5">
  <div class="page-footer--wrapper main-column-wrapper container d-flex flex-column">
    <div class="page-footer__row row text-center text-lg-start align-items-center order-1 order-md-0">
      <p class="col-lg-4 fs-4 mt-3 mt-md-0">
        Box office: <span class="fw-semibold">{{ phone.box_office }}</span><br>
        Admin: <span class="fw-semibold">{{ phone.admin }}</span>
      </p>
      <p class="col-lg-4 fs-4 fw-semibold">
        {{ email }}
      </p>
      {% apply spaceless %}
      <ul class="col-lg-4 list-unstyled list-inline">
        {% for link in social %}
          <li class="list-inline-item">
            <a class="icon icon-account" href="{{ link.url }}" aria-label="{{ link.label | e }}">
              <svg>
                <use xlink:href="#{{ link.icon_name }}"></use>
              </svg>
            </a>
          </li>
        {% endfor %}
      </ul>
      {% endapply %}
    </div>
    <div class="page-footer__row row pt-3 pb-3 order-0 order-md-1 d-flex">
      {% block menu %}
      {% include "@footer-menu" with {
        links: menu
      }%}
      {% endblock %}
      <div class="page-footer__newsletter-cta col-md-4 order-0 order-md-1">
        <h3 class="fs-4">Sign up to our weekly newsletter</h3>
        <p>
          <a class="btn btn-primary" href="https://eepurl.com/dwIZcX" role="button" target="_blank">Sign up</a>
        </p>
      </div>
      <div class="page-footer__charity-info col-md-4 order-2">
        {{ charity_info | raw }}
      </div>
    </div>
    <div class="page-footer__row pt-3 order-2">
      <ul class="list-unstyled">
        {% for credit in credits %}
          <li>
            {{ credit | e }}
          </li>
        {% endfor %}
      </ul>
    </div>
  </div>
</footer>
{
  "phone": {
    "box_office": "020 7609 1800",
    "admin": "020 7619 6868"
  },
  "email": "[email protected]",
  "social": [
    {
      "label": "Twitter",
      "icon_name": "twitter",
      "url": "https://twitter.com"
    },
    {
      "label": "Facebook",
      "icon_name": "facebook",
      "url": "https://facebook.com"
    },
    {
      "label": "Instagram",
      "icon_name": "instagram",
      "url": "https://instagram.com"
    },
    {
      "label": "Tiktok",
      "icon_name": "tiktok",
      "url": "https://tiktok.com"
    }
  ],
  "menu": [
    {
      "label": "About",
      "url": "/about"
    },
    {
      "label": "Privacy & Cookies",
      "url": "/privacy"
    },
    {
      "label": "Terms & Conditions",
      "url": "/terms"
    }
  ],
  "charity_info": "<p>Pleasance Theatre Trust Ltd is a registered Charity in England and Wales (Charity No. 1050944) and in Scotland (Charity No. SC043237)</p><p>© 2019 Pleasance Theatre Trust.</p>",
  "credits": [
    "Designed by West Creative.",
    "Built by Tom Dearden."
  ]
}
  • Content:
    .page-footer {
      background: $brand-grey;
      color: white;
    
      &__row {
        border-bottom: 2px solid $brand-yellow;
    
        &:last-child {
          border: none;
        }
    
        --bs-link-color: var(--bs-primary);
        --bs-link-hover-color: var(--bs-primary);
      }
    
      h3 {
        font-family: $font-family-sans-serif;
      }
    
      .icon {
        svg {
          use {
            fill: $primary;
          }
        }
    
        &:hover {
          svg {
            use {
              fill: $white;
            }
          }
        }
      }
    }
  • URL: /components/raw/footer/footer.scss
  • Filesystem Path: src/components/02-structures/footer/footer.scss
  • Size: 470 Bytes

No notes defined.