TheaterMania Component Library

Footer: Wos 

<footer class="footer">
    <div class="footer-main contain">
        <div class="footer-logo">
            <a href="#">
                <img src="/assets/images/logos/whatsonstage.svg" alt="What&#x27;s on Stage Logo" />
            </a>
        </div>
        <div class="footer-nav-items">
            <nav class="footer-nav">
                <ul class="footer-nav__list">
                    <li class="nav-list-item">
                        <span class="nav-link-item--title">Tickets &amp; Discounts</span>
                        <ul class="footer-nav__list footer-nav__list--secondary">
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">London Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Dublin Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Glasgow Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Bath Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Birmingham Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Chichester Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Edinburgh Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Leeds Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Liverpool Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Manchester Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Stratford-Upon-Avon Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">See All Cities</a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-list-item">
                        <a href="#" class="nav-link-item">News &amp; Reviews</a>
                    </li>
                    <li class="nav-list-item">
                        <span class="nav-link-item--title">Theater Clubs</span>
                        <ul class="footer-nav__list footer-nav__list--secondary">
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">London</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Boston</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">New York</a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-list-item nav-list-item--newsletter">
                        <span class="nav-link-item--title">Newsletter</span>
                        <div class="nav-newsletter">
                            <div class="newsletter-form-container js-newsletter-form-container">
                                <div class="newsletter-confirmation visually-hidden js-newsletter-confirmation">
                                    <svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/sprite-sheet.svg#checkmark"></use>
</svg>
                                    <div class="newsletter-confirmation__info">
                                        <p>Thank you for signing up. We&#x27;ll send you a welcome message shortly.</p>
                                        <p class="newsletter-customize">You can <a href="#">customize your preferences </a>at any time.</p>
                                    </div>
                                </div>
                                <form class="newsletter-form js-newsletter-form">
                                    <div class="newsletter-error visually-hidden js-newsletter-error">
                                        <svg class="icon icon--error">
  <use xlink:href="/assets/icons/sprite-sheet.svg#error"></use>
</svg>
                                        <span class="input-error">Please enter a valid email address.</span>
                                    </div>
                                    <div class="form-input">
                                        <div class="validation js-validation">
                                            <label for="footer-email" class="label label--required visually-hidden">Email Address</label>

                                            <input type="email" name="email" id="footer-email" class="input validation-item js-newsletter-input" placeholder="Enter your email address">
                                        </div>
                                    </div>

                                    <button class="btn btn--base btn--cta js-newsletter-btn">
  Sign Up
</button>

                                </form>
                            </div>

                            <a href="#" class="nav-link-item nav-link-item--newsletter">Manage Email Preferences</a>
                        </div>
                    </li>
                    <li class="nav-list-item">
                        <span class="nav-link-item--title">WhatsOnStage</span>
                        <ul class="footer-nav__list footer-nav__list--secondary">
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">About Us</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Contact Us</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Jobs</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Advertising</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Submit Your Listing</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
            <div class="footer-social">
                <div class="social">
                    <ul class="social__list" aria-label="Social network profiles">
                        <li class="social-list-item">
                            <a href="#facebook-url">
                                <svg class="icon icon--facebook">
  <use xlink:href="/assets/icons/sprite-sheet.svg#facebook"></use>
</svg>
                                <span class="visually-hidden">Facebook</span>
                            </a>
                        </li>
                        <li class="social-list-item">
                            <a href="#twitter-url">
                                <svg class="icon icon--twitter">
  <use xlink:href="/assets/icons/sprite-sheet.svg#twitter"></use>
</svg>
                                <span class="visually-hidden">Twitter</span>
                            </a>
                        </li>
                        <li class="social-list-item">
                            <a href="#youtube-url">
                                <svg class="icon icon--youtube">
  <use xlink:href="/assets/icons/sprite-sheet.svg#youtube"></use>
</svg>
                                <span class="visually-hidden">YouTube</span>
                            </a>
                        </li>
                        <li class="social-list-item">
                            <a href="#instagram-url">
                                <svg class="icon icon--instagram">
  <use xlink:href="/assets/icons/sprite-sheet.svg#instagram"></use>
</svg>
                                <span class="visually-hidden">Instagram</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-tos">
        <div class="contain">
            <p class="footer-tos-copy">By providing information about entertainment and cultural events on this site, WhatsOnStage.com shall not be deemed to endorse, recommend, approve and/or guarantee such events, or any facts, views, advice and/or information contained therein.</p>
            <p class="footer-tos-copy">
                ©1999-2017 WhatsOnStage.com, Inc. All Rights Reserved.
                <a href="#" class="nav-link-item">Terms of Use</a> &amp; <a href="#" class="nav-link-item">Privacy Policy</a>
            </p>
        </div>
    </div>
</footer>
 
<footer class="footer">
  <div class="footer-main contain">
    <div class="footer-logo">
      <a href="#">
        {{#if theatermania}}
          {{render '@logos--tm-no-tag-white'}}
        {{else}}
          {{render '@logos--wos-standard'}}
        {{/if}}
      </a>
    </div>
    <div class="footer-nav-items">
      <nav class="footer-nav">
        <ul class="footer-nav__list">
          {{#each nav-items}}
            <li class="nav-list-item{{#if newsletter}} nav-list-item--newsletter{{/if}}">
              {{#if text}}
                <span class="nav-link-item--title">{{nav-item}}</span>
              {{/if}}
              {{#if link}}
                <a href="#" class="nav-link-item">{{nav-item}}</a>
              {{/if}}
              {{#if secondary-nav-items}}
                <ul class="footer-nav__list footer-nav__list--secondary">
                  {{#each secondary-nav-items}}
                  <li class="nav-list-item">
                    <a href="#" class="nav-link-item">{{nav-item}}</a>
                  </li>
                  {{/each}}
                </ul>
              {{/if}}
              {{#if newsletter}}
              <div class="nav-newsletter">
                {{render '@newsletter' modifiers merge=true}}
                <a href="#" class="nav-link-item nav-link-item--newsletter">{{newsletter-copy}}</a>
              </div>
              {{/if}}
            </li>
          {{/each}}
        </ul>
      </nav>
      <div class="footer-social">
        {{render '@social'}}
      </div>
    </div>
  </div>
  <div class="footer-tos">
    <div class="contain">
      <p class="footer-tos-copy">{{tos}}</p>
      <p class="footer-tos-copy">
        {{copyright}}
        <a href="#" class="nav-link-item">{{terms-link}}</a> &amp; <a href="#" class="nav-link-item">{{privacy-link}}</a>
      </p>
    </div>
  </div>
</footer>
 
{
  "theatermania": null,
  "nav-items": [
    {
      "nav-item": "Tickets & Discounts",
      "text": true,
      "secondary-nav-items": [
        {
          "nav-item": "London Theater"
        },
        {
          "nav-item": "Dublin Theater"
        },
        {
          "nav-item": "Glasgow Theater"
        },
        {
          "nav-item": "Bath Theater"
        },
        {
          "nav-item": "Birmingham Theater"
        },
        {
          "nav-item": "Chichester Theater"
        },
        {
          "nav-item": "Edinburgh Theater"
        },
        {
          "nav-item": "Leeds Theater"
        },
        {
          "nav-item": "Liverpool Theater"
        },
        {
          "nav-item": "Manchester Theater"
        },
        {
          "nav-item": "Stratford-Upon-Avon Theater"
        },
        {
          "nav-item": "See All Cities"
        }
      ]
    },
    {
      "nav-item": "News & Reviews",
      "url": "#nav-link",
      "link": true
    },
    {
      "nav-item": "Theater Clubs",
      "text": true,
      "secondary-nav-items": [
        {
          "nav-item": "London"
        },
        {
          "nav-item": "Boston"
        },
        {
          "nav-item": "New York"
        }
      ]
    },
    {
      "nav-item": "Newsletter",
      "text": true,
      "newsletter": true,
      "newsletter-copy": "Manage Email Preferences",
      "modifiers": {
        "theatermania": null,
        "emailModifiers": {
          "label": true,
          "input-id": "footer-email",
          "modifiers": {
            "hidden-class": "visually-hidden",
            "id": "footer-email"
          }
        }
      }
    },
    {
      "nav-item": "WhatsOnStage",
      "text": true,
      "secondary-nav-items": [
        {
          "nav-item": "About Us"
        },
        {
          "nav-item": "Contact Us"
        },
        {
          "nav-item": "Jobs"
        },
        {
          "nav-item": "Advertising"
        },
        {
          "nav-item": "Submit Your Listing"
        }
      ]
    }
  ],
  "tos": "By providing information about entertainment and cultural events on this site, WhatsOnStage.com shall not be deemed to endorse, recommend, approve and/or guarantee such events, or any facts, views, advice and/or information contained therein.",
  "copyright": "©1999-2017 WhatsOnStage.com, Inc. All Rights Reserved.",
  "terms-link": "Terms of Use",
  "privacy-link": "Privacy Policy",
  "label": "Menu",
  "wos": true
}
  • Content: 
    .footer {
  position: relative;
  background: $color-footer;
  color: $color-white;
  border-radius: $border-radius $border-radius 0 0;

  .nav-link-item {
    color: $color-white;
  }
}

.footer-main {
  padding: 1.5rem;
}

.footer-logo {
  margin-bottom: 0.75rem;
  width: 12.5rem;
}

.footer-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;

  @include breakpoint($break-medium) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  @include breakpoint($break-xlarge) {
    flex-wrap: nowrap;
  }
}

.nav-list-item {
  .footer-nav__list & {
    padding: 0.5rem 0;
    border-bottom: 1px solid $color-footer-border;

    @include breakpoint($break-medium) {
      flex: 0 1 100%;
      margin: 1rem 0 0;
      padding-bottom: 1.5rem;
    }

    @include breakpoint($break-xlarge) {
      max-width: 18%;
      padding: 0 1.5rem;
      box-sizing: border-box;
      border-bottom: none;
      border-right: 1px solid $color-footer-border;

      &:first-child {
        padding-left: 0;
      }

      &:nth-child(5n) {
        border-right: none;
      }
    }
  }

  .footer-nav__list--secondary & {
    margin: 0;
    padding: 0;
    border-bottom: none;
    border-right: none;

    @include breakpoint($break-medium) {
      flex: 0 1 50%;
      margin-bottom: 1rem;

      &:last-child {
        margin-bottom: 0;
      }
    }

    @include breakpoint($break-xlarge) {
      flex: 1 1 auto;
      max-width: 100%;

      &:last-child {
        margin-bottom: 1.75rem;
      }
    }
  }
}

.nav-newsletter {
  .footer-nav__list & {
    margin-top: 0.75rem;
    max-width: none;

    @include breakpoint($break-medium) {
      margin-top: 1.25rem;
    }

    @include breakpoint($break-xlarge) {
      flex: 0 1 100%;
      max-width: 100%;
    }
  }
}

.nav-list-item--newsletter {
  .footer-nav__list & {
    @include breakpoint($break-xlarge) {
      max-width: 28%;
    }

    .btn {
      float: none;
      margin-top: 0.25rem;
    }

    .input {
      padding: 0.5rem 0.63rem;
      font-size: $ms-neg-1;
    }
  }
}

.nav-link-item--newsletter {
  .footer-nav__list & {
    margin-top: 0.75rem;
    font-size: $ms-neg-1;

    @include breakpoint($break-medium) {
      margin-top: 1.25rem;
    }
  }
}

.nav-link-item {
  .footer-nav__list & {
    line-height: 1;
    font-weight: $font-bold;
    color: $color-white;

    &:hover {
      color: $color-white;
    }
  }

  .footer-tos & {
    display: inline;
    color: $color-white;
    font-weight: $font-bold;
  }
}

.nav-link-item--title {
  display: block;
  line-height: 1;
  font-family: $font-title;
  font-weight: 700;
  color: $color-gray-lighter;

  .footer-nav__list & {
    margin: 1rem 0 0.5rem;

    @include breakpoint($break-medium) {
      margin: 0 0 1.5rem;
    }
  }
}

.newsletter-form {
  .footer-nav__list & {
    @include breakpoint($break-xlarge) {
      margin-top: -0.19rem;
    }
  }
}

.form-input {
  .footer-nav__list & {
    color: $color-gray-lighter;

    @include breakpoint($break-medium) {
      width: 50%;
    }

    @include breakpoint($break-xlarge) {
      width: 100%;
    }
  }
}

.footer-nav__list--secondary {
  margin-top: 0;

  @include breakpoint($break-xlarge) {
    flex-direction: column;
  }

  .nav-link-item {
    line-height: 1.6;
    font-size: $ms-neg-1;
    font-weight: $font-normal;
  }
}

.social {
  .footer-social & {
    margin-bottom: 0;
  }
}

.social__list {
  .footer-social & {
    margin-top: 1.5rem;

    @include breakpoint($break-medium) {
      justify-content: flex-start;
    }

    @include breakpoint($break-large) {
      justify-content: flex-end;
      margin-top: 0;
      padding-top: 1.5rem;
    }

    @include breakpoint($break-xlarge) {
      border-top: 1px solid $color-footer-border;
    }
  }
}

.icon {
  .footer-social .social__list & {
    width: 1.5rem;
    height: 1.5rem;
    fill: $color-white;

    &:hover {
      fill: $color-white;
    }
  }
}

.footer-tos {
  padding: 1.5rem;
  background: $color-footer-dark;
  color: $color-white;
}

.footer-tos-copy {
  .footer-tos & {
    font-size: $ms-neg-1;
  }
}

.contain {
  .footer-tos & {
    padding: 0;
  }
}

.footer-nav__list {
  .newsletter-error {
    .icon--error {
      stroke: $color-white;
      fill: none;
    }
  }

  .newsletter-confirmation {
    text-align: left;

    a {
      color: $color-white;
    }
  }

  .input-error {
    color: $color-white;
  }
}
  • URL: /components/raw/footer/Footer.scss
  • Filesystem Path: src/components/02-Patterns/Footer/Footer.scss
  • Size: 4.5 KB

There are no notes for this item.