Davidson Styleguide

Social Media Links: Default 

<div class="social-media-links ">
    <ul class="">

        <li>
            <a class="icon-link " href="https://www.facebook.com"><span class="icon "><span class="icon__glyph ic ic--facebook" aria-hidden="true"></span><span class="icon__label">Facebook</span></span></a>
        </li>

        <li>
            <a class="icon-link " href="https://www.twitter.com"><span class="icon "><span class="icon__glyph ic ic--twitter" aria-hidden="true"></span><span class="icon__label">Twitter</span></span></a>
        </li>

        <li>
            <a class="icon-link " href="https://www.instagram.com"><span class="icon "><span class="icon__glyph ic ic--instagram" aria-hidden="true"></span><span class="icon__label">Instagram</span></span></a>
        </li>

        <li>
            <a class="icon-link " href="https://www.youtube.com"><span class="icon "><span class="icon__glyph ic ic--youtube" aria-hidden="true"></span><span class="icon__label">YouTube</span></span></a>
        </li>

        <li>
            <a class="icon-link " href="https://www.snapchat.com"><span class="icon "><span class="icon__glyph ic ic--snapchat" aria-hidden="true"></span><span class="icon__label">Snapchat</span></span></a>
        </li>
    </ul>
</div>
 
<div class="social-media-links {{ social_media_links.variant }}">
  <ul class="{{ ul.variant }}">
    {% for item in social_media_links.items %}  
      <li>
        {% include '@icon-link' with { icon: item.icon, link: item.link } %}
      </li>
    {% endfor %}
  </ul>
</div>
 
{
  "social_media_links": {
    "items": [
      {
        "icon": {
          "glyph": "ic--facebook",
          "label": "Facebook"
        },
        "link": {
          "url": "https://www.facebook.com"
        }
      },
      {
        "icon": {
          "glyph": "ic--twitter",
          "label": "Twitter"
        },
        "link": {
          "url": "https://www.twitter.com"
        }
      },
      {
        "icon": {
          "glyph": "ic--instagram",
          "label": "Instagram"
        },
        "link": {
          "url": "https://www.instagram.com"
        }
      },
      {
        "icon": {
          "glyph": "ic--youtube",
          "label": "YouTube"
        },
        "link": {
          "url": "https://www.youtube.com"
        }
      },
      {
        "icon": {
          "glyph": "ic--snapchat",
          "label": "Snapchat"
        },
        "link": {
          "url": "https://www.snapchat.com"
        }
      }
    ]
  }
}
  • Content: 
    .social-media-links {
  ul {
    @include clean;
    li {
      @include rr-font-compute(r, medium);
    }
  }

  &.social-media-links--row {
    ul {
      li {
        display: inline;
        @include rr-font-compute(2xl, wide);
      }
    }
    .icon-link {
      @include icon-link-hidden-label;
    }
  }
}

.social-media-links--platforms {
  li {
    &:not(last-child) {
      padding-right: 1rem;
    }
    a {
      text-decoration: none;
    }
  }
}

// hover to network color
.social-media-links {
  &.social-media-links--row,
  &.social-media-links--platforms {
     .ic--facebook,
     .facebook {
       &:hover {
         color: color(facebook);
       }
     }
     .ic--twitter,
     .twitter {
       &:hover {
         color: color(twitter);
       }
     }
     .ic--linkedin,
     .linkedin {
       &:hover {
         color: color(linkedin);
       }
     }
     .ic--instagram,
     .instagram {
       &:hover {
         color: color(instagram);
       }
     }
     .ic--youtube,
     .youtube {
       &:hover {
         color: color(youtube);
       }
     }
     .ic--pinterest,
     .pinterest {
       &:hover {
         color: color(pinterest);
       }
     }
     .ic--flickr,
     .flickr {
       &:hover {
         color: color(flickr);
       }
     }
     .ic--snapchat,
     .snapchat {
       &:hover {
         color: color(snapchat);
       }
     }
  }
}
  • URL: /components/raw/social-media-links/social-media-links.scss
  • Filesystem Path: patterns/molecules/navigation/social-media-links/social-media-links.scss
  • Size: 1.4 KB

There are no notes for this item.