Definition-list

In groundhog since v0.8.0

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

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