4.4.2 molecules.files.form File in form

Toggle example guides Toggle HTML markup

Files in forms need to be able to changed easily. For example for images their is a preview shown when editing content. For file attachments the file molecule is part of the multiple file upload widget where multiple rows can be added.

Markup: 03-molecules/file/file-form.twig
<span class="file">
  <span class="file-icon">
    <img class="node-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>
  <span class="file-link"><a href="#" title="{{ 'Open file in a new window'|t }}" target="_blank">Vestibulum id ligula porta felis euismod semper.pdf</a></span>
  <span class="file-size">40.14 KB</span>
</span>
Source: 03-molecules/file/file.scss, line 21