FAZUA Living Styleguide

FAZUA Living Styleguide

Source: scss/_4-Controls/_upload.scss, line 1

4.5 Uploads

Alias for form input file fields with example image. Image modal must be added.

Example

Kategorie
Invalid file!
Keine Datei ausgewählt
Die maximale Dateigröße beträgt 4 MB Beispielbild anzeigen
<div class="form-group cm-upload js--custom-upload">
   <span class="cm-upload__title p4">Kategorie</span>
   <div class="cm-upload__container">
       <div class="cm-upload__input">
           <input type="file" class="cm-upload__file" id="file-example" name="example">
           <span class="cm-upload__error">Invalid file!</span>
           <label for="file-example" class="cm-upload__label">
               <span class="cm-upload__filename"></span>
               <span class="cm-upload__selectmsg">Select a file</span>
               <span class="cm-upload__dragmsg">or drag it here</span>
           </label>
       </div>
       <div class="cm-upload__no-file f2">Keine Datei ausgewählt</div>
       <button class="cm-upload__remove-btn">
           <svg class="icon">
               <use xlink:href="#icon-close" href="#icon-close" aria-hidden="true"></use>
           </svg>
       </button>
   </div>
   <div class="cm-upload__footnotes">
       <span class="cm-upload__info f2">Die maximale Dateigröße beträgt 4 MB</span>
       <a href="#" class="cm-upload__example f2" data-toggle="modal" data-target="#imageModal" data-image-src="placeholder/image-slider-01.jpg">
           <svg class="icon">
               <use xlink:href="#icon-picture" href="#icon-picture" aria-hidden="true"></use>
           </svg>
           Beispielbild anzeigen</a>
   </div>
</div>