EC System

Labels

Documentation • Demo

Labels

Why and how to use this component

Allows the user to see an highlighted element or to indicate a status to the user.

Label types

Status Colour
Upcoming EC yellow 25
Open / Highlight EC yellow 100
Closed EC grey 15

When to use this component

  • on the top of the listing component, close to the meta information

Do not use this component

  • if you are not using a listing component
  • with long sentences
  • with smaller case letters. Labels are always in uppercase letters
{#
  Parameters:
    - "status" (string) (default: 'upcoming'): one of 'upcoming', 'open', 'close'
    - "body" (string) (default: '')
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
#}

{% include '@ecl/generic-component-label' with {
  'status': status|default('upcoming'),
  'body': body|default(''),
  'extra_classes': extra_classes|default(''),
  'extra_attributes': extra_attributes|default([])
} only %}
 
/* Upcoming */
{
  "status": "upcoming",
  "body": "Call status: upcoming"
}


/* Open / Highlight  */
{
  "status": "open",
  "body": "Call status: open"
}


/* Closed */
{
  "status": "close",
  "body": "Call status: closed"
}


<!-- Upcoming -->
<span class="ecl-label ecl-label--upcoming">Call status: upcoming</span>


<!-- Open / Highlight  -->
<span class="ecl-label ecl-label--open">Call status: open</span>


<!-- Closed -->
<span class="ecl-label ecl-label--close">Call status: closed</span>
  • Content: 
    /**
 * Labels component
 * @define label
 */

// Import base and generic
@import '@ecl/ec-base/ec-base';
@import '@ecl/generic-component-label/generic-component-label';

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