Vebego Component Library
<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.