Europa Component Library

Buttons

Documentation • Demo

EMA Buttons

Based on ECL buttons, with custom modifiers.

{% include '@ec-europa/ecl-buttons' %}
 
/* Call */
{
  "label": "Call",
  "extra_classes": "ecl-button--ema-primary",
  "modifier": "primary"
}


/* Tag */
{
  "label": "Tag",
  "extra_classes": "ecl-button--ema-tag",
  "modifier": "tag"
}


/* Small */
{
  "label": "Small",
  "extra_classes": "ecl-button--ema-small"
}


<!-- Call -->
<button class="ecl-button ecl-button--primary ecl-button--ema-primary">Call</button>


<!-- Tag -->
<button class="ecl-button ecl-button--tag ecl-button--ema-tag">Tag</button>


<!-- Small -->
<button class="ecl-button ecl-button--default ecl-button--ema-small">Small</button>
  • Content: 
    .ecl-button--ema-primary {
  background-color: map-get($ema-colors, 'primary');
  border-color: map-get($ema-colors, 'primary');
  color: #fff;
  font-family: $ema-font-family-base;
  &:focus {
    border-color: map-get($ema-colors, 'blue-1');
    outline: 3px solid map-get($ema-colors, 'blue-1');
  }
}

.ecl-button--ema-tag {
  background-color: map-get($ema-colors, 'light-grey-2');
  color: map-get($ema-colors, 'primary');
  font-family: $ema-font-family-base;
  &:focus {
    border-color: map-get($ema-colors, 'blue-1');
    outline: 3px solid map-get($ema-colors, 'blue-1');
  }
}

.ecl-button--ema-small {
  background-color: #fff;
  border-color: map-get($ema-colors, 'primary');
  color: map-get($ema-colors, 'primary');
  font-family: $ema-font-family-base;
  font-size: map-get($ecl-font-size, 'xs');
  font-weight: initial;
  padding: map-get($ecl-spacing, 'xxxs');
  &:focus,
  &:hover {
    background-color: map-get($ema-colors, 'primary');
    color: #fff;
    outline-color: map-get($ema-colors, 'primary');
  }
}

.ecl-button--ema-tag:focus,
.ecl-button--ema-primary:focus {
  outline-color: map-get($ema-colors, 'primary');
}
  • URL: /components/raw/ema-buttons/ema-buttons.scss
  • Filesystem Path: framework/components/ema-buttons/ema-buttons.scss
  • Size: 1.1 KB
  • Handle: @ec-europa/ema-buttons
  • Tags: atom
  • Preview:
  • Filesystem Path: framework/components/ema-buttons/ema-buttons.twig