Dictionary

Code Examples

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.
  • The data-id property is provided as a hook for automated tools. If you have multiple instances of the same variant of a component on the same page, make sure each instance has a unique data-id property ("dictionary-1", "dictionary-2", "dictionary-1", etc).

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.

Angular

The dictionary component expects an Object containing key-value pairs to be passed in on the 'data' input. See below for additional customization options.

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-b-TypeBodyTwo" data-id="dictionary-1">
  <dl class="sprk-c-Dictionary__keyvaluepairs">
    <div class="sprk-c-Dictionary__keyvaluepair">
      <dt class="sprk-c-Dictionary__key sprk-b-Label sprk-b-Label--no-input">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 sprk-b-Label--no-input">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 sprk-b-Label--no-input">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 sprk-b-Label--no-input">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 sprk-b-Label--no-input">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 sprk-b-Label--no-input">Work Extension</dt>
      <dd class="sprk-c-Dictionary__value">55555</dd>
    </div>
  </dl>
</div>
          
<sprk-dictionary [data]="keyValuePairs" idString="dictionary-1"></sprk-dictionary>

public keyValuePairs = { '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' };

Information

See below for available customization options:

Input Type Description
data Object The collection of key-value pairs to be rendered into the component.
dictionaryType string Determines the variant of the dictionary component to render. The only available option is 'striped'. Supplying no value will cause the base variant to be used.
idString string The value supplied will be assigned to the 'data-id' attribute on the component. This is intended to be used as a selector for automated tools. This value should be unique per page.

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" data-id="dictionary-2">
  <dl class="sprk-c-Dictionary__keyvaluepairs">
    <div class="sprk-c-Dictionary__keyvaluepair">
      <dt class="sprk-c-Dictionary__key sprk-b-Label sprk-b-Label--no-input">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 sprk-b-Label--no-input">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 sprk-b-Label--no-input">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 sprk-b-Label--no-input">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 sprk-b-Label--no-input">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 sprk-b-Label--no-input">Work Extension</dt>
      <dd class="sprk-c-Dictionary__value">55555</dd>
    </div>
  </dl>
</div>
          
<sprk-dictionary [data]="keyValuePairs" dictionaryType="striped" idString="dictionary-2"></sprk-dictionary>

public keyValuePairs = { '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' };

Information

The options available for the base variant are also available for the striped variant.