Social nav

Default social nav

HTML


<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-->

When to use

The social nav lives in the footer. Use this component to make changes to the accounts promoted in the footer.

When to consider an alternative

The social nav highlights The Cosmopolitan’s official accounts. When we publish original content, that may be a good opportunity to use the social share component to encourage users to share our content on their own accounts.

Class Name	Description
`orc-c-social-nav` Required	Apply to the social nav’s containing `ul` tag. This is set to `display: flex` to place social nav items side-by-side.
`orc-c-social-nav__item` Required	Apply to each `li` tag within the `orc-c-social-nav` unordered list.
`orc-c-social-nav__link` Required	Apply to the link within each social nav item to help format the icon within each item.
`orc-c-icon` Required	Base icon class used for icons within the design system.
`orc-c-social-nav__icon` Required	Apply in addition to the `orc-c-icon` class to style this icon specifically for the social nav.

Usage

When to use

When to consider an alternative