Vebego Component Library

Social Media: Horizontal 

<ul class="mol-social-media horizontal ">
    <li><a href="https://www.facebook.com" target="_blank" aria-label="Facebook"><span class="atm-icon  fab fa-facebook-f  fa-lg "></span></a></li>
    <li><a href="https://www.instagram.com" target="_blank" aria-label="Instagram"><span class="atm-icon  fab fa-instagram  fa-lg "></span></a></li>
    <li><a href="https://www.twitter.com" target="_blank" aria-label="Twitter"><span class="atm-icon  fab fa-twitter  fa-lg "></span></a></li>
    <li><a href="https://www.youtube.com" target="_blank" aria-label="YouTube"><span class="atm-icon  fab fa-youtube  fa-lg "></span></a></li>
    <li><a href="https://www.linkedin.com" target="_blank" aria-label="LinkedIn"><span class="atm-icon  fab fa-linkedin-in  fa-lg "></span></a></li>
    <li><a href="https://wa.me/?text&#x3D;" target="_blank" aria-label="Whatsapp"><span class="atm-icon  fab fa-whatsapp  fa-lg "></span></a></li>
</ul>
 
<ul class="mol-social-media {{direction}} {{modifier}}">
    {{#if facebook.url}}
    <li><a href="{{facebook.url}}" target="_blank" aria-label="{{facebook.ariaLabel}}">{{ render '@icon' facebook.icon }}</a></li>
    {{/if}}
    {{#if instagram.url}}
    <li><a href="{{instagram.url}}" target="_blank" aria-label="{{instagram.ariaLabel}}">{{ render '@icon' instagram.icon }}</a></li>
    {{/if}}
    {{#if twitter.url}}
    <li><a href="{{twitter.url}}" target="_blank" aria-label="{{twitter.ariaLabel}}">{{ render '@icon' twitter.icon }}</a></li>
    {{/if}}
    {{#if youtube.url}}
    <li><a href="{{youtube.url}}" target="_blank" aria-label="{{youtube.ariaLabel}}">{{ render '@icon' youtube.icon }}</a></li>
    {{/if}}
    {{#if linkedin.url}}
    <li><a href="{{linkedin.url}}" target="_blank" aria-label="{{linkedin.ariaLabel}}">{{ render '@icon' linkedin.icon }}</a></li>
    {{/if}}
    {{#if whatsapp.url}}
    <li><a href="{{whatsapp.url}}" target="_blank" aria-label="{{whatsapp.ariaLabel}}">{{ render '@icon' whatsapp.icon }}</a></li>
    {{/if}}
</ul>
 
{
  "facebook": {
    "icon": {
      "style": "fab",
      "icon": "fa-facebook-f",
      "size": "fa-lg"
    },
    "url": "https://www.facebook.com",
    "ariaLabel": "Facebook"
  },
  "instagram": {
    "icon": {
      "style": "fab",
      "icon": "fa-instagram",
      "size": "fa-lg"
    },
    "url": "https://www.instagram.com",
    "ariaLabel": "Instagram"
  },
  "twitter": {
    "icon": {
      "style": "fab",
      "icon": "fa-twitter",
      "size": "fa-lg"
    },
    "url": "https://www.twitter.com",
    "ariaLabel": "Twitter"
  },
  "youtube": {
    "icon": {
      "style": "fab",
      "icon": "fa-youtube",
      "size": "fa-lg"
    },
    "url": "https://www.youtube.com",
    "ariaLabel": "YouTube"
  },
  "linkedin": {
    "icon": {
      "style": "fab",
      "icon": "fa-linkedin-in",
      "size": "fa-lg"
    },
    "url": "https://www.linkedin.com",
    "ariaLabel": "LinkedIn"
  },
  "whatsapp": {
    "icon": {
      "style": "fab",
      "icon": "fa-whatsapp",
      "size": "fa-lg"
    },
    "url": "https://wa.me/?text=",
    "ariaLabel": "Whatsapp"
  },
  "direction": "horizontal"
}
  • Content: 
    .mol-social-media {
    @apply inline-flex;

    li a {
        @apply bg-gray-300;
        @apply block;
        clip-path: circle(40%);
        padding: 3px 0 3px 0;

        &:hover {
            @apply bg-cta;
        }

        .atm-icon {
            @apply text-white;
            @apply p-3;
        }
    }

    &.horizontal {
        @apply flex-row;

        li {
            @apply mr-2;
        }
    }

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

        li {
            @apply mb-4;
        }
    }

    &.xs {
        li {
            @apply mb-1;

            a {
                .atm-icon {
                    @apply p-2;
                }
            }
        }
    }
}
  • URL: /components/raw/social-media/social-media.css
  • Filesystem Path: src\components\03-molecules\social-media\social-media.css
  • Size: 767 Bytes

No notes defined.