4.4.1 molecules.files.node File in node

Toggle example guides Toggle HTML markup

The display of files in nodes is done with small cards (emphasis layer). The cards must be placed in a grid .card-files__grid. The element consists of the file name (max 3 lines truncated), the file type and file size.

Markup: 03-molecules/file/file-node.twig
<ul class="card-files__grid">
<li class="card-file">
  <a class="card-file__link" href="#" title="{{ 'Open file in a new window'|t }}" target="_blank">
    <span class="card-file__title">Vestibulum id ligula porta felis euismod semper.pdf</span>
    <span class="card-file__type">
        <img class="card-file__icon" src="kss-assets/base/images/mime-icons/icon_1_pdf_x16.png" srcset="kss-assets/base/images/mime-icons/icon_1_pdf_x32.png 2x" alt="{{ node_icon }}" />
        <span class="card-file__size">40.14 KB</span>
      </span>
  </a>
</li>
</ul>
Source: 03-molecules/file/file.scss, line 10