Europa Component Library

RSS Links

Documentation • Demo

RSS Link

Why and how to use this component

The RSS link should be used on the top of list pages where content is often refreshed, as it provides users with an easy way to know when new items have been added.

When to use this component

  • on list pages that are frequently refreshed (e.g. articles / publications / events)
<div class="ecl-rss-links">
  <span class="ecl-rss-links__label">Get updates:</span>
  {% include '@ec-europa/ecl-social-icons' with {
    link: {
      href: '#',
      variant: 'rss',
      extra_classes: 'ecl-rss-links__link',
      label: 'RSS'
    }
  } %}
</div>
 
/* No context defined for this component. */
 
<div class="ecl-rss-links">
  <span class="ecl-rss-links__label">Get updates:</span>

  <a class="ecl-link ecl-icon-social ecl-icon-social--rss" href="#">RSS</a>
</div>
  • Content: 
    /**
 * Blockquotes
 * @define rss-links
 */

.ecl-rss-links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
}

.ecl-rss-links__label {
  color: $ecl-color-shade;
  flex-shrink: 0;
  font-size: map-get($ecl-font-size, 's');
  font-weight: bold;
  margin: map-get($ecl-font-size, 'xxxs') map-get($ecl-font-size, 'xxs')
    map-get($ecl-font-size, 'xxxs') 0;
}

.ecl-rss-links__link {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  font-size: map-get($ecl-font-size, 's');
  justify-content: center;

  &::before {
    flex-shrink: 0;
  }
}
  • URL: /components/raw/ecl-rss-links/_rss-links.scss
  • Filesystem Path: framework/components/ecl-rss-links/_rss-links.scss
  • Size: 604 Bytes
  • Handle: @ec-europa/ecl-rss-links
  • Tags: molecule
  • Preview:
  • Filesystem Path: framework/components/ecl-rss-links/ecl-rss-links.twig