Branding & Style Guide

2.7 components.filedownloads File Downloads

Toggle example guides Toggle HTML markup

Layout and styling of file download elments in organized content types

Markup: components/filedownloads/filedownloads.twig
<div class="field--name-field-downloads field--type-entity-reference">
	<div class="field__label">{{file_reference_type}}</div>
	<div class="field__items">
		<div class="field__item"><span class="file--application-pdf"><a href="#">{{file_download_01}}</a></span></div>
		<div class="field__item"><span class="file--application-xls"><a href="#">{{file_download_02}}</a></span></div>
		<div class="field__item"><span class="file--application-doc"><a href="#">{{file_download_03}}</a></span></div>
		<div class="field__item"><span class="file--application-ppt"><a href="#">{{file_download_04}}</a></span></div>
		<div class="field__item"><span class="file--application-key"><a href="#">{{file_download_05}}</a></span></div>
		<div class="field__item"><span class="file--application-txt"><a href="#">{{file_download_06}}</a></span></div>
	</div>
</div>
Source: sass/components/filedownloads/_filedownloads.scss, line 1