<dl class="loose">
    <dt>Mausoleum</dt>
    <dd>The final and funniest folly of the rich.</dd>
    <dt>Me</dt>
    <dd>The objectionable case of I. The personal pronoun in English has three cases, the dominative, the objectionable and the oppressive. Each is all three.</dd>
    <dt>Merchant</dt>
    <dd>One engaged in a commercial pursuit. A commercial pursuit is one in which the thing pursued is a dollar.</dd>
    <dt>Miss</dt>
    <dd>The title with which we brand unmarried women to indicate that they are in the market. Miss, Missis (Mrs.) and Mister (Mr.) are the three most distinctly disagreeable words in the language, in sound and sense. Two are corruptions of Mistress, the
        other of Master. In the general abolition of social titles in this our country they miraculously escaped to plague us. If we must have them let us be consistent and give one to the unmarried man. I venture to suggest Mush, abbreviated to Mh.</dd>
</dl>
{% if dl is not empty %}
<dl class="{{ dl.variant }}">
  {% for item in dl.items %}
    <dt>{{ item.term }}</dt>
    <dd>{{ item.definition }}</dd>
  {% endfor %}
</dl>
{% endif %}
{
  "dl": {
    "items": [
      {
        "term": "Mausoleum",
        "definition": "The final and funniest folly of the rich."
      },
      {
        "term": "Me",
        "definition": "The objectionable case of I. The personal pronoun in English has three cases, the dominative, the objectionable and the oppressive. Each is all three."
      },
      {
        "term": "Merchant",
        "definition": "One engaged in a commercial pursuit. A commercial pursuit is one in which the thing pursued is a dollar."
      },
      {
        "term": "Miss",
        "definition": "The title with which we brand unmarried women to indicate that they are in the market. Miss, Missis (Mrs.) and Mister (Mr.) are the three most distinctly disagreeable words in the language, in sound and sense. Two are corruptions of Mistress, the other of Master. In the general abolition of social titles in this our country they miraculously escaped to plague us. If we must have them let us be consistent and give one to the unmarried man. I venture to suggest Mush, abbreviated to Mh."
      }
    ],
    "variant": "loose"
  }
}
  • Content:
    dl {
      dt {
        @include rr-font-compute(l, medium);
        margin-bottom: rr-gridbase(1);
        font-weight: 500;
      }
    
      dd {
        @include rr-font-compute(r, medium);
        margin-bottom: rr-gridbase(2);
        margin-left: 0;
      }
      &.loose {
        dt {
          // margin-bottom: rr-gridbase(2);
        }
        dd {
          margin-bottom: rr-gridbase(3);
        }
      }
      &.tight {
        dt {
          margin-bottom: 0;
        }
        dd {
          margin-bottom: rr-gridbase(1)
        }
      }
      &.invisible-terms {
        dt {
          display: none;
        }
    
        dd {
          margin-bottom: 0;
        }
      }
    
      &.inline-terms {
        dt {
          display: inline;
          font-weight: bold;
          @include rr-font-compute(r, medium);
          &:after {
            content: ':';
          }
        }
        dd {
          display: inline;
          &:after {
            content: "";
            display: block;
          }
        }
        &.loose {
          dd {
            &:after {
              margin-bottom: rr-gridbase(2);
            }
          }
        }
      }
    }
    
  • URL: /components/raw/dl/dl.scss
  • Filesystem Path: patterns/atoms/lists/dl/dl.scss
  • Size: 946 Bytes

Use the Definition List to define a set of terms.

The modifiers loose and tight can be used to adjust the spacing between list items.

The modifiers inline titles and invisible titles can be used to move or hide the definition terms. Invisible titles is a useful option for displaying data in a <dl> to maintain semantic markup, but keep the visual display simple.