Description list
A description list (dl) groups description terms (dt) and their corresponding description details (dd).
A description list (dl) groups description terms (dt) and their corresponding description details (dd).
Use the tabs to view the description list source code.
<section class="flow">
<h4>Front end development languages</h4>
<dl class="description-list">
<dt class="description-list__title">CSS</dt>
<dd class="description-list__description">Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.</dd>
<dt class="description-list__title">HTML</dt>
<dd class="description-list__description">Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications.
</dd>
<dt class="description-list__title">JavaScript</dt>
<dd class="description-list__description">JavaScript enables interactive web pages and thus is an essential part of web applications.</dd>
</dl>
</section>
<section class="flow">
<h4>User details</h4>
<dl class="description-list">
<dt class="description-list__title">Name</dt>
<dd class="description-list__description">Cathy Dutton</dd>
<dt class="description-list__title">Interests</dt>
<dd class="description-list__description">Design</dd>
<dd class="description-list__description">Travel</dd>
<dd class="description-list__description">Football</dd>
<dt class="description-list__title">Transport</dt>
<dd class="description-list__description">Car</dd>
<dd class="description-list__description">Train</dd>
</dl>
</section>
<section class="flow">
<h4>Front end coding languages</h4>
<dl class="description-list">
<dt class="description-list__title">Sass</dt>
<dt class="description-list__title">Less</dt>
<dt class="description-list__title">Stylus</dt>
<dd class="description-list__description">CSS Processors that extend CSS with variables, operators, interpolations, functions, mixins and many more other usable assets.</dd>
<dt class="description-list__title">Mustache</dt>
<dt class="description-list__title">Handlebars</dt>
<dt class="description-list__title">Nunjucks</dt>
<dd class="description-list__description">JavaScrip templating engines help separate HTML structure from the content contained within.
</dd>
</dl>
</section>
/*
Description Lists
----------------------------------- */
.description-list {
margin-top: var(--flow-space);
margin-bottom: 1rem;
}
.description-list__title {
font-weight: bold;
}
.description-list__title,
.description-list__description {
display: inline;
margin: 0;
}
.description-list__description + .description-list__title::before {
content: "\A";
white-space: pre;
}
.description-list__title + .description-list__description::before {
content: "\A";
white-space: pre;
}
.description-list__description + .description-list__description::before {
content: ', ';
font-weight: normal;
margin-left: -.10rem;
}
.description-list__title + .description-list__title::before {
content: ', ';
font-weight: bold;
margin-left: -.05rem;
}