Vebego Component Library

Social Media: Horizontal 

<ul class="mol-social-media horizontal ">
    <li><a href="https://www.facebook.com" target="_blank" aria-label="Facebook"> <i class="atm-icon  fa-brands fa-facebook-f  fa-lg "></i>
        </a></li>
    <li><a href="https://www.instagram.com" target="_blank" aria-label="Instagram"> <i class="atm-icon  fa-brands fa-instagram  fa-lg "></i>
        </a></li>
    <li><a href="https://www.x.com" target="_blank" aria-label="X"> <i class="atm-icon  fa-brands fa-x-twitter  fa-lg "></i>
        </a></li>
    <li><a href="https://www.youtube.com" target="_blank" aria-label="YouTube"> <i class="atm-icon  fa-brands fa-youtube  fa-lg "></i>
        </a></li>
    <li><a href="https://www.linkedin.com" target="_blank" aria-label="LinkedIn"> <i class="atm-icon  fa-brands fa-linkedin-in  fa-lg "></i>
        </a></li>
    <li><a href="https://wa.me/?text&#x3D;" target="_blank" aria-label="Whatsapp"> <i class="atm-icon  fa-brands fa-whatsapp  fa-lg "></i>
        </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 x.url}}
    <li><a href="{{x.url}}" target="_blank" aria-label="{{x.ariaLabel}}">{{ render '@icon' x.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": "fa-brands",
      "icon": "fa-facebook-f",
      "size": "fa-lg"
    },
    "url": "https://www.facebook.com",
    "ariaLabel": "Facebook"
  },
  "instagram": {
    "icon": {
      "style": "fa-brands",
      "icon": "fa-instagram",
      "size": "fa-lg"
    },
    "url": "https://www.instagram.com",
    "ariaLabel": "Instagram"
  },
  "x": {
    "icon": {
      "style": "fa-brands",
      "icon": "fa-x-twitter",
      "size": "fa-lg"
    },
    "url": "https://www.x.com",
    "ariaLabel": "X"
  },
  "youtube": {
    "icon": {
      "style": "fa-brands",
      "icon": "fa-youtube",
      "size": "fa-lg"
    },
    "url": "https://www.youtube.com",
    "ariaLabel": "YouTube"
  },
  "linkedin": {
    "icon": {
      "style": "fa-brands",
      "icon": "fa-linkedin-in",
      "size": "fa-lg"
    },
    "url": "https://www.linkedin.com",
    "ariaLabel": "LinkedIn"
  },
  "whatsapp": {
    "icon": {
      "style": "fa-brands",
      "icon": "fa-whatsapp",
      "size": "fa-lg"
    },
    "url": "https://wa.me/?text=",
    "ariaLabel": "Whatsapp"
  },
  "direction": "horizontal"
}
  • Content: 
    .mol-social-media {
    @apply lg:inline-flex hidden gap-4;

    li a {
        @apply bg-white h-12 w-12 rounded-full transition ease-in-out duration-200;
        @apply flex items-center justify-center;

        .atm-icon {
            @apply text-secondary-col-1;
        }

        &:hover {
            @apply bg-secondary-col-1;

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

    &.horizontal {
        @apply flex-row;
    }

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

    &.xs {
        li a {
            @apply h-10 w-10 rounded-full;
        }
    }
}
  • URL: /components/raw/social-media/social-media.css
  • Filesystem Path: src\components\03-molecules\social-media\social-media.css
  • Size: 676 Bytes

No notes defined.