Upload

I find the lack of documentation... disturbing 😏, don't you?

Default

SHIELD_screenshot.png

			
				<div class="c-upload ">
	<input class="c-upload__input" type="file" name="">
	<div class="c-upload__container">
		<button class="c-button c-upload__button">
			<span class="c-button__text">Kies een bestand</span>
		</button>
		<div class="c-upload__info-container">
			<div class="c-upload__info">
				<div class="c-icon c-upload__info-icon">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
						<path d="M20.3,4.6l-3.9-3.9C16,0.2,15.4,0,14.8,0H5.3C4,0,3,1,3,2.3v19.5C3,23,4,24,5.3,24h13.5c1.2,0,2.2-1,2.2-2.2V6.2C21,5.6,20.8,5,20.3,4.6z M19.3,5.7c0.1,0.1,0.2,0.2,0.2,0.3H15V1.5c0.1,0,0.2,0.1,0.3,0.2L19.3,5.7z M18.7,22.5H5.3c-0.4,0-0.7-0.3-0.7-0.7V2.3c0-0.4,0.3-0.7,0.7-0.7h8.2v4.9c0,0.6,0.5,1.1,1.1,1.1h4.9v14.2C19.5,22.2,19.2,22.5,18.7,22.5z" />
					</svg>
				</div>
				<span class="c-upload__info-title">SHIELD_screenshot.png</span>
			</div>
			<div class="c-upload__action">
				<a class="c-upload__action-link" href="#">
					<div class="c-icon c-upload__action-link-icon">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
							<path d="M13.8,12l9.8-9.8C24,1.8,24,1.3,23.6,1L23,0.4c-0.3-0.3-0.9-0.3-1.2,0L12,10.2L2.2,0.4C1.8,0,1.3,0,1,0.4L0.4,1C0,1.3,0,1.9,0.4,2.2l9.8,9.8l-9.8,9.8C0,22.2,0,22.7,0.4,23L1,23.6c0.3,0.3,0.9,0.3,1.2,0l9.8-9.8l9.8,9.8c0.3,0.3,0.9,0.3,1.2,0l0.6-0.6c0.3-0.3,0.3-0.9,0-1.2L13.8,12z" />
						</svg>
					</div>
					Verwijderen
				</a>
			</div>
		</div>
	</div>
</div>
			

		

File uploaded

SHIELD_screenshot.png

			
				<div class="c-upload is-uploaded">
	<input class="c-upload__input" type="file" name="">
	<div class="c-upload__container">
		<button class="c-button c-upload__button">
			<span class="c-button__text">Kies een bestand</span>
		</button>
		<div class="c-upload__info-container">
			<div class="c-upload__info">
				<div class="c-icon c-upload__info-icon">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
						<path d="M20.3,4.6l-3.9-3.9C16,0.2,15.4,0,14.8,0H5.3C4,0,3,1,3,2.3v19.5C3,23,4,24,5.3,24h13.5c1.2,0,2.2-1,2.2-2.2V6.2C21,5.6,20.8,5,20.3,4.6z M19.3,5.7c0.1,0.1,0.2,0.2,0.2,0.3H15V1.5c0.1,0,0.2,0.1,0.3,0.2L19.3,5.7z M18.7,22.5H5.3c-0.4,0-0.7-0.3-0.7-0.7V2.3c0-0.4,0.3-0.7,0.7-0.7h8.2v4.9c0,0.6,0.5,1.1,1.1,1.1h4.9v14.2C19.5,22.2,19.2,22.5,18.7,22.5z" />
					</svg>
				</div>
				<span class="c-upload__info-title">SHIELD_screenshot.png</span>
			</div>
			<div class="c-upload__action">
				<a class="c-upload__action-link" href="#">
					<div class="c-icon c-upload__action-link-icon">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
							<path d="M13.8,12l9.8-9.8C24,1.8,24,1.3,23.6,1L23,0.4c-0.3-0.3-0.9-0.3-1.2,0L12,10.2L2.2,0.4C1.8,0,1.3,0,1,0.4L0.4,1C0,1.3,0,1.9,0.4,2.2l9.8,9.8l-9.8,9.8C0,22.2,0,22.7,0.4,23L1,23.6c0.3,0.3,0.9,0.3,1.2,0l9.8-9.8l9.8,9.8c0.3,0.3,0.9,0.3,1.2,0l0.6-0.6c0.3-0.3,0.3-0.9,0-1.2L13.8,12z" />
						</svg>
					</div>
					Verwijderen
				</a>
			</div>
		</div>
	</div>
</div>