Component Library

Link Social 

<div class="social-link  ">
    <a href="#" title="Social link" target="_blank">
        <svg class="social-link__icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../dist/icons/icons.svg#facebook-icon"></use>
        </svg>
    </a>
</div>
 
<div class="social-link {{ modifier }} {{ class }}">
    <a href="{{ url }}" title="{{ title }}" target="{{ target }}">
        <svg class="social-link__icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{ path '/dist/icons/icons.svg' }}#{{ icon }}"></use>
        </svg>
    </a>
</div>
 
{
  "url": "#",
  "title": "Social link",
  "target": "_blank",
  "icon": "facebook-icon"
}
  • Content: 
    /*
 * Element: Link Social
 */

/*Setting document variables*/
:root {
    --social-background-color: var(--color-gray);
    --icon-color: var(--color-white);
    --facebook-background-color: var(--color-facebook);
    --twitter-background-color: var(--color-twitter);
    --google-plus-background-color: var(--color-google-plus);
}

.social-link {
    position: relative;
    width: 40px;
    height: 40px;
    background-color: var(--social-background-color);
    border-radius: 50%;

    &:hover,
    &:focus {
        background: shade(var(--social-background-color), 10%);
    }

    &__icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 20px;
        height: 20px;
        fill: var(--icon-color);
    }

    &--facebook {
        background-color: var(--facebook-background-color);

        &:hover,
        &:focus {
            background: shade(var(--facebook-background-color), 10%);
        }
    }

    &--twitter {
        background-color: var(--twitter-background-color);

        &:hover,
        &:focus {
            background: shade(var(--twitter-background-color), 10%);
        }
    }

    &--google-plus {
        background-color: var(--google-plus-background-color);

        &:hover,
        &:focus {
            background: shade(var(--google-plus-background-color), 10%);
        }
    }
}
  • URL: /components/raw/link-social/link-social.css
  • Filesystem Path: src/01-atoms/links/link-social/link-social.css
  • Size: 1.4 KB

There are no notes for this item.