List with download items
CODE
×
HTML
<ul class='download-list'><li data-type="1" class="download"><a href="#" download>Product leaflet 1 (PDF)</a></li> <li data-type="2" class="download"><a href="#" download>Download product leaflet 2 (PDF)</a></li> <li data-type="3" class="download"><a href="#" download>Product leaflet 3 (PDF)</a></li> <li data-type="2" class="download"><a href="#" download>Download product leaflet 2 (PDF)</a></li> <li data-type="4" class="download"><a href="#" download>Parts List 4 (CSV)</a></li> <li data-type="1" class="download"><a href="#" download>Download product leaflet 1 (PDF)</a></li> <li data-type="1" class="download"><a href="#" download>Download product leaflet 1 (PDF)</a></li> <li data-type="2" class="download"><a href="#" download>Download product leaflet 2 (PDF)</a></li> <li data-type="4" class="download"><a href="#" download>Price List Bus 4 (CSV)</a></li> <li data-type="4" class="download"><a href="#" download>Price List Aircraft 4 (CSV)</a></li> <li data-type="1" class="download"><a href="#" download>Download product leaflet 1 (PDF)</a></li> <li data-type="1" class="download"><a href="#" download>Download product leaflet 1 (PDF)</a></li> <li data-type="2" class="download"><a href="#" download>Download product leaflet 2 (PDF)</a></li> <li data-type="1" class="download"><a href="#" download>Download product leaflet 1 (PDF)</a></li> <li data-type="2" class="download"><a href="#" download>Product leaflet 2 (PDF)</a></li> <li data-type="4" class="download"><a href="#" download>Price List Train 4 (CSV)</a></li> <li data-type="4" class="download"><a href="#" download>EGVA 4 (COC)</a></li> <li data-type="1" class="download"><a href="#" download>Price List Aircraft (CSV)</a></li> <li data-type="1" class="download"><a href="#" download>Download product leaflet 1 (PDF)</a></li> <li data-type="2" class="download"><a href="#" download>Download product leaflet 2 (PDF)</a></li> <li data-type="1" class="download"><a href="#" download>Product roduct leaflet 1 (PDF)</a></li></ul>
CSS
ul.download-list { line-height: var(--lh-xl); } ul.download-list li.download a { text-indent: 26px; } ul { line-height: var(--lh-xl); } ul { list-style-type: none; margin: 0; padding: 0; } ul li { position: relative; padding-left: 21px; line-height: 1.2; margin-top: 1.75rem; margin-bottom: 1.75rem; } ul > li > ul > li { margin-bottom: 0; padding: 0; margin-top: 6px; font-size: smaller; } ul li::before { content: "+"; position: absolute; left: 0; top: 0; } footer li, li.download { list-style-type: none; padding: 0; margin-left: 0px; } footer li::before, ul li.download::before { content: ""; padding-left: 0px; } footer li a[href^="http"], li.download a { text-indent: 21px; display: inline-block; text-decoration: none; position: relative; } footer li a[href^="http"]::before, li.download a::before { position: absolute; content: ''; background-size: contain; } footer li a[href^="http"]::before { background-image: url('data:image/svg+xml;utf8,
'); width: 16px; height: 16px; left: -3px; top: 1px; } footer li a[href^="http"]:hover::before { background-image: url('data:image/svg+xml;utf8,
'); } li.download a::before { background-image: url('data:image/svg+xml;utf8,
'); width: 26px; height: 26px; left: -8px; top: 10px; transform: translateY(-52%); } li.download a:hover::before { background-image: url('data:image/svg+xml;utf8,
'); } @media screen and (max-width: 575px) { footer li a[href^="http"], li.download a { text-indent: 20px; } footer li a[href^="http"]::before { width: 13px; height: 13px; top: 3px; } li.download a::before { width: 24px; height: 24px; top: 11px; } }
JS
List with download items
Last Edit: Dec 8, 2023, 10:05am
×
Product leaflet 1 (PDF)
Download product leaflet 2 (PDF)
Product leaflet 3 (PDF)
Download product leaflet 2 (PDF)
Parts List 4 (CSV)
Download product leaflet 1 (PDF)
Download product leaflet 1 (PDF)
Download product leaflet 2 (PDF)
Price List Bus 4 (CSV)
Price List Aircraft 4 (CSV)
Download product leaflet 1 (PDF)
Download product leaflet 1 (PDF)
Download product leaflet 2 (PDF)
Download product leaflet 1 (PDF)
Product leaflet 2 (PDF)
Price List Train 4 (CSV)
EGVA 4 (COC)
Price List Aircraft (CSV)
Download product leaflet 1 (PDF)
Download product leaflet 2 (PDF)
Product roduct leaflet 1 (PDF)