Definition list
ready

Introduction

Used to display key and value definitions. Uses dl for improved semantics. The styling applied imitates a table layout, so that definition terms hold the same width (meaning the definitions follow the same left alignment).

Examples

Default list

Definition term 1
Definition value 1
Term 2
Value 2
Who you gonna call?
Ghost busters!
<div class="dl">
        <dl class="dl-set">
          <dt class="dt">Definition term 1</dt>
          <dd class="dd">Definition value 1</dd>
        </dl>
        <dl class="dl-set">
          <dt class="dt">Term 2</dt>
          <dd class="dd">Value 2</dd>
        </dl>
        <dl class="dl-set">
          <dt class="dt">Who you gonna call?</dt>
          <dd class="dd">Ghost busters!</dd>
        </dl>
    </div>

Dependencies

  • src/styles/base/*.scss
  • src/styles/components/blocks/_definition-list.scss

Usage

Class/JavaScript Hook Description Required?
.dl Placed on outer-most tag that will contain the definition list Required.
.dl-set Placed on the dl tag Required.
.dt Placed on the dt tag to style the definition term Required.
.dd Placed on the dd tag to style the description Required.