Tangible Pattern Library

Socials: Add This 

<div class="c-socials">
    <ul class="c-socials__list">
        <li class="c-socials__list-item"><a href="" aria-label="">
                <svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
                    <use xlink:href="#"></use>
                </svg> </a>
        </li>
        <li class="c-socials__list-item"><a href="" aria-label="">
                <svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
                    <use xlink:href="#"></use>
                </svg> </a>
        </li>
        <li class="c-socials__list-item"><a href="" aria-label="">
                <svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
                    <use xlink:href="#"></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": [
    {
      "class": "addthis_button_facebook",
      "symbol": "icn-facebook-f-24px"
    },
    {
      "class": "addthis_button_twitter",
      "symbol": "icn-twitter-24px"
    },
    {
      "class": "addthis_button_linkedin",
      "symbol": "icn-linkedin-in-24px"
    }
  ]
}
  • 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.