Tangible Pattern Library

Socials: Default 

<div class="c-socials">
    <ul class="c-socials__list">
        <li class="c-socials__list-item"><a href="#" aria-label="website">
                <svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
                    <use xlink:href="#icn-globe-24px"></use>
                </svg> </a>
        </li>
        <li class="c-socials__list-item"><a href="#" aria-label="facebook">
                <svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
                    <use xlink:href="#icn-facebook-f-24px"></use>
                </svg> </a>
        </li>
        <li class="c-socials__list-item"><a href="#" aria-label="instagram">
                <svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
                    <use xlink:href="#icn-instagram-24px"></use>
                </svg> </a>
        </li>
        <li class="c-socials__list-item"><a href="#" aria-label="linkedin">
                <svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
                    <use xlink:href="#icn-linkedin-in-24px"></use>
                </svg> </a>
        </li>
        <li class="c-socials__list-item"><a href="#" aria-label="twitter">
                <svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
                    <use xlink:href="#icn-twitter-24px"></use>
                </svg> </a>
        </li>
        <li class="c-socials__list-item"><a href="#" aria-label="dribble">
                <svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
                    <use xlink:href="#icn-dribbble-24px"></use>
                </svg> </a>
        </li>
        <li class="c-socials__list-item"><a href="#" aria-label="medium">
                <svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
                    <use xlink:href="#icn-medium-m-24px"></use>
                </svg> </a>
        </li>
        <li class="c-socials__list-item"><a href="#" aria-label="slideshare">
                <svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
                    <use xlink:href="#icn-slideshare-24px"></use>
                </svg> </a>
        </li>
    </ul>
</div>
 
<div class="c-socials{% if modifier is defined %} {{ modifier }}{% endif %}">
  <ul class="c-socials__list">
    {% for item in socialList %}
    <li class="c-socials__list-item">
      {%- set social = item.name|split('|') -%}
      <a href="{{ item.url }}" aria-label="{{social[0]}}">
        {% include "@icon" with {
          modifier: "c-icon--20",
          symbol: social[1]
        } %}
      </a>
    </li>
    {% endfor %}
  </ul>
</div>
 
{
  "socialList": [
    {
      "name": "website|icn-globe-24px",
      "url": "#"
    },
    {
      "name": "facebook|icn-facebook-f-24px",
      "url": "#"
    },
    {
      "name": "instagram|icn-instagram-24px",
      "url": "#"
    },
    {
      "name": "linkedin|icn-linkedin-in-24px",
      "url": "#"
    },
    {
      "name": "twitter|icn-twitter-24px",
      "url": "#"
    },
    {
      "name": "dribble|icn-dribbble-24px",
      "url": "#"
    },
    {
      "name": "medium|icn-medium-m-24px",
      "url": "#"
    },
    {
      "name": "slideshare|icn-slideshare-24px",
      "url": "#"
    }
  ]
}
  • Content: 
    .c-socials__list {
  display: flex;
  list-style: none;
}

.c-socials__list-item {
  color: useHSL(--primary-100);
  a {
    color: currentColor;
  }
}

.c-socials__list-item + .c-socials__list-item {
  margin-left: spacing(space-16);
}
  • URL: /components/raw/socials/_socials.scss
  • Filesystem Path: src/pattern-library/02-components/socials/_socials.scss
  • Size: 236 Bytes

No notes defined.