Design Seeds Boiler - Component Library

Social 

<ul class="social__links">
    <li class="social__links-item"><a href="#facebook"></a></li>
    <li class="social__links-item"><a href="#twitter"></a></li>
    <li class="social__links-item"><a href="#instagram"></a></li>
    <li class="social__links-item"><a href="#youtube"></a></li>
</ul>
 
<ul class="social__links">
    {% for item in items %}
        {% set icon = '@icons--' ~ item.name %}
        <li class="social__links-item"><a href="#{{item.url}}"></a></li>
    {% endfor %}
</ul>
 
{
  "title": "Social Links",
  "items": [
    {
      "name": "facebook",
      "url": "facebook"
    },
    {
      "name": "twitter",
      "url": "twitter"
    },
    {
      "name": "instagram",
      "url": "instagram"
    },
    {
      "name": "youtube",
      "url": "youtube"
    }
  ]
}
  • Content: 
    .social {
    &__links {
        display: flex;
        &-item {
            margin-right:20px;
            display: flex;  
            align-items: center;

            a {
                display: flex;
            }
        }
    }
}
  • URL: /components/raw/social/_social.scss
  • Filesystem Path: components/social/_social.scss
  • Size: 237 Bytes

No notes defined.