V6 Clearleft Patterns

Social 

<aside class="Social theme--dark flow">
    <h3 class="eyebrow eyebrow--black">
        Find Sam on
    </h3>
    <ul role="list">
        <li>
            <a href="#" class="Twi Twi--s Twi--link text-light-grey focus" style="">
                <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--web text-light-grey Icon--s">
                    <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#web"></use>
                </svg>
                <span>Web</span></a>
        </li>
        <li>
            <a href="#" class="Twi Twi--s Twi--link text-light-grey focus" style="">
                <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--twitter text-light-grey Icon--s">
                    <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#twitter"></use>
                </svg>
                <span>Twitter</span></a>
        </li>
        <li>
            <a href="#" class="Twi Twi--s Twi--link text-light-grey focus" style="">
                <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--github text-light-grey Icon--s">
                    <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#github"></use>
                </svg>
                <span>GitHub</span></a>
        </li>
        <li>
            <a href="#" class="Twi Twi--s Twi--link text-light-grey focus" style="">
                <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--mastodon text-light-grey Icon--s">
                    <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#mastodon"></use>
                </svg>
                <span>Mastodon</span></a>
        </li>
    </ul>
</aside>
 
<aside class="Social theme--dark flow">
  {% if name %}
    <h3 class="eyebrow eyebrow--black">
      Find {{ name }} on
    </h3>
  {% endif %}
  <ul role="list">
    {% for item in socialItems %}
      <li>
        {% include '@twi' with {
          icon: item.icon,
          text: item.name,
          link: item.url,
          size: 's',
          classes: 'text-light-grey'
        } %}
      </li>
    {% endfor %}
  </ul>
</aside>
 
{
  "name": "Sam",
  "socialItems": [
    {
      "icon": "web",
      "name": "Web",
      "url": "#"
    },
    {
      "icon": "twitter",
      "name": "Twitter",
      "url": "#"
    },
    {
      "icon": "github",
      "name": "GitHub",
      "url": "#"
    },
    {
      "icon": "mastodon",
      "name": "Mastodon",
      "url": "#"
    }
  ]
}
  • Content: 
    .Social {
  font-size: var(--step--1);
  padding: var(--space-s-m);

  ul {
    max-width: 260px;
    display: grid;
    grid-gap: var(--space-2xs) var(--gutter);
    grid-template-columns: repeat(2, 1fr);
  }
}
  • URL: /components/raw/social/social.css
  • Filesystem Path: src/templates/components/social/social.css
  • Size: 211 Bytes

No notes defined.