Dropzones

Dropzones are areas that users can interact with to upload files, typically images. However, these can be used to allow users to upload a wide array of file types, specifically in our case, comma separate values (csv) for uploading contacts.

Dropzones

Drag and drop your file here.

Image
Image
Image
Image
Required .dropzone
Modifiers .is-active .is-hovered .is-invalid .is-large
<div class="dropzone"></div>
<div class="row">
<div class="drag col-3"><img src="http://placehold.it/300x200" alt="Image"></div>
<div class="drag col-3"><img src="http://placehold.it/300x200" alt="Image"></div>
<div class="drag col-3"><img src="http://placehold.it/300x200" alt="Image"></div>
<div class="drag col-3"><img src="http://placehold.it/300x200" alt="Image"></div>
</div>
view raw dropzone.html hosted with ❤ by GitHub

Dropzone Alert

Drag and drop your file here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec augue eu lacus aliquam lobortis.

Image
Image
Image
Image
Required .dropzone .has-inline-alert
<div class="dropzone has-inline-alert">
<div class="alert alert-inline alert-warning">
<p><i class="sg-icon sg-icon-warning"></i>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. In nec augue eu lacus aliquam lobortis.<i class="sg-icon sg-icon-x"></i></p>
</div>
</div>