# @ecl/ec-component-logo

> ECL Logos

Latest version **1.6.0** (published 2019-12-09) · EUPL-1.1 license · 0 weekly downloads

## Install

```sh
npm install @ecl/ec-component-logo
pnpm add @ecl/ec-component-logo
yarn add @ecl/ec-component-logo
bun add @ecl/ec-component-logo
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: no vulnerabilities; high maintenance score.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.6.0 |
| Published | 2019-12-09 |
| First published | 2018-04-27 |
| Weekly downloads | 0 |
| License | EUPL-1.1 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 728.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 162 |
| Author | European Commission |
| Maintainers | kalin.chernev, weslito, yhuard |
| Keywords | ecl, europa-component-library, design-system |

## Links

- npm: https://www.npmjs.com/package/@ecl/ec-component-logo
- Repository: https://github.com/ec-europa/europa-component-library
- Issues: https://github.com/ec-europa/europa-component-library/issues
- npm.io page: https://npm.io/package/@ecl/ec-component-logo

## Dependencies (3)

- [@ecl/ec-base](https://npm.io/package/@ecl/ec-base.md) ^1.2.0
- [@ecl/generic-component-logo](https://npm.io/package/@ecl/generic-component-logo.md) ^1.5.0
- [@ecl/ec-utility-screen-reader](https://npm.io/package/@ecl/ec-utility-screen-reader.md) ^1.2.0

## Recent versions

- 1.6.0 (latest) — 2019-12-09
- 1.5.0 — 2019-08-29
- 1.4.0 — 2019-07-23
- 1.3.0 — 2019-04-04
- 2.0.0-alpha.2 — 2018-10-15
- 2.0.0-alpha.1 — 2018-10-11
- 1.2.0 — 2018-07-09
- 1.1.0 — 2018-05-25
- 1.0.0 — 2018-04-27

## README

# EC logo

Default EC logo.

```html
<a href="https://ec.europa.eu" class="ecl-logo" title="European Commission">
  <span class="ecl-u-sr-only">European Commission</span>
</a>
```

Or using Twig:

```twig
{% include '@ecl/ec-component-logo' with {
  'href': 'https://ec.europa.eu',
  'title': 'European Commission',
} %}
```

## EC logotype

EC logo with text. Add `ecl-logo--logotype` class to use it:

```html
<a href="https://ec.europa.eu" class="ecl-logo ecl-logo--logotype" title="European Commission">
  <span class="ecl-u-sr-only">European Commission</span>
</a>
```

Or using Twig:

```twig
{% include '@ecl/ec-component-logo' with {
  'href': 'https://ec.europa.eu',
  'title': 'European Commission',
  'type': 'right',
} %}
```

## EC logotype with text below the logo

EC logo with text below. Add `ecl-logo--logotypebelow` class to use it:

```html
<a href="https://ec.europa.eu" class="ecl-logo ecl-logo--logotypebelow" title="European Commission">
  <span class="ecl-u-sr-only">European Commission</span>
</a>
```

Or using Twig:

```twig
{% include '@ecl/ec-component-logo' with {
  'href': 'https://ec.europa.eu',
  'title': 'European Commission',
  'type': 'below',
} %}
```

## External classes

Additionally, you can add external classes with the `extra_class` optional
parameter.

For example:

```twig
{% include '@ecl/ec-component-logo' with {
  'href': 'https://ec.europa.eu',
  'title': 'Home - European Commission',
  'type': 'right',
  'extra_classes': 'site-header__logo'
} %}
```

---
_Source: https://npm.io/package/@ecl/ec-component-logo · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._