Diederik

🍔

Design Guide

Content

Headings

H1. Lorem ipsum dolor sit amet consectetur adipiscing elit

H2. Lorem ipsum dolor sit amet consectetur adipiscing elit

H3. Lorem ipsum dolor sit amet consectetur adipiscing elit

H4. Lorem ipsum dolor sit amet consectetur adipiscing elit

H5. Lorem ipsum dolor sit amet consectetur adipiscing elit
<h1>H1. Lorem ipsum dolor sit amet consectetur adipiscing elit</h1>
<h2>H2. Lorem ipsum dolor sit amet consectetur adipiscing elit</h2>
<h3>H3. Lorem ipsum dolor sit amet consectetur adipiscing elit</h3>
<h4>H4. Lorem ipsum dolor sit amet consectetur adipiscing elit</h4>
<h5>H5. Lorem ipsum dolor sit amet consectetur adipiscing elit</h5>

Bodytext

Lorem ipsum dolor sit amet consectetur adipiscing elit duis leo mattis elementum dictum aliquet integer dis, nunc ligula magna curabitur platea imperdiet rhoncus maecenas pulvinar commodo.

<p>Lorem ipsum <a href="#">dolor</a> sit amet <strong>consectetur</strong> <em>adipiscing</em> elit <small>duis</small> leo mattis elementum dictum aliquet integer dis, nunc ligula magna curabitur platea imperdiet rhoncus maecenas pulvinar commodo.</p>

Introduction

Lorem ipsum dolor sit amet consectetur adipiscing elit duis leo mattis elementum dictum aliquet integer dis, nunc ligula magna curabitur platea imperdiet rhoncus maecenas pulvinar commodo.

<p class="intro">Lorem ipsum <a href="#">dolor</a> sit amet consectetur adipiscing elit duis leo mattis elementum dictum aliquet integer dis, nunc ligula magna curabitur platea imperdiet rhoncus maecenas pulvinar commodo.</p>

Unordered list

  • Lorem ipsum dolor sit amet consectetur adipiscing
  • Lorem ipsum dolor sit amet consectetur adipiscing
  • Lorem ipsum dolor sit amet consectetur adipiscing
<ul>
<li>Lorem ipsum dolor sit amet consectetur adipiscing</li>
<li>Lorem ipsum dolor sit amet consectetur adipiscing</li>
<li>Lorem ipsum dolor sit amet consectetur adipiscing</li>
</ul>

Ordered list

  1. Lorem ipsum dolor sit amet consectetur adipiscing
  2. Lorem ipsum dolor sit amet consectetur adipiscing
  3. Lorem ipsum dolor sit amet consectetur adipiscing
<ol>
<li>Lorem ipsum dolor sit amet consectetur adipiscing</li>
<li>Lorem ipsum dolor sit amet consectetur adipiscing</li>
<li>Lorem ipsum dolor sit amet consectetur adipiscing</li>
</ol>

Layout

Section

 
<section class="section section--example">
<div class="content">
&nbsp;
</div>
</section>

Collection

####

Lorem ipsum dolor sit amet consectetur adipiscing elit ultricies, libero natoque nulla nullam eros in curae, faucibus rutrum hendrerit suspendisse purus a vehicula.
<div class="collection">
<div class="col col--title">
<h4>####</h4>
</div>
<div class="col col--content">
Lorem ipsum dolor sit amet consectetur adipiscing elit ultricies, libero natoque nulla nullam eros in curae, faucibus rutrum hendrerit suspendisse purus a vehicula.
</div>
</div>

Items

Track

Another Day in Paradise - 2016 Remaster

Phil Collins ..But Seriously (Deluxe Edition)

<div class="item item--track item--has-audio">
<div class="album">
<a href=" https://open.spotify.com/artist/4lxfqrEsLX6N1N4OCSkILp" target="_blank" rel="noopener noreferrer" tabindex="-1">
<img src="https://i.scdn.co/image/ab67616d0000b273fb2daafa0993f39d87a84385" alt="" loading="lazy" class="">
<div class="js-audio">
<audio src="https://p.scdn.co/mp3-preview/caded0dd1037c167ae428022979e3e1003d0af39?cid=083b8f469c0945df83b14b76e5e53557"></audio>
<button tabindex="-1"></button>
</div>
</a>
</div>
<div class="text">
<h4><a href=" https://open.spotify.com/track/1NCuYqMc8hKMb4cpNTcJbD" target="_blank" rel="noopener noreferrer">Another Day in Paradise - 2016 Remaster</a></h4>
<p><strong>Phil Collins</strong> <small>..But Seriously (Deluxe Edition)</small></p>
</div>
</div>