File Preview
A representation of content uploaded as an attachment.
Class | Type | |
---|---|---|
file-preview
|
File Preview | A class representing a file preview |
Types
There are 2 types of content representation:
Class | Type | |
---|---|---|
is-no-file
|
No Image | Use in cases the uploaded file is not an image and a preview is not available. |
file-preview-content
|
Content | Use in cases an image (.png, .jpeg, .jpg, etc.) was uploaded. Image will appear as a thumbnail. |
<a href="" class="file-preview is-with-image" aria-label="open file in new window">
<div class="file-preview-image"><img src="https://unsplash.it/600" alt="" /></div>
<div class="file-preview-content">
<div class="avatar"><span class="icon-external-link" aria-hidden="true"></span></div>
</div>
</a>
<a href="" class="file-preview is-no-file" aria-label="file">
<div class="file-preview-content">
<div class="avatar"><span class="icon-document" aria-hidden="true"></span></div>
<p>Preview not available</p>
</div>
</a>