Aeroporto di Bologna - Design System

Socials 

<div class="c-socials">

    <ul>
        <li><a href="#" aria-label="instagram"><svg class="">
                    <use xlink:href="#ic-social-instagram"></use>
                </svg></a></li>
        <li><a href="#" aria-label="facebook"><svg class="">
                    <use xlink:href="#ic-social-facebook"></use>
                </svg></a></li>
        <li><a href="#" aria-label="twitter"><svg class="">
                    <use xlink:href="#ic-social-twitter"></use>
                </svg></a></li>
        <li><a href="#" aria-label="linkedin"><svg class="">
                    <use xlink:href="#ic-social-linkedin"></use>
                </svg></a></li>
        <li><a href="#" aria-label="youtube"><svg class="">
                    <use xlink:href="#ic-social-youtube"></use>
                </svg></a></li>
    </ul>

</div>
 
<div class="c-socials">

  <ul>
    {{#each socials}}
      <li><a href="{{this.url}}" aria-label="{{this.name}}">{{> @icon symbol=this.symbol class=this.class}}</a></li>
    {{/each}}
  </ul>

</div>
 
{
  "socials": [
    {
      "name": "instagram",
      "symbol": "ic-social-instagram",
      "url": "#"
    },
    {
      "name": "facebook",
      "symbol": "ic-social-facebook",
      "url": "#"
    },
    {
      "name": "twitter",
      "symbol": "ic-social-twitter",
      "url": "#"
    },
    {
      "name": "linkedin",
      "symbol": "ic-social-linkedin",
      "url": "#"
    },
    {
      "name": "youtube",
      "symbol": "ic-social-youtube",
      "url": "#"
    }
  ]
}
  • Content: 
    .c-socials {
  p {
    text-transform: uppercase;
  }

  ul {
    li {
      display: inline;
      margin: 0 remify(4px);
    }
    svg {
      width: remify(24px);
      height: remify(24px);
      * {
        fill: primary(sky, 120);
      }
    }
  }
}
  • URL: /components/raw/socials/_socials.scss
  • Filesystem Path: src/views/02-molecules/socials/_socials.scss
  • Size: 257 Bytes

No notes defined.