Share Links

<div class="vgr-share">
    <p id="sharelabel" class="vgr-share__label">Dela sidan via:</p>
    <ul class="vgr-share__list" aria-labelledby="sharelabel">

        <li class="vgr-share__list-item">
            <a href="/" class="vgr-share__list-item-link vgr-popup">
                <svg class="vgr-icon vgr-icon--facebook" aria-label="Facebook">
          <use xlink:href="../../icons/sprite/icons.svg#facebook"></use>
        </svg>
            </a>
        </li>

        <li class="vgr-share__list-item">
            <a href="/" class="vgr-share__list-item-link vgr-popup">
                <svg class="vgr-icon vgr-icon--twitter" aria-label="Twitter">
          <use xlink:href="../../icons/sprite/icons.svg#twitter"></use>
        </svg>
            </a>
        </li>

        <li class="vgr-share__list-item">
            <a href="/" class="vgr-share__list-item-link vgr-popup">
                <svg class="vgr-icon vgr-icon--linkedin" aria-label="Linkedin">
          <use xlink:href="../../icons/sprite/icons.svg#linkedin"></use>
        </svg>
            </a>
        </li>

        <li class="vgr-share__list-item">
            <a href="/" class="vgr-share__list-item-link vgr-popup">
                <svg class="vgr-icon vgr-icon--google" aria-label="Google+">
          <use xlink:href="../../icons/sprite/icons.svg#google"></use>
        </svg>
            </a>
        </li>

        <li class="vgr-share__list-item">
            <a href="/" class="vgr-share__list-item-link vgr-popup">
                <svg class="vgr-icon vgr-icon--pinterest" aria-label="Pinterest">
          <use xlink:href="../../icons/sprite/icons.svg#pinterest"></use>
        </svg>
            </a>
        </li>

        <li class="vgr-share__list-item">
            <a href="/" class="vgr-share__list-item-link vgr-popup">
                <svg class="vgr-icon vgr-icon--email" aria-label="E-post">
          <use xlink:href="../../icons/sprite/icons.svg#email"></use>
        </svg>
            </a>
        </li>

        <li class="vgr-share__list-item">
            <a href="/" class="vgr-share__list-item-link vgr-popup">
                <svg class="vgr-icon vgr-icon--print" aria-label="Skriv ut">
          <use xlink:href="../../icons/sprite/icons.svg#print"></use>
        </svg>
            </a>
        </li>

    </ul>
</div>
<div class="vgr-share">
  <p id="{{ id }}" class="vgr-share__label">{{ label }}</p>
  <ul class="vgr-share__list" aria-labelledby="{{ id }}">

    {% for item in items %}
    <li class="vgr-share__list-item">
      <a href="{{ item.url }}" class="vgr-share__list-item-link vgr-popup">
        <svg class="vgr-icon vgr-icon--{{ item.modifier }}"{% if item.labelText %} aria-label="{{ item.labelText }}"{% endif %}>
          <use xlink:href="{{ '/icons/sprite/icons.svg' | path }}#{{ item.modifier }}"></use>
        </svg>
      </a>
    </li>
    {% endfor %}

  </ul>
</div>
{
  "label": "Dela sidan via:",
  "id": "sharelabel",
  "items": [
    {
      "url": "/",
      "modifier": "facebook",
      "labelText": "Facebook"
    },
    {
      "url": "/",
      "modifier": "twitter",
      "labelText": "Twitter"
    },
    {
      "url": "/",
      "modifier": "linkedin",
      "labelText": "Linkedin"
    },
    {
      "url": "/",
      "modifier": "google",
      "labelText": "Google+"
    },
    {
      "url": "/",
      "modifier": "pinterest",
      "labelText": "Pinterest"
    },
    {
      "url": "/",
      "modifier": "email",
      "labelText": "E-post"
    },
    {
      "url": "/",
      "modifier": "print",
      "labelText": "Skriv ut"
    }
  ]
}
  • Content:
    .vgr-share {
      &__label {
        margin-top: 0;
        margin-bottom: 0;
        font-weight: 700;
      }
    
      &__list {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
      }
    
      &__list-item {
        padding-bottom: .5rem;
    
        &:not(last-child) {
          padding-right: .5rem;
        }
      }
    
      &__list-item-link {
        display: block;
      }
    
      .vgr-icon {
        width: 2rem;
        height: 2rem;
        vertical-align: top;
      }
    }
    
    
    $color-facebook: #3b5998;
    $color-twitter: #1da1f2;
    $color-linkedin: #0077b5;
    $color-google: #0077b5;
    $color-pinterest: #bd081c;
    $color-email: #639d3c;
    $color-print: #6b6e67;
    
    .vgr-share__list-item-link {
      .vgr-icon {
        transition: fill .3s ease-in-out;
    
        &--facebook {
          fill: $color-facebook;
    
          &:hover {
            fill: darken($color-facebook, 25%);
          }
        }
    
        &--twitter {
          fill: $color-twitter;
    
          &:hover {
            fill: darken($color-twitter, 25%);
          }
        }
    
        &--linkedin {
          fill: $color-linkedin;
    
          &:hover {
            fill: darken($color-linkedin, 25%);
          }
        }
    
        &--google {
          fill: $color-google;
    
          &:hover {
            fill: darken($color-google, 25%);
          }
        }
    
        &--pinterest {
          fill: $color-pinterest;
    
          &:hover {
            fill: darken($color-pinterest, 25%);
          }
        }
    
        &--email {
          fill: $color-email;
    
          &:hover {
            fill: darken($color-email, 25%);
          }
        }
    
        &--print {
          fill: $color-print;
    
          &:hover {
            fill: darken($color-print, 25%);
          }
        }
      }
    }
    
  • URL: /components/raw/share-links/_share-links.scss
  • Filesystem Path: components/share-links/_share-links.scss
  • Size: 1.5 KB

There are no notes for this item.