Social share

Default social share

HTML


<div class="orc-c-social-share">

  <h3 class="orc-c-social-share__title">Heading ipsum dolor sit (39 characters)</h3>

  <ul class="orc-c-social-share__list">

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

      <a href="https:&#x2F;&#x2F;www.facebook.com&#x2F;TheCosmopolitan" class="orc-c-social-share__link">
                <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-share__link-->

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

      <a href="https:&#x2F;&#x2F;twitter.com&#x2F;Cosmopolitan_LV" class="orc-c-social-share__link">
                <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-share__link-->

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

      <a href="https:&#x2F;&#x2F;www.pinterest.com&#x2F;lvcosmopolitan&#x2F;" class="orc-c-social-share__link">
                <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#pinterest"></use>
</svg><!--end orc-c-icon-->

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

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

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

</div>
<!--end orc-c-social-share-->

When to use

When we publish original content, such as a 52 Stories article. We don’t need to include the social share on our evergreen pages, like room types or entertainment venues.

When to consider an alternative

More often than not, we want to link to our own social media accounts via the social nav rather than giving our users the job of promoting our content for us.

Class Name	Description
`orc-c-social-share` Required	Apply to the social share’s containing HTML element. This helps to layout the title and the list within this component.
`orc-c-social-share__title` Required	Apply to `h3` tag to represent the headline for the social share list.
`orc-c-social-share__list` Required	Apply to `ul` tag to represent the list of social media items.
`orc-c-social-share__item` Required	Apply to each `li` tag within the `orc-c-social-share__list` to represent each social media list item
`orc-c-social-share__link` Required	Apply to the `a` tag within each `orc-c-social-share__item`. This will link elsewhere or give the user the ability to share content to social media.
`orc-c-icon` Required	Base icon class used for icons within the design system.
`orc-c-social-share__icon` Required	Apply in addition to the `orc-c-icon` class to style this icon specifically for the social share.

Usage

When to use

When to consider an alternative