Navigation
Getting Started
Fundamentals
Components
Utilities
Documentation

Dictionary

Code Examples

Spark-Extras

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.

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">
  <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>
          
<sprk-dictionary [data]="keyValuePairs"></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.

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>
          
<sprk-dictionary [data]="keyValuePairs" dictionaryType="striped"></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.

sparkdesignsystem@quickenloans.com