Davidson Styleguide

Definition List: Invisible Terms 

<dl class="invisible-terms">
    <dt>Office</dt>
    <dd>#347 Donner Blvd.</dd>
    <dt>Hours</dt>
    <dd>8-10, MWF, 12-2 TTH</dd>
    <dt>Phone</dt>
    <dd><a href="tel:5555555555">(555) 555-5555</a></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": "Office",
        "definition": "#347 Donner Blvd."
      },
      {
        "term": "Hours",
        "definition": "8-10, MWF, 12-2 TTH"
      },
      {
        "term": "Phone",
        "definition": "<a href=\"tel:5555555555\">(555) 555-5555</a>"
      }
    ],
    "variant": "invisible-terms"
  }
}
  • 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.