Control Colour theme
Control Font family

Description list

A description list (dl) groups description terms (dt) and their corresponding description details (dd)

Front end development languages

CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.
HTML
Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications.
JavaScript
JavaScript enables interactive web pages and thus is an essential part of web applications.

User details

Name
Cathy Dutton
Interests
Design
Travel
Football
Transport
Car
Train

Front end coding languages

Sass
Less
Stylus
CSS Processors that extend CSS with variables, operators, interpolations, functions, mixins and many more other usable assets.
Mustache
Handlebars
Nunjucks
JavaScrip templating engines help separate HTML structure from the content contained within.

Description lists should:

  • work with one or more description term elements
  • work with one or more description details elements

Code

Use the tabs to view the description list source code.

Use left and right arrows to navigate between tabs.

HTML

        
        
  <section>
    <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>
    <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>
    <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>

      

CSS


  /*
    Description Lists
  ----------------------------------- */
  
.description-list {
  margin-top: .4em;
  margin-bottom: 1em;
}

.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: -.10em;
}

.description-list__title + .description-list__title::before {
  content: ', ';
  font-weight: bold;
  margin-left: -.05em;
}



      

Back to all components