EC System

Social Media Links

Documentation • Demo

Social Media Links

Why and how to use this component

Allows users to visit relevant social media profile pages of the European Commission.

When to use this component

Should be used whenever links need to be provided to related social media profiles.

Guidance

Orientation: vertical or horizontal

The component can be shown in a vertical or horizontal format.\ If there is available space in the far right column of the page, the vertical version should be used, otherwise use the horizontal version

Subject: generic or specific

The component can be shown with a generic label or a specific one (see preview).

The component has an optional ‘more link’ to be able to link to more social media profiles without cluttering the page.

Default order

The default order of social media links is:

  • Facebook
  • Twitter
  • Linkedin
  • Youtube
  • Google+

Responsive behaviour

Below the 480px breakpoint, the social media links component is always shown vertically.

Available in translation

Please note that the ‘View on’ link and ‘More link’ are available in the EU’s 24 official languages.

{#
  Parameters:
    - "variant" (string) (default: ''): '' or 'horizontal'
    - "text" (string) (default: ''): additional text displayed before the links
    - "social_icons" (array) (default: []): collection of @ecl/ec-component-social-icon
    - "more" (object): {
      - "href" (string) (default: ''): target of the "more" link
      - "label" (string) (default: 'Other social networks'): label of the "more" link
    }
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
#}

{% include '@ecl/generic-component-social-media-link' with {
  'variant': variant|default(''),
  'text': text|default(''),
  'social_icons': social_icons|default([]),
  'more':{
    'label': 'Other social networks',
    'href': ''
  }|merge(more|default({})),
  'extra_classes': extra_classes|default(''),
  'extra_attributes': extra_attributes|default([]),
  'system': 'ec'
} %}
 
/* Default list with default display */
{
  "social_icons": [
    {
      "link": {
        "href": "../../example.html#",
        "label": "Facebook"
      },
      "variant": "facebook",
      "extra_attributes": [
        {
          "name": "title",
          "value": "Facebook"
        }
      ]
    },
    {
      "link": {
        "href": "../../example.html#",
        "label": "Twitter"
      },
      "variant": "twitter",
      "extra_attributes": [
        {
          "name": "title",
          "value": "Twitter"
        }
      ]
    },
    {
      "link": {
        "href": "../../example.html#",
        "label": "Instagram"
      },
      "title": "Instagram",
      "variant": "instagram",
      "extra_attributes": [
        {
          "name": "title",
          "value": "Instagram"
        }
      ]
    }
  ],
  "text": "View European Commission on:"
}


/* Specific list with default display */
{
  "social_icons": [
    {
      "link": {
        "href": "../../example.html#",
        "label": "Jean-Claude Junker"
      },
      "variant": "facebook",
      "extra_attributes": [
        {
          "name": "title",
          "value": "See Jean-Claude Junker on Facebook"
        }
      ]
    },
    {
      "link": {
        "href": "../../example.html#",
        "label": "European Commission"
      },
      "variant": "facebook",
      "extra_attributes": [
        {
          "name": "title",
          "value": "See European Commission on Facebook"
        }
      ]
    },
    {
      "link": {
        "href": "../../example.html#",
        "label": "European Commission"
      },
      "variant": "twitter",
      "extra_attributes": [
        {
          "name": "title",
          "value": "See European Commission on Twitter"
        }
      ]
    }
  ]
}


/*  Default list with horizontal display */
{
  "variant": "horizontal",
  "social_icons": [
    {
      "link": {
        "href": "../../example.html#",
        "label": "Facebook"
      },
      "variant": "facebook",
      "extra_attributes": [
        {
          "name": "title",
          "value": "Facebook"
        }
      ]
    },
    {
      "link": {
        "href": "../../example.html#",
        "label": "Twitter"
      },
      "variant": "twitter",
      "extra_attributes": [
        {
          "name": "title",
          "value": "Twitter"
        }
      ]
    },
    {
      "link": {
        "href": "../../example.html#",
        "label": "Instagram"
      },
      "title": "Instagram",
      "variant": "instagram",
      "extra_attributes": [
        {
          "name": "title",
          "value": "Instagram"
        }
      ]
    }
  ],
  "text": "View European Commission on:"
}


/* Specific list with horizontal display */
{
  "variant": "horizontal",
  "social_icons": [
    {
      "link": {
        "href": "../../example.html#",
        "label": "Jean-Claude Junker"
      },
      "variant": "facebook",
      "extra_attributes": [
        {
          "name": "title",
          "value": "See Jean-Claude Junker on Facebook"
        }
      ]
    },
    {
      "link": {
        "href": "../../example.html#",
        "label": "European Commission"
      },
      "variant": "facebook",
      "extra_attributes": [
        {
          "name": "title",
          "value": "See European Commission on Facebook"
        }
      ]
    },
    {
      "link": {
        "href": "../../example.html#",
        "label": "European Commission"
      },
      "variant": "twitter",
      "extra_attributes": [
        {
          "name": "title",
          "value": "See European Commission on Twitter"
        }
      ]
    }
  ]
}


<!-- Default list with default display -->
<div class="ecl-social-media-link">
  <p class="ecl-paragraph">View European Commission on:</p>
  <ul class="ecl-social-media-link__list ecl-list ecl-list--unstyled">
    <li class="ecl-social-media-link__item">

      <a class="ecl-link  ecl-social-icon ecl-social-icon--facebook ecl-social-media-link__link" href="../../example.html#" title="Facebook">Facebook</a>
    </li>
    <li class="ecl-social-media-link__item">

      <a class="ecl-link  ecl-social-icon ecl-social-icon--twitter ecl-social-media-link__link" href="../../example.html#" title="Twitter">Twitter</a>
    </li>
    <li class="ecl-social-media-link__item">

      <a class="ecl-link  ecl-social-icon ecl-social-icon--instagram ecl-social-media-link__link" href="../../example.html#" title="Instagram">Instagram</a>
    </li>
    <li class="ecl-social-media-link__item">
      <a class="ecl-social-media-link__link" href="" title="Other social networks">Other social networks</a>
    </li>
  </ul>
</div>


<!-- Specific list with default display -->
<div class="ecl-social-media-link">
  <ul class="ecl-social-media-link__list ecl-list ecl-list--unstyled">
    <li class="ecl-social-media-link__item">

      <a class="ecl-link  ecl-social-icon ecl-social-icon--facebook ecl-social-media-link__link" href="../../example.html#" title="See Jean-Claude Junker on Facebook">Jean-Claude Junker</a>
    </li>
    <li class="ecl-social-media-link__item">

      <a class="ecl-link  ecl-social-icon ecl-social-icon--facebook ecl-social-media-link__link" href="../../example.html#" title="See European Commission on Facebook">European Commission</a>
    </li>
    <li class="ecl-social-media-link__item">

      <a class="ecl-link  ecl-social-icon ecl-social-icon--twitter ecl-social-media-link__link" href="../../example.html#" title="See European Commission on Twitter">European Commission</a>
    </li>
    <li class="ecl-social-media-link__item">
      <a class="ecl-social-media-link__link" href="" title="Other social networks">Other social networks</a>
    </li>
  </ul>
</div>


<!--  Default list with horizontal display -->
<div class="ecl-social-media-link ecl-social-media-link--horizontal">
  <p class="ecl-paragraph">View European Commission on:</p>
  <ul class="ecl-social-media-link__list ecl-list ecl-list--unstyled ecl-list--inline">
    <li class="ecl-social-media-link__item">

      <a class="ecl-link  ecl-social-icon ecl-social-icon--facebook ecl-social-media-link__link" href="../../example.html#" title="Facebook">Facebook</a>
    </li>
    <li class="ecl-social-media-link__item">

      <a class="ecl-link  ecl-social-icon ecl-social-icon--twitter ecl-social-media-link__link" href="../../example.html#" title="Twitter">Twitter</a>
    </li>
    <li class="ecl-social-media-link__item">

      <a class="ecl-link  ecl-social-icon ecl-social-icon--instagram ecl-social-media-link__link" href="../../example.html#" title="Instagram">Instagram</a>
    </li>
    <li class="ecl-social-media-link__item">
      <a class="ecl-social-media-link__link" href="" title="Other social networks">Other social networks</a>
    </li>
  </ul>
</div>


<!-- Specific list with horizontal display -->
<div class="ecl-social-media-link ecl-social-media-link--horizontal">
  <ul class="ecl-social-media-link__list ecl-list ecl-list--unstyled ecl-list--inline">
    <li class="ecl-social-media-link__item">

      <a class="ecl-link  ecl-social-icon ecl-social-icon--facebook ecl-social-media-link__link" href="../../example.html#" title="See Jean-Claude Junker on Facebook">Jean-Claude Junker</a>
    </li>
    <li class="ecl-social-media-link__item">

      <a class="ecl-link  ecl-social-icon ecl-social-icon--facebook ecl-social-media-link__link" href="../../example.html#" title="See European Commission on Facebook">European Commission</a>
    </li>
    <li class="ecl-social-media-link__item">

      <a class="ecl-link  ecl-social-icon ecl-social-icon--twitter ecl-social-media-link__link" href="../../example.html#" title="See European Commission on Twitter">European Commission</a>
    </li>
    <li class="ecl-social-media-link__item">
      <a class="ecl-social-media-link__link" href="" title="Other social networks">Other social networks</a>
    </li>
  </ul>
</div>
  • Content: 
    /**
 * Social media
 * @define social-media-link
 */

// Import base and generic
@import '@ecl/ec-base/ec-base';
@import '@ecl/generic-component-social-media-link/generic-component-social-media-link';

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

// Use generic mixin
@include exports('ec-component-social-media-link') {
  @include ecl-social-media-link();
}
  • URL: /components/raw/ec-component-social-media-link/ec-component-social-media-link.scss
  • Filesystem Path: ../../src/systems/ec/ec-component/ec-component-social-media-link/ec-component-social-media-link.scss
  • Size: 435 Bytes
  • Handle: @ecl/ec-component-social-media-link
  • Tags: molecule
  • Preview:
  • Filesystem Path: ../../src/systems/ec/ec-component/ec-component-social-media-link/ec-component-social-media-link.twig