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