Europa Style Guide

16.1 #file.1 file download default

Default implementation of the file download component.

Example

File title example

English (213.25 kB - PDF - 4 pages)

<div class="file ">
  <span class="icon icon--file file__icon"></span>
  <div class="file__metadata">
    <span class="file__title">File title example</span>
    <div class="file__info">
      <span class="file__content-language">English</span>
      <span class="file__properties">(213.25 kB - PDF - 4 pages)</span>
    </div>
  </div>
  <a href="#" class="btn btn-default file__btn">
    Download
    <span class="sr-only">(213.25 kB - PDF - 4 pages)</span>
  </a>
</div>

16.2 #file.2 file with translations

Displays the download file available in several languages.

Example

Belgium - Country factsheets

31 January 2018

English (392.23 KB - PDF - 2 pages)

Download

Available languages (3)

Name language
(392.23 KB - PDF - 2 pages)

Download (392.23 KB - PDF - 2 pages)
Name language
(392.23 KB - PDF - 2 pages)

Download (392.23 KB - PDF - 2 pages)
Name language
(392.23 KB - PDF - 2 pages)

Download (392.23 KB - PDF - 2 pages)

<div class="file ">
  <span class="icon icon--file file__icon"></span>
  <div class="file__metadata">
    <span class="file__title">Belgium - Country factsheets</span>
    <div class="file__date field paragraph--xsmall paragraph--strong">31 January 2018</div>
    <div class="file__info">
      <span class="file__content-language">English</span>
      <span class="file__properties">(392.23 KB - PDF - 2 pages)</span>
    </div>
  </div>
  <a href="#" class="btn btn-default file__btn">
    Download
    <span class="sr-only">(392.23 KB - PDF - 2 pages)</span>
  </a>
</div>

<div class="file__translations" id="file-translations">
  <a href="#file" class="file__translations-control" title="Click to see translations" data-toggle="collapse" data-parent="#file-translations" aria-expanded="false" aria-controls="file">Available languages (3)</a>
  <ul id="file" class="file__translations-list collapse in"><!-- Class .in is just for the style guide -->
    <li class="file__translations-item">
      <div class="file file--bare">
        <div class="file__metadata">
          <span class="file__title">Name language</span>
          <div class="file__info">(392.23 KB - PDF - 2 pages)</div>
        </div>
        <a href="#" class="btn file__btn btn--condensed is-internal">
          Download
          <span class="sr-only">(392.23 KB - PDF - 2 pages)</span>
        </a>
      </div>
    </li>
    <li class="file__translations-item">
      <div class="file file--bare">
        <div class="file__metadata">
          <span class="file__title">Name language</span>
          <div class="file__info">(392.23 KB - PDF - 2 pages)</div>
        </div>
        <a href="#" class="btn file__btn btn--condensed is-internal">
          Download
          <span class="sr-only">(392.23 KB - PDF - 2 pages)</span>
        </a>
      </div>
    </li>
    <li class="file__translations-item">
      <div class="file file--bare">
        <div class="file__metadata">
          <span class="file__title">Name language</span>
          <div class="file__info">(392.23 KB - PDF - 2 pages)</div>
        </div>
        <a href="#" class="btn file__btn btn--condensed is-internal">
          Download
          <span class="sr-only">(392.23 KB - PDF - 2 pages)</span>
        </a>
      </div>
    </li>
  </ul>
</div>

16.3 #file.3 file--link

Displays the link for a download/page.

Example

Generic external file link

Generic file link

Link to a .pdf file

Link to a presentation file (.ppt)

Link to a .jpg image file

<div class="file file--link">
  <span class="file__icon icon icon--file-link"></span>
  <div class="file__metadata--link">
    <a class="file__title" href="http://ext.link" title="file title">Generic external file link</a>
  </div>
</div>

<div class="file file--link">
  <span class="file__icon icon icon--file-link"></span>
  <div class="file__metadata--link">
    <a class="file__title is-internal" href="http://ext.link" title="file title">Generic file link</a>
  </div>
</div>

<div class="file file--link">
  <a class="file__title is-internal" href="http://ext.link.pdf" title="file title">Link to a .pdf file</a>
</div>

<div class="file file--link">
  <a class="file__title is-internal" href="http://ext.link.ppt" title="file title">Link to a presentation file (.ppt)</a>
</div>

<div class="file file--link">
  <a class="file__title is-internal" href="http://ext.link.jpg" title="file title">Link to a .jpg image file</a>
</div>

16.4 #file.4 file--image

Displays the file image.

Example

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..

<div style="max-width: 880px;">
  <span class="file file--image">
    <img src="https://picsum.photos/880/400" alt="">
    <span class="file__caption">
      Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..
    </span>
  </span>
</div>

16.5 #file.5 file--left | file--right

Mainly meant to support floating text around images or videos.

Example

Aliquam eget nibh diam. Sed eu ullamcorper eros. Maecenas dapibus velit quis consequat pharetra. Vestibulum sollicitudin orci viverra justo ornare, vitae consequat tellus tempus. Maecenas laoreet venenatis maximus.
Aliquam eget nibh diam. Sed eu ullamcorper eros. Maecenas dapibus velit quis consequat pharetra. Vestibulum sollicitudin orci viverra justo ornare, vitae consequat tellus tempus. Maecenas laoreet venenatis maximus.
Aliquam eget nibh diam. Sed eu ullamcorper eros. Maecenas dapibus velit quis consequat pharetra. Vestibulum sollicitudin orci viverra justo ornare, vitae consequat tellus tempus. Maecenas laoreet venenatis maximus.

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.. Aliquam eget nibh diam. Sed eu ullamcorper eros. Maecenas dapibus velit quis consequat pharetra. Vestibulum sollicitudin orci viverra justo ornare, vitae consequat tellus tempus. Maecenas laoreet venenatis maximus.
Aliquam eget nibh diam. Sed eu ullamcorper eros. Maecenas dapibus velit quis consequat pharetra. Vestibulum sollicitudin orci viverra justo ornare, vitae consequat tellus tempus. Maecenas laoreet venenatis maximus.
Aliquam eget nibh diam. Sed eu ullamcorper eros. Maecenas dapibus velit quis consequat pharetra. Vestibulum sollicitudin orci viverra justo ornare, vitae consequat tellus tempus. Maecenas laoreet venenatis maximus.

<div style="max-width: 880px; clear: both; padding-top: 40px;">
  <span class="file file--image file--left">
    <img src="https://picsum.photos/450/250" alt="" style="float:left; margin-right:10px">
  </span>
    Aliquam eget nibh diam. Sed eu ullamcorper eros. Maecenas dapibus velit quis consequat pharetra. Vestibulum sollicitudin orci viverra justo ornare, vitae consequat tellus tempus. Maecenas laoreet venenatis maximus.
    <br>
    Aliquam eget nibh diam. Sed eu ullamcorper eros. Maecenas dapibus velit quis consequat pharetra. Vestibulum sollicitudin orci viverra justo ornare, vitae consequat tellus tempus. Maecenas laoreet venenatis maximus.
    <br>
    Aliquam eget nibh diam. Sed eu ullamcorper eros. Maecenas dapibus velit quis consequat pharetra. Vestibulum sollicitudin orci viverra justo ornare, vitae consequat tellus tempus. Maecenas laoreet venenatis maximus.
</div>

<div style="max-width: 880px; clear:both; padding-top: 40px;">
  <span class="file file--image file--right">
    <img src="https://picsum.photos/450/250" alt=""  style="float:right; margin-left:10px">
  </span>
    Aliquam eget nibh diam. Sed eu ullamcorper eros. Maecenas dapibus velit quis consequat pharetra. Vestibulum sollicitudin orci viverra justo ornare, vitae consequat tellus tempus. Maecenas laoreet venenatis maximus.
    <br>
    Aliquam eget nibh diam. Sed eu ullamcorper eros. Maecenas dapibus velit quis consequat pharetra. Vestibulum sollicitudin orci viverra justo ornare, vitae consequat tellus tempus. Maecenas laoreet venenatis maximus.
    <br>
    Aliquam eget nibh diam. Sed eu ullamcorper eros. Maecenas dapibus velit quis consequat pharetra. Vestibulum sollicitudin orci viverra justo ornare, vitae consequat tellus tempus. Maecenas laoreet venenatis maximus.
</div>
<div style="max-width: 880px; clear: both; padding-top: 40px;">
  <span class="file file--image file--left file--caption">
    <img src="https://picsum.photos/450/250" alt="" style="float:left; margin-right:10px">
    <span class="file__caption">
      Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..
    </span>
  </span>
    Aliquam eget nibh diam. Sed eu ullamcorper eros. Maecenas dapibus velit quis consequat pharetra. Vestibulum sollicitudin orci viverra justo ornare, vitae consequat tellus tempus. Maecenas laoreet venenatis maximus.
    <br>
    Aliquam eget nibh diam. Sed eu ullamcorper eros. Maecenas dapibus velit quis consequat pharetra. Vestibulum sollicitudin orci viverra justo ornare, vitae consequat tellus tempus. Maecenas laoreet venenatis maximus.
    <br>
    Aliquam eget nibh diam. Sed eu ullamcorper eros. Maecenas dapibus velit quis consequat pharetra. Vestibulum sollicitudin orci viverra justo ornare, vitae consequat tellus tempus. Maecenas laoreet venenatis maximus.
</div>

<div style="max-width: 880px; clear:both; padding-top: 40px;">
  <span class="file file--image file--right file--caption">
    <img src="https://picsum.photos/450/250" alt=""  style="float:right; margin-left:10px">
    <span class="file__caption">
      Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..
    </span>
  </span>
    Aliquam eget nibh diam. Sed eu ullamcorper eros. Maecenas dapibus velit quis consequat pharetra. Vestibulum sollicitudin orci viverra justo ornare, vitae consequat tellus tempus. Maecenas laoreet venenatis maximus.
    <br>
    Aliquam eget nibh diam. Sed eu ullamcorper eros. Maecenas dapibus velit quis consequat pharetra. Vestibulum sollicitudin orci viverra justo ornare, vitae consequat tellus tempus. Maecenas laoreet venenatis maximus.
    <br>
    Aliquam eget nibh diam. Sed eu ullamcorper eros. Maecenas dapibus velit quis consequat pharetra. Vestibulum sollicitudin orci viverra justo ornare, vitae consequat tellus tempus. Maecenas laoreet venenatis maximus.
</div>

16.6 #file.6 File video

Displays the file video.

Example

Iframe example

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...

Video tag example

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...

<div style="max-width: 880px;"> <!-- only required for the style guide -->
<div class="kss-state">Iframe example</div>
  <div class="file file--video">
    <div class="file__container">
      <iframe src="https://www.sample-videos.com/video701/mp4/720/big_buck_bunny_720p_1mb.mp4" allowfullscreen="allowfullscreen" scrolling="no"></iframe>
    </div>
    <span class="file__caption">
      Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
    </span>
  </div>
  <div class="kss-state">Video tag example</div>
  <div class="file file--video">
    <div class="file__container">
      <video src="https://www.sample-videos.com/video701/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4" controls="controls">
      </video>
    </div>
    <span class="file__caption">
      Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
    </span>
  </div>

</div>

16 #file File

16.1 #file.1 file download default

16.2 #file.2 file with translations

16.3 #file.3 file--link

16.4 #file.4 file--image

16.5 #file.5 file--left | file--right

16.6 #file.6 File video