Europa Component Library

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): can be empty or 'horizontal' (default: empty)
    - "has_text" (bool): display text before links or not (default: true)
    - "text" (string): additional text displayed before the links (default: 'View European Commission on:')
    - "links" (array): [{
        "href" (string): target of the link (default: empty)
        "label" (string): label of the link (default: empty)
        "title" (string): title of the link (default: empty)
        "variant" (string): variant of the social network. Should be one of the variant listed in Social icons component (default: empty)
      }]
      - "more" {object}: {
        - "href" (string): target of the "more" link (default: empty)
        - "label" (string): label of the "more" link (default: 'Other social networks')
      }
    - "extra_classes" (string): extra CSS classes to be added
    - "extra_attributes" (array): extra attributes classes (optional, format: [{ 'name': 'name_of_the_attribute', 'value': 'value_of_the_attribute'}])
  Blocks:
    - "text_block": instead of providing additional text as a string, you can also embed the template and fill the "text" block directly
#}

{# Internal properties #}

{% set _has_text = has_text|default(false) %}
{% set _text = text|default('View European Commission on:') %}
{% set _more = more|default({
  label: more.label|default('Other social networks'),
  href: more.href|default('')
}) %}
{% set _css_class = 'ecl-social-media-link' %}
{% set _extra_attributes = '' %}

{# Internal logic - Process properties #}

{% if variant is defined and variant is not empty %}
  {% set _css_class = _css_class ~ ' ' ~ 'ecl-social-media-link--' ~ variant %}
{% endif %}

{% if extra_classes is defined and extra_classes is not empty %}
  {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
{% endif %}

{% if extra_attributes is defined and extra_attributes is not empty %}
  {% for attr in extra_attributes %}
    {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~ '"' %}
  {% endfor %}
{% endif %}

{# Print result #}

<div class="{{ _css_class }}" {{ _extra_attributes|raw }}>
  {% block text_block %}
  {% if has_text == true %}
  <p class="ecl-paragraph">{{ _text }}</p>
  {% endif %}
  {% endblock %}

  <ul class="ecl-social-media-link__list ecl-list ecl-list--unstyled{% if variant == 'horizontal' %} ecl-list--inline{% endif %}">
  {% for _link in links %}
    <li class="ecl-social-media-link__item">
      {% include '@ec-europa/ecl-social-icons' with {
        link: _link,
        extra_attributes: [{ name: 'title', value: _link.title}],
        extra_classes: 'ecl-social-media-link__link',
      } %}
    </li>
  {% endfor %}

    <li class="ecl-social-media-link__item">
      <a class="ecl-social-media-link__link" href="{{ _more.href }}">{{ _more.label }}</a>
    </li>
  </ul>
</div>
 
/* Default list with default display */
{
  "links": [
    {
      "href": "#",
      "label": "Facebook",
      "title": "Facebook",
      "variant": "facebook"
    },
    {
      "href": "#",
      "label": "Twitter",
      "title": "Twitter",
      "variant": "twitter"
    },
    {
      "href": "#",
      "label": "Instagram",
      "title": "Instagram",
      "variant": "instagram"
    }
  ],
  "has_text": true
}


/* Specific list with default display */
{
  "links": [
    {
      "href": "#",
      "label": "Jean-Claude Junker",
      "title": "See Jean-Claude Junker on Facebook",
      "variant": "facebook"
    },
    {
      "href": "#",
      "label": "European Commission",
      "title": "See European Commission on Facebook",
      "variant": "facebook"
    },
    {
      "href": "#",
      "label": "European Commission",
      "title": "See European Commission on Twitter",
      "variant": "twitter"
    }
  ]
}


/*  Default list with horizontal display */
{
  "variant": "horizontal",
  "links": [
    {
      "href": "#",
      "label": "Facebook",
      "title": "Facebook",
      "variant": "facebook"
    },
    {
      "href": "#",
      "label": "Twitter",
      "title": "Twitter",
      "variant": "twitter"
    },
    {
      "href": "#",
      "label": "Instagram",
      "title": "Instagram",
      "variant": "instagram"
    }
  ],
  "has_text": true
}


/* Specific list with horizontal display */
{
  "variant": "horizontal",
  "links": [
    {
      "href": "#",
      "label": "Jean-Claude Junker",
      "title": "See Jean-Claude Junker on Facebook",
      "variant": "facebook"
    },
    {
      "href": "#",
      "label": "European Commission",
      "title": "See European Commission on Facebook",
      "variant": "facebook"
    },
    {
      "href": "#",
      "label": "European Commission",
      "title": "See European Commission on Twitter",
      "variant": "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-icon-social ecl-icon-social--facebook ecl-social-media-link__link" href="#">Facebook</a>
    </li>
    <li class="ecl-social-media-link__item">

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

      <a class="ecl-link ecl-icon-social ecl-icon-social--instagram ecl-social-media-link__link" href="#">Instagram</a>
    </li>

    <li class="ecl-social-media-link__item">
      <a class="ecl-social-media-link__link" href="">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-icon-social ecl-icon-social--facebook ecl-social-media-link__link" href="#">Jean-Claude Junker</a>
    </li>
    <li class="ecl-social-media-link__item">

      <a class="ecl-link ecl-icon-social ecl-icon-social--facebook ecl-social-media-link__link" href="#">European Commission</a>
    </li>
    <li class="ecl-social-media-link__item">

      <a class="ecl-link ecl-icon-social ecl-icon-social--twitter ecl-social-media-link__link" href="#">European Commission</a>
    </li>

    <li class="ecl-social-media-link__item">
      <a class="ecl-social-media-link__link" href="">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-link--horizontal ecl-icon-social ecl-icon-social--facebook ecl-icon-social--horizontal ecl-social-media-link__link" href="#">Facebook</a>
    </li>
    <li class="ecl-social-media-link__item">

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

      <a class="ecl-link ecl-link--horizontal ecl-icon-social ecl-icon-social--instagram ecl-icon-social--horizontal ecl-social-media-link__link" href="#">Instagram</a>
    </li>

    <li class="ecl-social-media-link__item">
      <a class="ecl-social-media-link__link" href="">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-link--horizontal ecl-icon-social ecl-icon-social--facebook ecl-icon-social--horizontal ecl-social-media-link__link" href="#">Jean-Claude Junker</a>
    </li>
    <li class="ecl-social-media-link__item">

      <a class="ecl-link ecl-link--horizontal ecl-icon-social ecl-icon-social--facebook ecl-icon-social--horizontal ecl-social-media-link__link" href="#">European Commission</a>
    </li>
    <li class="ecl-social-media-link__item">

      <a class="ecl-link ecl-link--horizontal ecl-icon-social ecl-icon-social--twitter ecl-icon-social--horizontal ecl-social-media-link__link" href="#">European Commission</a>
    </li>

    <li class="ecl-social-media-link__item">
      <a class="ecl-social-media-link__link" href="">Other social networks</a>
    </li>
  </ul>
</div>
  • Content: 
    /**
 * Social media
 * @define social-media-link
 */

.ecl-social-media-link {
  @include ecl-hidden-print();

  background-color: map-get($ecl-colors, 'grey-10');
  display: block;
  margin: 0;
  padding: map-get($ecl-spacing, 'm');
  width: 100%;
}

.ecl-social-media-link__item {
  margin-bottom: map-get($ecl-spacing, 'xxs');
  vertical-align: top;

  &:last-child {
    margin-bottom: 0;
  }
}

.ecl-social-media-link__link {
  align-items: center;
  display: flex;
  min-height: 2rem;
}

// Horizontal
.ecl-social-media-link--horizontal {
  .ecl-social-media-link__list {
    max-width: 100%;
  }

  .ecl-social-media-link__item {
    margin-left: 0;
    margin-right: map-get($ecl-spacing, 'm');
  }

  .ecl-social-media-link__item:last-child {
    margin-right: 0;
  }
}
  • URL: /components/raw/ecl-social-media-links/ecl-social-media-links.scss
  • Filesystem Path: framework/components/ecl-social-media-links/ecl-social-media-links.scss
  • Size: 779 Bytes
  • Handle: @ec-europa/ecl-social-media-links
  • Tags: molecule
  • Preview:
  • Filesystem Path: framework/components/ecl-social-media-links/ecl-social-media-links.twig