Dictionary

This component is intended for displays of key-value pairs.

Restrictions

  • Each key must only have one value.
  • There must be at least two key-value pairs.
  • Nesting Dictionaries is not supported.
  • Tooltips or additional text is not supported.
  • The length of keys is limited to two lines of wrapped text.
  • The length of values is not limited, but will wrap to the next line if there's no room.

Basic Dictionary

The Basic Dictionary pattern is meant to be used when there are less than 10 items to display. It shows the key on the left and the value on the right.

Email Address
sparkdesignsystem@quickenloans.com
Mailing Address
123 Main Street, Detroit, MI, 48216
Home Phone
(123) 456-7890
Cell Phone
(098) 765-4321
Work Phone
(555) 555-5555
Work Extension
55555
<div class="sprk-c-Dictionary">
  <dl class="sprk-c-Dictionary__keyvaluepairs">
    <div class="sprk-c-Dictionary__keyvaluepair">
      <dt class="sprk-c-Dictionary__key sprk-b-Label">Email Address</dt>
      <dd class="sprk-c-Dictionary__value">sparkdesignsystem@quickenloans.com</dd>
    </div>
    <div class="sprk-c-Dictionary__keyvaluepair">
      <dt class="sprk-c-Dictionary__key sprk-b-Label">Mailing Address</dt>
      <dd class="sprk-c-Dictionary__value">123 Main Street, Detroit, MI, 48216</dd>
    </div>
    <div class="sprk-c-Dictionary__keyvaluepair">
      <dt class="sprk-c-Dictionary__key sprk-b-Label">Home Phone</dt>
      <dd class="sprk-c-Dictionary__value">(123) 456-7890</dd>
    </div>
    <div class="sprk-c-Dictionary__keyvaluepair">
      <dt class="sprk-c-Dictionary__key sprk-b-Label">Cell Phone</dt>
      <dd class="sprk-c-Dictionary__value">(098) 765-4321</dd>
    </div>
    <div class="sprk-c-Dictionary__keyvaluepair">
      <dt class="sprk-c-Dictionary__key sprk-b-Label">Work Phone</dt>
      <dd class="sprk-c-Dictionary__value">(555) 555-5555</dd>
    </div>
    <div class="sprk-c-Dictionary__keyvaluepair">
      <dt class="sprk-c-Dictionary__key sprk-b-Label">Work Extension</dt>
      <dd class="sprk-c-Dictionary__value">55555</dd>
    </div>
  </dl>
</div>

Striped Dictionary

This variation is for cases where the number of items in the Dictionary exceeds 10, or when the dictionary is in a container that's wide enough where an additional visual cue is necessary. The striped rows help to visually separate the content.

Email Address
sparkdesignsystem@quickenloans.com
Mailing Address
123 Main Street, Detroit, MI, 48216
Home Phone
(123) 456-7890
Cell Phone
(098) 765-4321
Work Phone
(555) 555-5555
Work Extension
55555
<div class="sprk-c-Dictionary sprk-c-Dictionary--striped">
  <dl class="sprk-c-Dictionary__keyvaluepairs">
    <div class="sprk-c-Dictionary__keyvaluepair">
      <dt class="sprk-c-Dictionary__key sprk-b-Label">Email Address</dt>
      <dd class="sprk-c-Dictionary__value">sparkdesignsystem@quickenloans.com</dd>
    </div>
    <div class="sprk-c-Dictionary__keyvaluepair">
      <dt class="sprk-c-Dictionary__key sprk-b-Label">Mailing Address</dt>
      <dd class="sprk-c-Dictionary__value">123 Main Street, Detroit, MI, 48216</dd>
    </div>
    <div class="sprk-c-Dictionary__keyvaluepair">
      <dt class="sprk-c-Dictionary__key sprk-b-Label">Home Phone</dt>
      <dd class="sprk-c-Dictionary__value">(123) 456-7890</dd>
    </div>
    <div class="sprk-c-Dictionary__keyvaluepair">
      <dt class="sprk-c-Dictionary__key sprk-b-Label">Cell Phone</dt>
      <dd class="sprk-c-Dictionary__value">(098) 765-4321</dd>
    </div>
    <div class="sprk-c-Dictionary__keyvaluepair">
      <dt class="sprk-c-Dictionary__key sprk-b-Label">Work Phone</dt>
      <dd class="sprk-c-Dictionary__value">(555) 555-5555</dd>
    </div>
    <div class="sprk-c-Dictionary__keyvaluepair">
      <dt class="sprk-c-Dictionary__key sprk-b-Label">Work Extension</dt>
      <dd class="sprk-c-Dictionary__value">55555</dd>
    </div>
  </dl>
</div>