v1.1.0
  1. Foundations
  2. How-tos
  3. Patterns
    1. Autocomplete
    2. Description list
    3. Chat
    4. Fallback image
    5. Focus indicator
    6. Footer
    7. Header
    8. Hero
    9. IIIF Image
    10. Results per page

Description list

List groups of terms and descriptions.

List groups of terms and descriptions, such as displaying metadata.

When to use

Use description lists for presenting pairs of terms and descriptions, glossaries, or metadata. Ideal for scenarios where the relationship between the term and description is one-to-one or one-to-many.

How to use

Order descriptions by importance, starting with the most significant.

Default

<dl class="pl-reset pl-typeset pl-margin-l pl-dl">
  <dt>Description</dt>
  <dd>"Playing prepares the child for his future life." "Adults should find him a toy that would help him with that. This is how a child finds himself a toy without the help of an adult. Rummaging in the garbage pits, the child becomes infected with all sorts of diseases. On the left side of the poster: Harmful toys." (Игра подготовливает ребенка к будущей жизни. Взрослые должны позаботиться о такой игрушке, которая помогала бы ему в этой игре. Вот как отыскивает себе игрушку ребенок без помощи взрослых.</dd>
  
  <dt>Date</dt>
  <dd>undated</dd>
  
  <dt>Language</dt>
  <dd><a href="#">Russian</a></dd>
  
  <dt>Subject</dt>
  <dd><a href="#">Soviet Union -- Politics and government -- 1917-1936</a></dd>
  <dd><a href="#">Propaganda, Communist</a></dd>
</dl>

Inline

<dl class="pl-reset pl-typeset pl-margin-l pl-dl--inline">
  <dt>Description</dt>
  <dd>"Playing prepares the child for his future life." "Adults should find him a toy that would help him with that. This is how a child finds himself a toy without the help of an adult. Rummaging in the garbage pits, the child becomes infected with all sorts of diseases. On the left side of the poster: Harmful toys." (Игра подготовливает ребенка к будущей жизни. Взрослые должны позаботиться о такой игрушке, которая помогала бы ему в этой игре. Вот как отыскивает себе игрушку ребенок без помощи взрослых.</dd>
  
  <dt>Date</dt>
  <dd>undated</dd>
  
  <dt>Language</dt>
  <dd><a href="#">Russian</a></dd>
  
  <dt>Subject</dt>
  <dd><a href="#">Soviet Union -- Politics and government -- 1917-1936</a></dd>
  <dd><a href="#">Propaganda, Communist</a></dd>
</dl>

Related guides

Design System

About Writing for users Build digital spaces v1.1.0