# Share Section

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <section class="share-section">
        <span class="icon icon-arrow-long-down icon--brand-secondary"></span>
        <h3 class="share-section__heading">Share on</h3>
        <ul class="share-section__list">
            <li>
                <a class="share-section__link" target="_blank" href="" title="Facebook">
                    <span class="icon icon-facebook icon--brand-secondary"></span>
                </a>
            </li>
            <li>
                <a class="share-section__link" target="_blank" href="" title="Twitter">
                    <span class="icon icon-twitter icon--brand-secondary"></span>
                </a>
            </li>
            <li>
                <a class="share-section__link" href="">
                    <span class="icon icon-email icon--brand-secondary" title="Email"></span>
                </a>
            </li>
        </ul>
    </section>

`
`

    <section class="share-section">
        <span class="icon icon-arrow-long-down icon--brand-secondary"></span>
        <h3 class="share-section__heading">Share on</h3>
        <ul class="share-section__list">
            <li>
                <a class="share-section__link" target="_blank" href="" title="Facebook">
                    <span class="icon icon-facebook icon--brand-secondary"></span>
                </a>
            </li>
            <li>
                <a class="share-section__link" target="_blank" href="" title="Twitter">
                    <span class="icon icon-twitter icon--brand-secondary"></span>
                </a>
            </li>
            <li>
                <a class="share-section__link" href="">
                    <span class="icon icon-email icon--brand-secondary" title="Email"></span>
                </a>
            </li>
        </ul>
    </section>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      .share-section {
        @extend %container-vertical-spacing-xl;

        margin: 0 auto;
        text-align: center;

        > * + * {
          margin-top: $spacer-sm;
        }

        .icon-arrow-long-down {
          transition: $transform-transition;
        }

        &:hover {
          .icon-arrow-long-down {
            transform: translateY($spacer-xs);
          }
        }
      }

      .share-section__heading {
        font-size: $font-size-lg;
        color: $sharing-headline-color;
      }

      .share-section__list {
        @extend %list-unstyled;

        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
      }

      .share-section__link {
        @extend %heading-font-bold;
        @extend %link-unstyled;

        padding: $spacer-sm;

        .icon {
          transition: standard-transition(background-color);

          &:hover,
          &:focus {
            background-color: $sharing-interaction-color;
          }
        }
      }

  `
- URL: /components/raw/share-section/_share-section.scss
- Filesystem Path: components/04-molecules/share-section/_share-section.scss
- Size: 780 Bytes

- Handle: @share-section
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/04-molecules/share-section/share-section.html

No notes defined.