Footer

Default footer

HTML


<footer class="orc-c-footer " role="contentinfo">

  <section class="orc-c-section orc-c-section--netting orc-c-section--centered orc-u-margin-bottom-none">

    <div class="orc-c-section__inner orc-l-container">

      <header class="orc-c-section__header orc-u-margin-bottom">


        <h2 class="orc-c-section__title">Earn points in your sleep</h2>






      </header>
      <!--end orc-c-section__header-->


      <div class="orc-c-section__body">

        <div class="orc-c-text-passage orc-u-margin-bottom">

          Enjoy an exclusive Identity rate whenever you stay.

        </div>
        <!--end orc-c-text-passage-->


        <button class="orc-c-btn ">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Book a Room</span>




    </div><!--end orc-c-btn__inner-->

</button>
        <!-- end orc-c-btn -->


        <div class="orc-c-text-passage orc-u-text-uppercase orc-u-margin-top">

          or <a href='#'>call 702.698.7575</a>

        </div>
        <!--end orc-c-text-passage-->


      </div>
      <!--end orc-c-section__body"-->

    </div>
    <!--end orc-c-section__inner-->

  </section>
  <!--end orc-c-section-->

  <div class="orc-c-footer__inner orc-l-container" itemscope itemtype="https://schema.org/Hotel">

    <h2 class="orc-c-footer__tagline">Be Strange But Not a Stranger</h2>

    <button class="orc-c-btn orc-c-btn--bare orc-c-btn--center orc-c-footer__btn orc-js-expand-btn orc-u-margin-bottom">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Contact Us</span>

        <svg class="orc-c-btn__icon ">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#plus"></use>
        </svg>



    </div><!--end orc-c-btn__inner-->

</button>
    <!-- end orc-c-btn -->



    <div class="orc-c-footer__top">
      <div class="orc-c-footer__extension">
        <div class="orc-c-footer__left">
          <div class="orc-c-avatar-block orc-c-avatar-block--dark orc-u-margin-bottom-large">

            <div class="orc-c-avatar-block__header">

              <img class="orc-c-avatar-block__img orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;desiree_mullen.png" alt="" />

              <p class="orc-c-avatar-block__meta">Your Host</p>

              <h3 class="orc-c-avatar-block__title">
                Desiree Mullen
              </h3>
              <p class="orc-c-avatar-block__position">Casino executive</p>

            </div>
            <!--end orc-c-avatar-block__header-->

            <div class="orc-c-avatar-block__body">
              <p class="orc-c-avatar-block__excerpt">How can I make your stay sensational? Get in touch.</p>

              <a href="tel:555:555-1212" class="orc-c-avatar-block__phone tel">555-555-1212</a>

              <a href="mailto:d.mullen@cosmopolitanlasvegas.com" class="orc-c-avatar-block__email email">d.mullen@cosmopolitanlasvegas.com</a>
            </div>
            <!--end orc-c-avatar-block__body-->

          </div>
          <!--end orc-c-avatar-block-->


          <dl class="orc-c-definition-list ">

            <div class="orc-c-definition-list__item">

              <dt class="orc-c-definition-list__term">
            Identity VIP Gold Line
        </dt>
              <!--end orc-c-definition-list__term-->

              <dd class="orc-c-definition-list__description">

                <ul class="orc-c-horizontal-list orc-c-horizontal-list--center orc-c-horizontal-list--light">

                  <li class="orc-c-horizontal-list__item">

                    <a href="#" class="orc-c-horizontal-list__link">

            <span class="orc-c-horizontal-list__link-text">555.555.1212</span>

        </a>
                    <!--end orc-c-horizontal-list__link-->

                  </li>
                  <!--end orc-c-horizontal-list__item-->

                </ul>
                <!--end orc-c-horizontal-list-->


              </dd>
              <!--end orc-c-definition-list__description-->

            </div>
            <!--end orc-c-definition-list__item-->

          </dl>
          <!--end orc-c-definition-list-->


        </div>
        <!--end orc-c-footer__left-->

        <div class="orc-c-footer__middle">
          <dl class="orc-c-definition-list orc-c-definition-list--lined">

            <div class="orc-c-definition-list__item">

              <dt class="orc-c-definition-list__term">
            Rose: your digital concierge
        </dt>
              <!--end orc-c-definition-list__term-->

              <dd class="orc-c-definition-list__description">
                Text your desires to <a href='#'>555.555.1212</a>



              </dd>
              <!--end orc-c-definition-list__description-->

            </div>
            <!--end orc-c-definition-list__item-->
            <div class="orc-c-definition-list__item">

              <dt class="orc-c-definition-list__term">
            Identity Membership &amp; Rewards
        </dt>
              <!--end orc-c-definition-list__term-->

              <dd class="orc-c-definition-list__description">

                <ul class="orc-c-horizontal-list orc-c-horizontal-list--center orc-c-horizontal-list--light">

                  <li class="orc-c-horizontal-list__item">

                    <a href="#" class="orc-c-horizontal-list__link">

            <span class="orc-c-horizontal-list__link-text">877.551.7779</span>

        </a>
                    <!--end orc-c-horizontal-list__link-->

                  </li>
                  <!--end orc-c-horizontal-list__item-->
                  <li class="orc-c-horizontal-list__item">

                    <a href="#" class="orc-c-horizontal-list__link">

            <span class="orc-c-horizontal-list__link-text">Email us</span>

        </a>
                    <!--end orc-c-horizontal-list__link-->

                  </li>
                  <!--end orc-c-horizontal-list__item-->

                </ul>
                <!--end orc-c-horizontal-list-->


              </dd>
              <!--end orc-c-definition-list__description-->

            </div>
            <!--end orc-c-definition-list__item-->
            <div class="orc-c-definition-list__item">

              <dt class="orc-c-definition-list__term">
            Questions about your stay?
        </dt>
              <!--end orc-c-definition-list__term-->

              <dd class="orc-c-definition-list__description">

                <ul class="orc-c-horizontal-list orc-c-horizontal-list--center orc-c-horizontal-list--light">

                  <li class="orc-c-horizontal-list__item">

                    <a href="#" class="orc-c-horizontal-list__link">

            <span class="orc-c-horizontal-list__link-text">702.698.7000</span>

        </a>
                    <!--end orc-c-horizontal-list__link-->

                  </li>
                  <!--end orc-c-horizontal-list__item-->
                  <li class="orc-c-horizontal-list__item">

                    <a href="#" class="orc-c-horizontal-list__link">

            <span class="orc-c-horizontal-list__link-text">Email us</span>

        </a>
                    <!--end orc-c-horizontal-list__link-->

                  </li>
                  <!--end orc-c-horizontal-list__item-->

                </ul>
                <!--end orc-c-horizontal-list-->


              </dd>
              <!--end orc-c-definition-list__description-->

            </div>
            <!--end orc-c-definition-list__item-->
            <div class="orc-c-definition-list__item">

              <dt class="orc-c-definition-list__term">
            Reservations
        </dt>
              <!--end orc-c-definition-list__term-->

              <dd class="orc-c-definition-list__description">

                <ul class="orc-c-horizontal-list orc-c-horizontal-list--center orc-c-horizontal-list--light">

                  <li class="orc-c-horizontal-list__item">

                    <a href="#" class="orc-c-horizontal-list__link">

            <span class="orc-c-horizontal-list__link-text"itemprop="telephone">702-698-7575</span>

        </a>
                    <!--end orc-c-horizontal-list__link-->

                  </li>
                  <!--end orc-c-horizontal-list__item-->
                  <li class="orc-c-horizontal-list__item">

                    <a href="mailto:REPLACEME@test.com" class="orc-c-horizontal-list__link">

            <span class="orc-c-horizontal-list__link-text">Email us</span>

        </a>
                    <!--end orc-c-horizontal-list__link-->

                  </li>
                  <!--end orc-c-horizontal-list__item-->

                </ul>
                <!--end orc-c-horizontal-list-->


              </dd>
              <!--end orc-c-definition-list__description-->

            </div>
            <!--end orc-c-definition-list__item-->

          </dl>
          <!--end orc-c-definition-list-->

        </div>
        <!--end orc-c-footer__middle-->

      </div>
      <!--end orc-c-footer__extension-->

      <div class="orc-c-footer__right">
        <h3 class="orc-c-footer__heading">Connect with Us</h3>
        <ul class="orc-c-social-nav">

          <li class="orc-c-social-nav__item">

            <a href="https:&#x2F;&#x2F;www.facebook.com&#x2F;TheCosmopolitan" class="orc-c-social-nav__link" title="Facebook">
            <svg class="orc-c-icon orc-c-social-nav__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#facebook"></use>
</svg><!--end orc-c-icon-->

        </a>
            <!--end orc-c-social-nav__link-->

          </li>
          <!--end orc-c-social-nav__item-->
          <li class="orc-c-social-nav__item">

            <a href="https:&#x2F;&#x2F;www.instagram.com&#x2F;cosmopolitan_lv&#x2F;" class="orc-c-social-nav__link" title="Instagram">
            <svg class="orc-c-icon orc-c-social-nav__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#instagram"></use>
</svg><!--end orc-c-icon-->

        </a>
            <!--end orc-c-social-nav__link-->

          </li>
          <!--end orc-c-social-nav__item-->
          <li class="orc-c-social-nav__item">

            <a href="https:&#x2F;&#x2F;twitter.com&#x2F;Cosmopolitan_LV" class="orc-c-social-nav__link" title="Twitter">
            <svg class="orc-c-icon orc-c-social-nav__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#twitter"></use>
</svg><!--end orc-c-icon-->

        </a>
            <!--end orc-c-social-nav__link-->

          </li>
          <!--end orc-c-social-nav__item-->
          <li class="orc-c-social-nav__item">

            <a href="&#x2F;snapchat" class="orc-c-social-nav__link" title="Snapchat">
            <svg class="orc-c-icon orc-c-social-nav__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#snapchat"></use>
</svg><!--end orc-c-icon-->

        </a>
            <!--end orc-c-social-nav__link-->

          </li>
          <!--end orc-c-social-nav__item-->
          <li class="orc-c-social-nav__item">

            <a href="https:&#x2F;&#x2F;www.tripadvisor.com&#x2F;Hotel_Review-g45963-d1829539-Reviews-The_Cosmopolitan_of_Las_Vegas_Autograph_Collection-Las_Vegas_Nevada.html" class="orc-c-social-nav__link" title="TripAdvisor">
            <svg class="orc-c-icon orc-c-social-nav__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#tripadvisor"></use>
</svg><!--end orc-c-icon-->

        </a>
            <!--end orc-c-social-nav__link-->

          </li>
          <!--end orc-c-social-nav__item-->
          <li class="orc-c-social-nav__item">

            <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;user&#x2F;TheCosmopolitanLV" class="orc-c-social-nav__link" title="YouTube">
            <svg class="orc-c-icon orc-c-social-nav__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#youtube"></use>
</svg><!--end orc-c-icon-->

        </a>
            <!--end orc-c-social-nav__link-->

          </li>
          <!--end orc-c-social-nav__item-->

        </ul>
        <!--end orc-c-social-nav-->


        <div class="vcard orc-c-footer__address orc-u-margin-bottom-large">
          <span class="orc-u-text-uppercase org" itemprop="name">The Cosmopolitan Las Vegas</span>
          <address class="orc-c-address adr " itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    
    <div class="orc-c-address__street street-address" itemprop="streetAddress">3708 Las Vegas Boulevard South</div>
    <span class=" orc-c-address__location locality" itemprop="addressLocality">Las Vegas</span>,
    <abbr class="orc-c-address__state region" title="Nevada" itemprop="addressRegion">NV</abbr>&nbsp;
    <span class="orc-c-address__zip postal-code" itemprop="postalCode">89109</span>

</address>
          <!--end orc-c-address-->

          <a href="https:&#x2F;&#x2F;www.cosmopolitanlasvegas.com&#x2F;" class="orc-u-is-hidden url orc-c-footer__url">https:&#x2F;&#x2F;www.cosmopolitanlasvegas.com&#x2F;</a>
          <div class="orc-u-is-hidden" itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
            <img itemprop="url" src="photo.jpg" alt="The Cosmopolitan Las Vegas" />
          </div>
        </div>
        <h3 class="orc-c-footer__heading">Find Your Way</h3>
        <ul class="orc-c-horizontal-list orc-c-horizontal-list--center orc-c-horizontal-list--light">

          <li class="orc-c-horizontal-list__item">

            <a href="#" class="orc-c-horizontal-list__link">

            <span class="orc-c-horizontal-list__link-text">Resort Maps</span>

        </a>
            <!--end orc-c-horizontal-list__link-->

          </li>
          <!--end orc-c-horizontal-list__item-->
          <li class="orc-c-horizontal-list__item">

            <a href="#" class="orc-c-horizontal-list__link">

            <span class="orc-c-horizontal-list__link-text">Parking</span>

        </a>
            <!--end orc-c-horizontal-list__link-->

          </li>
          <!--end orc-c-horizontal-list__item-->
          <li class="orc-c-horizontal-list__item">

            <a href="#" class="orc-c-horizontal-list__link">

            <span class="orc-c-horizontal-list__link-text">Lost &amp; Found</span>

        </a>
            <!--end orc-c-horizontal-list__link-->

          </li>
          <!--end orc-c-horizontal-list__item-->
          <li class="orc-c-horizontal-list__item">

            <a href="#" class="orc-c-horizontal-list__link">

            <span class="orc-c-horizontal-list__link-text">FAQs</span>

        </a>
            <!--end orc-c-horizontal-list__link-->

          </li>
          <!--end orc-c-horizontal-list__item-->

        </ul>
        <!--end orc-c-horizontal-list-->


      </div>
      <!--end orc-c-footer__right-->

    </div>
    <!--end orc-c-footer__top-->

    <div class="orc-c-footer__bottom">

      <div class="orc-c-footer__info">
        <p class="orc-c-footer__copyright">Copyright © 2018 The Cosmopolitan Las Vegas. All rights reserved.</p>
      </div>
      <!--end orc-c-footer__info-->

      <nav class="orc-c-footer-nav" role="navigation">

        <ul class="orc-c-footer-nav__list">

          <li class="orc-c-footer-nav__item">
            <a href="&#x2F;patterns&#x2F;04-pages-15-gift-cards&#x2F;04-pages-15-gift-cards.rendered.html" class="orc-c-footer-nav__link">Gift Cards</a>
          </li>
          <!--end orc-c-footer-nav__item-->
          <li class="orc-c-footer-nav__item">
            <a href="#" class="orc-c-footer-nav__link">Careers</a>
          </li>
          <!--end orc-c-footer-nav__item-->
          <li class="orc-c-footer-nav__item">
            <a href="#" class="orc-c-footer-nav__link">Responsible Gaming</a>
          </li>
          <!--end orc-c-footer-nav__item-->
          <li class="orc-c-footer-nav__item">
            <a href="#" class="orc-c-footer-nav__link">Terms &amp; Conditions</a>
          </li>
          <!--end orc-c-footer-nav__item-->
          <li class="orc-c-footer-nav__item">
            <a href="link.pages-faq" class="orc-c-footer-nav__link">Privacy Policy</a>
          </li>
          <!--end orc-c-footer-nav__item-->

        </ul>
        <!--end orc-c-footer-nav__list-->

      </nav>
      <!--end orc-c-footer-nav-->


    </div>
    <!--end orc-c-footer__bottom-->

  </div>
  <!--end orc-c-footer__inner-->

</footer>
<!--end orc-c-footer-->

When to use

Always include some variation of this footer at page bottom. Users expect to find contact information and other ways to connect at the foot of a page.

When to consider an alternative

If it’s not for the bottom of a page, the footer isn’t it. The footer includes contact information, but on other areas of a page, an avatar block or contact form is what you want.

Class Name	Description
`orc-c-footer` Required	Apply to the footer’s containing HTML element. Used to provide the base styles and target elements that live inside.
`orc-c-section`	Apply to the section within the `<footer>` to create the prefooter. This section is optional.
`orc-c-section--netting`	Apply to the prefooter section to add the netting background.
`orc-c-section--centered`	Apply to the prefooter section to center the content within.
`orc-u-margin-bottom-none`	Apply to the prefooter section to remove bottom margin from the section.
`orc-u-margin-bottom-none`	Apply to the prefooter section to remove bottom margin from the section.
`orc-c-section__header`	Added within the prefooter to headline the section. See section header for class explanations for this component.
`orc-c-section__body`	Added within the prefooter section to wrap the content below the section header.
`orc-c-text-passage`	Used within the prefooter to add additional text to the section header. See the text passage component for additonal class explanations for this component.
`orc-c-btn`	Used within the prefooter to add a call to action. See the button for more about this component.
`orc-c-footer__inner` Required	The inner container of the footer that is placed after the optional prefooter. This helps to provide the layout for the footer content.
`orc-l-container`	Added to `orc-c-footer__inner` to cap the footer content and align it with the main content on the page.
`orc-c-footer__tagline`	Used to highlight the tagline of the footer.
`orc-c-footer__btn`	Added to the button that expands hidden footer content on smaller screens.
`orc-js-expand-btn`	Added to `orc-c-footer__btn` for JS to target this button to expand the hidden footer content and remove the button on smaller screens.
`orc-c-footer__top` Required	Added to the container of content that sits at the top of the footer on small screens.
`orc-c-footer__extension` Required	Added to the container of content that is hidden on small screens until the `orc-js-expand-btn` is triggered. This is visible on large screens.
`orc-c-footer__left` Required	Added to the container of content that sits on the left side of the footer on large screens.
`orc-c-avatar-block`	Used for the avatar within the footer. See avatar block for more information about classes used in this component.
`orc-c-definition-list`	Used for the definition list within the footer. See definition list for more information about classes used in this component.
`orc-c-footer__middle` Required	Added to the container of content that sits in the middle of the footer on large screens.
`orc-c-footer__right` Required	Added to the container of content that sits on the right side of the footer on large screens.
`orc-c-footer__heading`	Applied to `<h3>` tag of the footer to label a section of the footer.
`orc-c-social-nav`	A list of icons used to navigate social media. See social nav for more information about classes used in this component.
`orc-c-footer__address`	Apply to the container of the footer address.
`vcard`	Added to `orc-c-footer__address` to add microformats to the contents within. See more information about mircroformats.
`orc-u-text-uppercase`	Forces text to transform to all uppercase.
`orc-c-address`	A block of text used to denote the address.
`orc-c-footer__url`	Used for a general link within the footer.
`orc-c-horizontal-list`	A side-by-side list of text links. See horizontal list for more information about classes used in this component.

Default footer `orc-c-footer`

Usage

When to use

When to consider an alternative