EU System

Social icons

Documentation • Demo

Social icons

This is the ECL package you need when you want to implement a social media icon in any way.

Few possibilities to do so:

  • As a link:
<a href="#" class="ecl-link ecl-social-icon ecl-social-icon--facebook">Facebook</a>

Note that the ecl-link class is an optional extension you can have for links formatting.

  • As a span:
<span class="ecl-social-icon ecl-social-icon--facebook">Facebook</span>
  • Making an icon smaller:
  <span class="ecl-social-icon ecl-social-icon--smaller ecl-social-icon--facebook">Facebook</span>
 
{#
  Parameters:
    - "link" (object) (default: {}): shape of @ecl/eu-component-link
    - "variant" (string) (default: ''): correspond to the social network
    - "label" (string) (default: ''): used if "link" is not provided
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
#}

{% include '@ecl/generic-component-social-icon' with {
  'link': link|default({}),
  'variant': variant|default(''),
  'label': label|default(''),
  'extra_classes': extra_classes|default(''),
  'extra_attributes': extra_attributes|default([]),
  'system': 'eu'
} only %}
 
/* Arto */
{
  "variant": "arto",
  "label": "Arto"
}


/* Bebo */
{
  "variant": "bebo",
  "label": "Bebo"
}


/* Bitly */
{
  "variant": "bitly",
  "label": "Bitly"
}


/* Blinklist */
{
  "variant": "blinklist",
  "label": "Blinklist"
}


/* Blog */
{
  "variant": "blog",
  "label": "Blog"
}


/* Blogger */
{
  "variant": "blogger",
  "label": "Blogger"
}


/* Delicious */
{
  "variant": "delicious",
  "label": "Delicious"
}


/* Digg */
{
  "variant": "digg",
  "label": "Digg"
}


/* Diigo */
{
  "variant": "diigo",
  "label": "Diigo"
}


/* Dzone */
{
  "variant": "dzone",
  "label": "Dzone"
}


/* Email */
{
  "variant": "email",
  "label": "Email"
}


/* Facebook */
{
  "variant": "facebook",
  "label": "Facebook"
}


/* Flickr */
{
  "variant": "flickr",
  "label": "Flickr"
}


/* Foursquare */
{
  "variant": "foursquare",
  "label": "Foursquare"
}


/* Generic */
{
  "variant": "generic",
  "label": "Generic"
}


/* Google */
{
  "variant": "google",
  "label": "Google"
}


/* Instagram */
{
  "variant": "instagram",
  "label": "Instagram"
}


/* Linkarena */
{
  "variant": "linkarena",
  "label": "Linkarena"
}


/* Linkedin */
{
  "variant": "linkedin",
  "label": "Linkedin"
}


/* Live */
{
  "variant": "live",
  "label": "Live"
}


/* Meneame */
{
  "variant": "meneame",
  "label": "Meneame"
}


/* Misterwong */
{
  "variant": "misterwong",
  "label": "Misterwong"
}


/* Myspace */
{
  "variant": "myspace",
  "label": "Myspace"
}


/* Netlog */
{
  "variant": "netlog",
  "label": "Netlog"
}


/* Netvibes */
{
  "variant": "netvibes",
  "label": "Netvibes"
}


/* Newsvine */
{
  "variant": "newsvine",
  "label": "Newsvine"
}


/* Nujij */
{
  "variant": "nujij",
  "label": "Nujij"
}


/* Pinterest */
{
  "variant": "pinterest",
  "label": "Pinterest"
}


/* Pocket */
{
  "variant": "pocket",
  "label": "Pocket"
}


/* Reddit */
{
  "variant": "reddit",
  "label": "Reddit"
}


/* RSS */
{
  "variant": "rss",
  "label": "RSS"
}


/* Share */
{
  "variant": "share",
  "label": "Share"
}


/* Skype */
{
  "variant": "skype",
  "label": "Skype"
}


/* Slashdot */
{
  "variant": "slashdot",
  "label": "Slashdot"
}


/* Sonico */
{
  "variant": "sonico",
  "label": "Sonico"
}


/* Spotify */
{
  "variant": "spotify",
  "label": "Spotify"
}


/* Storify */
{
  "variant": "storify",
  "label": "Storify"
}


/* Studivz */
{
  "variant": "studivz",
  "label": "Studivz"
}


/* Stumbleupon */
{
  "variant": "stumbleupon",
  "label": "Stumbleupon"
}


/* Technorati */
{
  "variant": "technorati",
  "label": "Technorati"
}


/* Tuenti */
{
  "variant": "tuenti",
  "label": "Tuenti"
}


/* Tumblr */
{
  "variant": "tumblr",
  "label": "Tumblr"
}


/* Twitter */
{
  "variant": "twitter",
  "label": "Twitter"
}


/* Viadeo */
{
  "variant": "viadeo",
  "label": "Viadeo"
}


/* Vine */
{
  "variant": "vine",
  "label": "Vine"
}


/* Wordpress */
{
  "variant": "wordpress",
  "label": "Wordpress"
}


/* Wykop */
{
  "variant": "wykop",
  "label": "Wykop"
}


/* Xerpi */
{
  "variant": "xerpi",
  "label": "Xerpi"
}


/* Yammer */
{
  "variant": "yammer",
  "label": "Yammer"
}


/* Youtube */
{
  "variant": "youtube",
  "label": "Youtube"
}


/* Print */
{
  "variant": "print",
  "label": "Print"
}


<!-- Arto -->
<span class="ecl-social-icon ecl-social-icon--arto">Arto</span>


<!-- Bebo -->
<span class="ecl-social-icon ecl-social-icon--bebo">Bebo</span>


<!-- Bitly -->
<span class="ecl-social-icon ecl-social-icon--bitly">Bitly</span>


<!-- Blinklist -->
<span class="ecl-social-icon ecl-social-icon--blinklist">Blinklist</span>


<!-- Blog -->
<span class="ecl-social-icon ecl-social-icon--blog">Blog</span>


<!-- Blogger -->
<span class="ecl-social-icon ecl-social-icon--blogger">Blogger</span>


<!-- Delicious -->
<span class="ecl-social-icon ecl-social-icon--delicious">Delicious</span>


<!-- Digg -->
<span class="ecl-social-icon ecl-social-icon--digg">Digg</span>


<!-- Diigo -->
<span class="ecl-social-icon ecl-social-icon--diigo">Diigo</span>


<!-- Dzone -->
<span class="ecl-social-icon ecl-social-icon--dzone">Dzone</span>


<!-- Email -->
<span class="ecl-social-icon ecl-social-icon--email">Email</span>


<!-- Facebook -->
<span class="ecl-social-icon ecl-social-icon--facebook">Facebook</span>


<!-- Flickr -->
<span class="ecl-social-icon ecl-social-icon--flickr">Flickr</span>


<!-- Foursquare -->
<span class="ecl-social-icon ecl-social-icon--foursquare">Foursquare</span>


<!-- Generic -->
<span class="ecl-social-icon ecl-social-icon--generic">Generic</span>


<!-- Google -->
<span class="ecl-social-icon ecl-social-icon--google">Google</span>


<!-- Instagram -->
<span class="ecl-social-icon ecl-social-icon--instagram">Instagram</span>


<!-- Linkarena -->
<span class="ecl-social-icon ecl-social-icon--linkarena">Linkarena</span>


<!-- Linkedin -->
<span class="ecl-social-icon ecl-social-icon--linkedin">Linkedin</span>


<!-- Live -->
<span class="ecl-social-icon ecl-social-icon--live">Live</span>


<!-- Meneame -->
<span class="ecl-social-icon ecl-social-icon--meneame">Meneame</span>


<!-- Misterwong -->
<span class="ecl-social-icon ecl-social-icon--misterwong">Misterwong</span>


<!-- Myspace -->
<span class="ecl-social-icon ecl-social-icon--myspace">Myspace</span>


<!-- Netlog -->
<span class="ecl-social-icon ecl-social-icon--netlog">Netlog</span>


<!-- Netvibes -->
<span class="ecl-social-icon ecl-social-icon--netvibes">Netvibes</span>


<!-- Newsvine -->
<span class="ecl-social-icon ecl-social-icon--newsvine">Newsvine</span>


<!-- Nujij -->
<span class="ecl-social-icon ecl-social-icon--nujij">Nujij</span>


<!-- Pinterest -->
<span class="ecl-social-icon ecl-social-icon--pinterest">Pinterest</span>


<!-- Pocket -->
<span class="ecl-social-icon ecl-social-icon--pocket">Pocket</span>


<!-- Reddit -->
<span class="ecl-social-icon ecl-social-icon--reddit">Reddit</span>


<!-- RSS -->
<span class="ecl-social-icon ecl-social-icon--rss">RSS</span>


<!-- Share -->
<span class="ecl-social-icon ecl-social-icon--share">Share</span>


<!-- Skype -->
<span class="ecl-social-icon ecl-social-icon--skype">Skype</span>


<!-- Slashdot -->
<span class="ecl-social-icon ecl-social-icon--slashdot">Slashdot</span>


<!-- Sonico -->
<span class="ecl-social-icon ecl-social-icon--sonico">Sonico</span>


<!-- Spotify -->
<span class="ecl-social-icon ecl-social-icon--spotify">Spotify</span>


<!-- Storify -->
<span class="ecl-social-icon ecl-social-icon--storify">Storify</span>


<!-- Studivz -->
<span class="ecl-social-icon ecl-social-icon--studivz">Studivz</span>


<!-- Stumbleupon -->
<span class="ecl-social-icon ecl-social-icon--stumbleupon">Stumbleupon</span>


<!-- Technorati -->
<span class="ecl-social-icon ecl-social-icon--technorati">Technorati</span>


<!-- Tuenti -->
<span class="ecl-social-icon ecl-social-icon--tuenti">Tuenti</span>


<!-- Tumblr -->
<span class="ecl-social-icon ecl-social-icon--tumblr">Tumblr</span>


<!-- Twitter -->
<span class="ecl-social-icon ecl-social-icon--twitter">Twitter</span>


<!-- Viadeo -->
<span class="ecl-social-icon ecl-social-icon--viadeo">Viadeo</span>


<!-- Vine -->
<span class="ecl-social-icon ecl-social-icon--vine">Vine</span>


<!-- Wordpress -->
<span class="ecl-social-icon ecl-social-icon--wordpress">Wordpress</span>


<!-- Wykop -->
<span class="ecl-social-icon ecl-social-icon--wykop">Wykop</span>


<!-- Xerpi -->
<span class="ecl-social-icon ecl-social-icon--xerpi">Xerpi</span>


<!-- Yammer -->
<span class="ecl-social-icon ecl-social-icon--yammer">Yammer</span>


<!-- Youtube -->
<span class="ecl-social-icon ecl-social-icon--youtube">Youtube</span>


<!-- Print -->
<span class="ecl-social-icon ecl-social-icon--print">Print</span>
  • Content: 
    /**
 * Social icons
 * @define social-icon
 */

// Import base and generic
@import '@ecl/eu-base/eu-base';
@import '@ecl/generic-component-social-icon/generic-component-social-icon';

// Check if overridden dependencies are already loaded, if needed
@include check-imports(('eu-component-link'));

// Use generic mixin
@include exports('eu-component-social-icon') {
  @include ecl-social-icon();
}
  • URL: /components/raw/eu-component-social-icon/eu-component-social-icon.scss
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-social-icon/eu-component-social-icon.scss
  • Size: 398 Bytes
  • Handle: @ecl/eu-component-social-icon
  • Tags: atom
  • Preview:
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-social-icon/eu-component-social-icon.twig