EU System

Files: Links to files

Documentation • Demo

Files

File component is used to show info about the file that can be downloaded or how are displayed multimedia files (image and video).

Default file download

Default implementation of the file download component.

File download with translations

Displays the download file available in several languages.

Displays the links for a download page.

Image file

Displays the file image.

Video file

Displays the file video (in an iframe or video tag). It is recommended to use the ratio utility to enforce correct display.

{#
  Parameters:
    - "variant" (string): can be 'translations', 'links', 'images', 'videos' or empty
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
    - "system" (string) (default: "generic")

  Default parameters:
    - "title" (string): title of the file (default: empty)
    - "language" (string): language of the file (default: empty)
    - "meta" (string): additional information concerning the file: size, type, number of page (default: empty)
    - "button_label" (string): label of the download button (default: "Download")
    - "icon" (string): icon corresponding to the file type. Should be one of ecl-icons (default: empty)

  Translations variant parameters:
    - "title" (string): title of the file (default: empty)
    - "language" (string): language of the file (default: empty)
    - "meta" (string): additional information concerning the file: size, type, number of page (default: empty)
    - "button_label" (string): label of the download button (default: "Download")
    - "icon" (string): icon corresponding to the file type. Should be one of ecl-icons (default: empty)
    - "translations" (array) [{
      - "title" (string): title of the translated file (default: empty)
      - "meta" (string): additional information concerning the translated file: size, type, number of page (default: empty)
    }]
    - "translations_label" (string): global label for translations area. Shoud display number of translations (default: "Available languages: 0")
    - "translations_tooltip" (string): tooltip when hovering global label (default: "Click to see translations")

  Links variant parameters:
    - "links" (array): [{
      - "title" (string): title of the link (default: empty)
      - "icon" (string): icon corresponding to the file type. Should be one of ecl-icons (default: empty)
      - "href" (string): target of the link (default: empty)
      - "is_external" (boolean): is the link an external link or not (default: false)
      - "type" (string): (optional) extension of the file (default: empty)
    }]

  Images variant parameters:
    - "src" (string): source of the image (default: empty)
    - "alt" (string): alternative text for the image (default: empty)
    - "caption" (string): description of the image (default: empty)

  Videos variant parameters:
    - "src" (string): source of the video (default: empty)
    - "caption" (string): description of the video (default: empty)
    - "is_iframe" (boolean): video is displayed in an iframe or not (default: false)
    - "ratio" (string): ratio of the video. Should be one of ecl-ratio. Format: '16-9' (default: empty)
#}

{% include '@ecl/generic-component-file' with { system: 'eu' } %}
 
{
  "variant": "link",
  "links": [
    {
      "title": "Generic file link",
      "icon": "file",
      "href": "../../example.html#"
    },
    {
      "title": "Generic external file link",
      "icon": "file",
      "href": "../../example.html#",
      "is_external": true
    },
    {
      "title": "Link to a .pdf file",
      "icon": "file",
      "href": "../../example.html#",
      "type": "pdf"
    },
    {
      "title": "Link to a presentation .ppt file",
      "icon": "slides",
      "href": "../../example.html#",
      "type": "ppt"
    },
    {
      "title": "Link to an image .jpg file",
      "icon": "image",
      "href": "../../example.html#",
      "type": "jpg"
    }
  ]
}
 
<section class="ecl-file ecl-file--link">
  <div class="ecl-file__link-container">
    <a href="../../example.html#" class="ecl-link ecl-file__link ">
      <span class="ecl-icon ecl-icon--file ecl-file__icon"></span>
      <span class="ecl-file__title">Generic file link</span>
    </a>
  </div>
  <div class="ecl-file__link-container">
    <a href="../../example.html#" class="ecl-link ecl-file__link ecl-link--external">
      <span class="ecl-icon ecl-icon--file ecl-file__icon"></span>
      <span class="ecl-file__title">Generic external file link</span>
    </a>
  </div>
  <div class="ecl-file__link-container">
    <a href="../../example.html#" class="ecl-link ecl-file__link ">
      <span class="ecl-icon ecl-icon--file ecl-file__icon"></span>
      <span class="ecl-file__title">Link to a .pdf file</span>
      <span class="ecl-file__type">pdf</span>
    </a>
  </div>
  <div class="ecl-file__link-container">
    <a href="../../example.html#" class="ecl-link ecl-file__link ">
      <span class="ecl-icon ecl-icon--slides ecl-file__icon"></span>
      <span class="ecl-file__title">Link to a presentation .ppt file</span>
      <span class="ecl-file__type">ppt</span>
    </a>
  </div>
  <div class="ecl-file__link-container">
    <a href="../../example.html#" class="ecl-link ecl-file__link ">
      <span class="ecl-icon ecl-icon--image ecl-file__icon"></span>
      <span class="ecl-file__title">Link to an image .jpg file</span>
      <span class="ecl-file__type">jpg</span>
    </a>
  </div>
</section>
  • Content: 
    /**
 * File
 * @define file
 */

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

// Check if overridden dependencies are already loaded, if needed
@include check-imports(
  ('eu-style-icon', 'eu-component-button', 'eu-component-link')
);

// Use generic mixin
@include exports('eu-component-file') {
  @include ecl-file();
}
  • URL: /components/raw/eu-component-file/eu-component-file.scss
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-file/eu-component-file.scss
  • Size: 399 Bytes