VGR Styleguide

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.