Definition-list

Examples

Name
Godzilla
Born
1952
Birthplace
Japan
Color
Green

<dl class="definition-list">
  <dt>Name</dt>
  <dd>Godzilla</dd>
  <dt>Born</dt>
  <dd>1952</dd>
  <dt>Birthplace</dt>
  <dd>Japan</dd>
  <dt>Color</dt>
  <dd>Green</dd>
</dl>

    
Firefox
A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.
Firefox
A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.

<dl class="definition-list">
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform,
      graphical web browser developed by the
      Mozilla Corporation and hundreds of
      volunteers.</dd>
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform,
      graphical web browser developed by the
      Mozilla Corporation and hundreds of
      volunteers.</dd>
</dl>

    

Introduction

The Groundhog definition list component visually enhances the standard html <dl> element. A definition list consists of one or multiple <dt> elements - defining a term and the appropriate <dd> elements - defining the description.

Including the definition list component

  1. To include a definition list component into your project, first create the <dl> with <dt> and <dd> elements:
    <dl>
    <dt>Name</dt>
    <dd>Godzilla</dd>
    </dl>
    
  2. To add the visual enhancements of Groundhog, add the necessary classes to the elements class attributes:
    <dl class="definition-list">
    <dt>Name</dt>
    <dd>Godzilla</dd>
    </dl>