EC System

Files: Default file download

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: 'ec' } %}
 
{
  "title": "File title example",
  "language": "English",
  "meta": "213.25 kB - PDF - 4 pages",
  "button_label": "Download",
  "icon": "file"
}
 
<section class="ecl-file">
  <div class="ecl-file__body">
    <div class="ecl-row">
      <div class=" ecl-col ecl-col-md-8">
        <span class="ecl-icon ecl-icon--file ecl-file__icon"></span>
        <div class="ecl-file__metadata">
          <div class="ecl-file__title">File title example</div>
          <div class="ecl-file__info">
            <span class="ecl-file__language">English</span>
            <span class="ecl-file__properties">(213.25 kB - PDF - 4 pages)</span>
          </div>
        </div>
      </div>
      <div class="ecl-col-12 ecl-col-md-4">

        <button type="submit" class="ecl-button ecl-button--default ecl-button--block ecl-button--file ecl-file__download" type="button">Download<span class="ecl-u-sr-only">(213.25 kB - PDF - 4 pages)</button>
      </div>
    </div>
  </div>
</section>
  • Content: 
    /**
 * File
 * @define file
 */

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

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

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