UHasselt Component Library

Social 

<!-- Black Hortizontal -->
<ul class="social horizontal">
    <li><a class="facebook" href="https://www.facebook.com" target="_blank" aria-label="facebook"><span class="icon fab fa-facebook  fa-lg " aria-hidden="true"></span></a></li>
    <li><a class="instagram" href="https://www.instagram.com" target="_blank" aria-label="instagram"><span class="icon fab fa-instagram  fa-lg " aria-hidden="true"></span></a></li>
    <li><a class="twitter" href="https://www.twitter.com" target="_blank" aria-label="twitter"><span class="icon fab fa-twitter  fa-lg " aria-hidden="true"></span></a></li>
    <li><a class="youtube" href="https://www.youtube.com" target="_blank" aria-label="youtube"><span class="icon fab fa-youtube  fa-lg " aria-hidden="true"></span></a></li>
    <li><a class="linkedin" href="https://www.linkedin.com" target="_blank" aria-label="linkedin"><span class="icon fab fa-linkedin  fa-lg " aria-hidden="true"></span></a></li>
</ul>


<!-- Black Vertical -->
<ul class="social vertical">
    <li><a class="facebook" href="https://www.facebook.com" target="_blank" aria-label="facebook"><span class="icon fab fa-facebook  fa-lg " aria-hidden="true"></span></a></li>
    <li><a class="instagram" href="https://www.instagram.com" target="_blank" aria-label="instagram"><span class="icon fab fa-instagram  fa-lg " aria-hidden="true"></span></a></li>
    <li><a class="twitter" href="https://www.twitter.com" target="_blank" aria-label="twitter"><span class="icon fab fa-twitter  fa-lg " aria-hidden="true"></span></a></li>
    <li><a class="youtube" href="https://www.youtube.com" target="_blank" aria-label="youtube"><span class="icon fab fa-youtube  fa-lg " aria-hidden="true"></span></a></li>
    <li><a class="linkedin" href="https://www.linkedin.com" target="_blank" aria-label="linkedin"><span class="icon fab fa-linkedin  fa-lg " aria-hidden="true"></span></a></li>
</ul>


<!-- Red Horizontal -->
<ul class="social horizontal">
    <li><a class="facebook" href="https://www.facebook.com" target="_blank" aria-label="facebook"><span class="icon fab fa-facebook  fa-lg " aria-hidden="true"></span></a></li>
    <li><a class="instagram" href="https://www.instagram.com" target="_blank" aria-label="instagram"><span class="icon fab fa-instagram  fa-lg " aria-hidden="true"></span></a></li>
    <li><a class="twitter" href="https://www.twitter.com" target="_blank" aria-label="twitter"><span class="icon fab fa-twitter  fa-lg " aria-hidden="true"></span></a></li>
    <li><a class="youtube" href="https://www.youtube.com" target="_blank" aria-label="youtube"><span class="icon fab fa-youtube  fa-lg " aria-hidden="true"></span></a></li>
    <li><a class="linkedin" href="https://www.linkedin.com" target="_blank" aria-label="linkedin"><span class="icon fab fa-linkedin  fa-lg " aria-hidden="true"></span></a></li>
</ul>


<!-- Red Vertical -->
<ul class="social vertical">
    <li><a class="facebook" href="https://www.facebook.com" target="_blank" aria-label="facebook"><span class="icon fab fa-facebook  fa-lg " aria-hidden="true"></span></a></li>
    <li><a class="instagram" href="https://www.instagram.com" target="_blank" aria-label="instagram"><span class="icon fab fa-instagram  fa-lg " aria-hidden="true"></span></a></li>
    <li><a class="twitter" href="https://www.twitter.com" target="_blank" aria-label="twitter"><span class="icon fab fa-twitter  fa-lg " aria-hidden="true"></span></a></li>
    <li><a class="youtube" href="https://www.youtube.com" target="_blank" aria-label="youtube"><span class="icon fab fa-youtube  fa-lg " aria-hidden="true"></span></a></li>
    <li><a class="linkedin" href="https://www.linkedin.com" target="_blank" aria-label="linkedin"><span class="icon fab fa-linkedin  fa-lg " aria-hidden="true"></span></a></li>
</ul>


<!-- White Horizontal -->
<ul class="social horizontal">
    <li><a class="facebook" href="https://www.facebook.com" target="_blank" aria-label="facebook"><span class="icon fab fa-facebook  fa-lg " aria-hidden="true"></span></a></li>
    <li><a class="instagram" href="https://www.instagram.com" target="_blank" aria-label="instagram"><span class="icon fab fa-instagram  fa-lg " aria-hidden="true"></span></a></li>
    <li><a class="twitter" href="https://www.twitter.com" target="_blank" aria-label="twitter"><span class="icon fab fa-twitter  fa-lg " aria-hidden="true"></span></a></li>
    <li><a class="youtube" href="https://www.youtube.com" target="_blank" aria-label="youtube"><span class="icon fab fa-youtube  fa-lg " aria-hidden="true"></span></a></li>
    <li><a class="linkedin" href="https://www.linkedin.com" target="_blank" aria-label="linkedin"><span class="icon fab fa-linkedin  fa-lg " aria-hidden="true"></span></a></li>
</ul>


<!-- White Vertical -->
<ul class="social vertical">
    <li><a class="facebook" href="https://www.facebook.com" target="_blank" aria-label="facebook"><span class="icon fab fa-facebook  fa-lg " aria-hidden="true"></span></a></li>
    <li><a class="instagram" href="https://www.instagram.com" target="_blank" aria-label="instagram"><span class="icon fab fa-instagram  fa-lg " aria-hidden="true"></span></a></li>
    <li><a class="twitter" href="https://www.twitter.com" target="_blank" aria-label="twitter"><span class="icon fab fa-twitter  fa-lg " aria-hidden="true"></span></a></li>
    <li><a class="youtube" href="https://www.youtube.com" target="_blank" aria-label="youtube"><span class="icon fab fa-youtube  fa-lg " aria-hidden="true"></span></a></li>
    <li><a class="linkedin" href="https://www.linkedin.com" target="_blank" aria-label="linkedin"><span class="icon fab fa-linkedin  fa-lg " aria-hidden="true"></span></a></li>
</ul>


<ul class="social {{direction}}">
    <li><a class="{{facebook.name}}" href="{{facebook.url}}" target="_blank" aria-label="{{facebook.name}}">{{ render '@icon' facebook.icon }}</a></li>
    <li><a class="{{instagram.name}}" href="{{instagram.url}}" target="_blank" aria-label="{{instagram.name}}">{{ render '@icon' instagram.icon }}</a></li>
    <li><a class="{{twitter.name}}" href="{{twitter.url}}" target="_blank" aria-label="{{twitter.name}}">{{ render '@icon' twitter.icon }}</a></li>
    <li><a class="{{youtube.name}}" href="{{youtube.url}}" target="_blank" aria-label="{{youtube.name}}">{{ render '@icon' youtube.icon }}</a></li>
    <li><a class="{{linkedin.name}}" href="{{linkedin.url}}" target="_blank" aria-label="{{linkedin.name}}">{{ render '@icon' linkedin.icon }}</a></li>
</ul>
 
/* Black Hortizontal */
{
  "facebook": {
    "icon": {
      "style": "fab",
      "icon": "fa-facebook",
      "size": "fa-lg"
    },
    "url": "https://www.facebook.com",
    "name": "facebook"
  },
  "instagram": {
    "icon": {
      "style": "fab",
      "icon": "fa-instagram",
      "size": "fa-lg"
    },
    "url": "https://www.instagram.com",
    "name": "instagram"
  },
  "twitter": {
    "icon": {
      "style": "fab",
      "icon": "fa-twitter",
      "size": "fa-lg"
    },
    "url": "https://www.twitter.com",
    "name": "twitter"
  },
  "youtube": {
    "icon": {
      "style": "fab",
      "icon": "fa-youtube",
      "size": "fa-lg"
    },
    "url": "https://www.youtube.com",
    "name": "youtube"
  },
  "linkedin": {
    "icon": {
      "style": "fab",
      "icon": "fa-linkedin",
      "size": "fa-lg"
    },
    "url": "https://www.linkedin.com",
    "name": "linkedin"
  },
  "modifier": "",
  "direction": "horizontal"
}


/* Black Vertical */
{
  "facebook": {
    "icon": {
      "style": "fab",
      "icon": "fa-facebook",
      "size": "fa-lg"
    },
    "url": "https://www.facebook.com",
    "name": "facebook"
  },
  "instagram": {
    "icon": {
      "style": "fab",
      "icon": "fa-instagram",
      "size": "fa-lg"
    },
    "url": "https://www.instagram.com",
    "name": "instagram"
  },
  "twitter": {
    "icon": {
      "style": "fab",
      "icon": "fa-twitter",
      "size": "fa-lg"
    },
    "url": "https://www.twitter.com",
    "name": "twitter"
  },
  "youtube": {
    "icon": {
      "style": "fab",
      "icon": "fa-youtube",
      "size": "fa-lg"
    },
    "url": "https://www.youtube.com",
    "name": "youtube"
  },
  "linkedin": {
    "icon": {
      "style": "fab",
      "icon": "fa-linkedin",
      "size": "fa-lg"
    },
    "url": "https://www.linkedin.com",
    "name": "linkedin"
  },
  "modifier": "",
  "direction": "vertical"
}


/* Red Horizontal */
{
  "facebook": {
    "icon": {
      "style": "fab",
      "icon": "fa-facebook",
      "size": "fa-lg"
    },
    "url": "https://www.facebook.com",
    "name": "facebook"
  },
  "instagram": {
    "icon": {
      "style": "fab",
      "icon": "fa-instagram",
      "size": "fa-lg"
    },
    "url": "https://www.instagram.com",
    "name": "instagram"
  },
  "twitter": {
    "icon": {
      "style": "fab",
      "icon": "fa-twitter",
      "size": "fa-lg"
    },
    "url": "https://www.twitter.com",
    "name": "twitter"
  },
  "youtube": {
    "icon": {
      "style": "fab",
      "icon": "fa-youtube",
      "size": "fa-lg"
    },
    "url": "https://www.youtube.com",
    "name": "youtube"
  },
  "linkedin": {
    "icon": {
      "style": "fab",
      "icon": "fa-linkedin",
      "size": "fa-lg"
    },
    "url": "https://www.linkedin.com",
    "name": "linkedin"
  },
  "modifier": "red",
  "direction": "horizontal"
}


/* Red Vertical */
{
  "facebook": {
    "icon": {
      "style": "fab",
      "icon": "fa-facebook",
      "size": "fa-lg"
    },
    "url": "https://www.facebook.com",
    "name": "facebook"
  },
  "instagram": {
    "icon": {
      "style": "fab",
      "icon": "fa-instagram",
      "size": "fa-lg"
    },
    "url": "https://www.instagram.com",
    "name": "instagram"
  },
  "twitter": {
    "icon": {
      "style": "fab",
      "icon": "fa-twitter",
      "size": "fa-lg"
    },
    "url": "https://www.twitter.com",
    "name": "twitter"
  },
  "youtube": {
    "icon": {
      "style": "fab",
      "icon": "fa-youtube",
      "size": "fa-lg"
    },
    "url": "https://www.youtube.com",
    "name": "youtube"
  },
  "linkedin": {
    "icon": {
      "style": "fab",
      "icon": "fa-linkedin",
      "size": "fa-lg"
    },
    "url": "https://www.linkedin.com",
    "name": "linkedin"
  },
  "modifier": "red",
  "direction": "vertical"
}


/* White Horizontal */
{
  "facebook": {
    "icon": {
      "style": "fab",
      "icon": "fa-facebook",
      "size": "fa-lg"
    },
    "url": "https://www.facebook.com",
    "name": "facebook"
  },
  "instagram": {
    "icon": {
      "style": "fab",
      "icon": "fa-instagram",
      "size": "fa-lg"
    },
    "url": "https://www.instagram.com",
    "name": "instagram"
  },
  "twitter": {
    "icon": {
      "style": "fab",
      "icon": "fa-twitter",
      "size": "fa-lg"
    },
    "url": "https://www.twitter.com",
    "name": "twitter"
  },
  "youtube": {
    "icon": {
      "style": "fab",
      "icon": "fa-youtube",
      "size": "fa-lg"
    },
    "url": "https://www.youtube.com",
    "name": "youtube"
  },
  "linkedin": {
    "icon": {
      "style": "fab",
      "icon": "fa-linkedin",
      "size": "fa-lg"
    },
    "url": "https://www.linkedin.com",
    "name": "linkedin"
  },
  "modifier": "white",
  "direction": "horizontal"
}


/* White Vertical */
{
  "facebook": {
    "icon": {
      "style": "fab",
      "icon": "fa-facebook",
      "size": "fa-lg"
    },
    "url": "https://www.facebook.com",
    "name": "facebook"
  },
  "instagram": {
    "icon": {
      "style": "fab",
      "icon": "fa-instagram",
      "size": "fa-lg"
    },
    "url": "https://www.instagram.com",
    "name": "instagram"
  },
  "twitter": {
    "icon": {
      "style": "fab",
      "icon": "fa-twitter",
      "size": "fa-lg"
    },
    "url": "https://www.twitter.com",
    "name": "twitter"
  },
  "youtube": {
    "icon": {
      "style": "fab",
      "icon": "fa-youtube",
      "size": "fa-lg"
    },
    "url": "https://www.youtube.com",
    "name": "youtube"
  },
  "linkedin": {
    "icon": {
      "style": "fab",
      "icon": "fa-linkedin",
      "size": "fa-lg"
    },
    "url": "https://www.linkedin.com",
    "name": "linkedin"
  },
  "modifier": "white",
  "direction": "vertical"
}
  • Content: 
    .social {
    @apply inline-flex items-center my-4;

    .social-text {
        @apply text-sm;
    }

    li {
        @apply mr-4;

        .resp-sharing-button svg {
            @apply w-5 lg:m-auto;
        }
    }

    &.horizontal {
        @apply flex-row;

        li {
            @apply mr-4;
        }
    }

    &.vertical {
        @apply flex-col text-center;

        li {
            @apply mb-4;
        }
    }

    &.red .icon {
        @apply text-red;
    }

    &.white .icon {
        @apply text-white;
    }
}
  • URL: /components/raw/social/social.css
  • Filesystem Path: src\components\03-molecules\social\social.css
  • Size: 574 Bytes

No notes defined.