Europa Component Library

EMA card

{#
  - "variant" (string): can be empty, 'info', 'authorized', 'refused' (default: '')
  - "title" (string): copyright text (default: '')
  - "content" (string): content text (default: '')
  - "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'}])
#}

{# Internal properties #}

{% set _title = title|default('') %}
{% set _content = content|default('') %}
{% set _icon = 'info' %}
{% set _css_class = 'ema-card' %}
{% set _extra_attributes = '' %}
{% set _icon_path = icon_path|default('../../framework/images/icons/ema-icons.svg') %}

{# Internal properties #}

{% set _css_class = 'ema-card' %}
{% set _extra_attributes = '' %}

{# Internal logic - Process properties #}

{% if variant is defined and variant is not empty %}
  {% set _css_class = _css_class ~ ' ' ~ 'ema-card--' ~ 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 }}">
  <a href="#" class="ema-card-text">
    <div class="ema-card-title">{{ title }}</div>
    <div class="ema-card-content">
      {% block card_content _content %}
    </div>
  </a>
</div>
/* No context defined for this component. */
<div class="ema-card" ">
  <a href="# " class="ema-card-text ">
    <div class="ema-card-title ">What's new</div>
    <div class="ema-card-content ">
          </div>
  </a>
</div>
  • Content:
    /**
     * Status component
     */
    
    .ema-card {
      background-color: map-get($ema-colors, 'light-grey-3');
      display: block;
      height: 100%;
      margin: 0;
      padding: map-get($ecl-spacing, 'xs') map-get($ecl-spacing, 'xs');
      text-decoration: none;
    
      &:hover {
        background-color: map-get($ema-colors, 'light-grey-2');
      }
    }
    
    .ema-card--- {
      background-image: url('../../framework/images/icons/ema-icons.svg#ema-icon-set_doi');
      background-size: 100px 82px;
    }
    
    .ema-card-text {
      color: initial;
      display: flex;
      flex-direction: column;
      justify-content: start;
      text-decoration: none;
    }
    
    .ema-card-title {
      border-bottom: 1px solid #9f9f9f;
      font-weight: 600;
      line-height: 1.66;
      margin-bottom: map-get($ecl-spacing, 's');
    }
    
    .ema-card-content {
      line-height: 1.66;
      margin-top: map-get($ecl-spacing, 'xxxs');
    }
    
  • URL: /components/raw/ema-card/ema-card.scss
  • Filesystem Path: framework/components/ema-card/ema-card.scss
  • Size: 819 Bytes
  • Handle: @ec-europa/ema-card
  • Tags: molecule
  • Preview:
  • Filesystem Path: framework/components/ema-card/ema-card.twig