Europa Component Library

Blockquotes

Documentation • Demo

Blockquotes

Applies simple styles on ecl-blockquote class.

{#
  Accepts:
    - "body" (string, default: "")
    - "author" (string, optional)
    - "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 _css_classes = 'ecl-blockquote' %}
{% set _extra_attributes = '' %}

{# Internal logic - Process properties #}

{% if extra_classes is defined %}
  {% set _css_classes = _css_classes ~ ' ' ~ extra_classes %}
{% endif %}

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

<blockquote class="{{ _css_classes }}"{{ _extra_attributes|raw }}>
  <p class="ecl-paragraph ecl-blockquote__body">{{ body }}</p>
  {% if author is defined and author is not empty %}
  <footer class="ecl-blockquote__author">―&thinsp;<cite>{{ author }}</cite></footer>
  {% endif %}
</blockquote>
 
{
  "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.",
  "author": "Lorem ipsum"
}
 
<blockquote class="ecl-blockquote">
  <p class="ecl-paragraph ecl-blockquote__body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
  <footer class="ecl-blockquote__author">―&thinsp;<cite>Lorem ipsum</cite></footer>
</blockquote>
  • Content: 
    @mixin blockquotes() {
  border-left: 8px solid $ecl-color-secondary;
  font-size: map-get($ecl-font-size, 'l');
  font-style: italic;
  line-height: 1.5;
  margin: 0;
  padding: map-get($ecl-spacing, 'xxs') 0 map-get($ecl-spacing, 'xxs')
    map-get($ecl-spacing, 'm');
}

@mixin blockquotes-before() {
  content: open-quote;
}

@mixin blockquotes-after() {
  content: close-quote;
}
  • URL: /components/raw/ecl-blockquotes/_blockquotes-mixins.scss
  • Filesystem Path: framework/components/ecl-blockquotes/_blockquotes-mixins.scss
  • Size: 385 Bytes
  • Content: 
    /**
 * Blockquotes
 * @define blockquote
 */

@import 'blockquotes-mixins';

.ecl-blockquote {
  @include blockquotes();
}

.ecl-blockquote__body {
  line-height: inherit;
  margin: 0;

  &::before {
    @include blockquotes-before();
  }

  &::after {
    @include blockquotes-after();
  }
}

.ecl-blockquote__author {
  font-size: map-get($ecl-font-size, 's');
  font-weight: 600;
  margin-top: map-get($ecl-spacing, 'xxs');
}

// Variants

.ecl-blockquote--small {
  border-left-width: 6px;
  font-size: map-get($ecl-font-size, 'm');

  .ecl-blockquote__author {
    font-size: map-get($ecl-font-size, 'xs');
  }
}
  • URL: /components/raw/ecl-blockquotes/_blockquotes.scss
  • Filesystem Path: framework/components/ecl-blockquotes/_blockquotes.scss
  • Size: 618 Bytes
  • Content: 
    @import 'blockquotes-mixins';

.ecl-editor blockquote {
  @include blockquotes();

  p {
    display: inline;
    line-height: inherit;
  }

  &::before {
    @include blockquotes-before();
  }

  &::after {
    @include blockquotes-after();
  }
}
  • URL: /components/raw/ecl-blockquotes/_editor-blockquotes.scss
  • Filesystem Path: framework/components/ecl-blockquotes/_editor-blockquotes.scss
  • Size: 248 Bytes
  • Handle: @ec-europa/ecl-blockquotes
  • Preview:
  • Filesystem Path: framework/components/ecl-blockquotes/ecl-blockquotes.twig