EU System

Meta

Documentation • Demo

Meta

Why and when to use this component

The meta information displays extra context about a piece of content that the user is browsing.\ It should always be displayed in uppercase and different meta items should be separated with pipe characters.\ You shouldn’t have more than two meta items on a single entry.

When to use this component

  • the default meta should be used on list blocks to provide extra context to a particular entry before the user clicks through to its detail page
  • the header meta should be used on the aforementioned detail pages on the page header area
  • the header meta should also be used on other single pages where you want to display extra context about what the page is about

Do not use this component

  • on landing pages
  • with lowercase except for dates

Implementation

Here are the possible modifiers:

  • .ecl-meta–header: Meta header modifier that is currently used in the page header, it is larger than the meta component alone
{#
  Parameters:
    - "variant" (string) (default: ''): can be '' or 'header'
    - "metas" (array) (default: []): array of strings; each one correspond to a meta item
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
#}

{% include '@ecl/generic-component-meta' with {
  'variant': variant|default(''),
  'metas': metas|default([]),
  'extra_classes': extra_classes|default(''),
  'extra_attributes': extra_attributes|default([])
} only %}
 
/* Default meta */
{
  "metas": [
    "news article",
    "17 September 2014"
  ]
}


/* Header meta */
{
  "variant": "header",
  "metas": [
    "news article",
    "17 September 2014"
  ]
}


<!-- Default meta -->
<div class="ecl-meta">
  <span class="ecl-meta__item">news article</span>
  <span class="ecl-meta__item">17 September 2014</span>
</div>


<!-- Header meta -->
<div class="ecl-meta ecl-meta--header">
  <span class="ecl-meta__item">news article</span>
  <span class="ecl-meta__item">17 September 2014</span>
</div>
  • Content: 
    /*
 * ECL meta
 */

// Import base and generic
@import '@ecl/eu-base/eu-base';
@import '@ecl/generic-component-meta/generic-component-meta';

// Use generic mixin
@include exports('eu-component-meta') {
  @include ecl-meta();
}
  • URL: /components/raw/eu-component-meta/eu-component-meta.scss
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-meta/eu-component-meta.scss
  • Size: 228 Bytes
  • Handle: @ecl/eu-component-meta
  • Tags: atom
  • Preview:
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-meta/eu-component-meta.twig