Metadata

The metadata pattern can be used for showing label/value pairs.

Consistently use # or number in labels
Indicate empty/blank values with an em-dash (—)
Reflow columns based on available screen real estate
Sentence case labels

Horizontal

Useful for shorter labels/values.

Examiner: IP, Sikyin / 69776 / 1742
SPE (multiple): John Olaskey
Applicants: Roman Amirpur
Inventors: Disney Dale
Law firm: Clayton & Clayton Associates

Confirmation #: 1662
Publication #: 32132132132
Patent #: —
Attorney docket #: 10951/1202
Foreign priority claimed: Yes

<dl class="dl-horizontal">
    <dt>Confirmation #</dt>
    <dd>1662</dd>
    <dt>Patent #</dt>
    <dd>&mdash;</dd>
</dl>

Vertical

Useful for longer labels/values.

Examiner: IP, Sikyin / 69776 / 1742
SPE (multiple): John Olaskey

Confirmation #: 1662
Publication #: 32132132132

<dl>
    <dt>Examiner</dt>
    <dd>IP, Sikyin / 69776 / 1742</dd>
    <dt>SPE (multiple)</dt>
    <dd>John Olaskey</dd>
</dl>

Inline

Useful for few labels/values.

Created: Mar 5, 2014
Views: 1,662
Status: Approved

<dl class="dl-inline">
    <dt>Created</dt>
    <dd>Mar 5, 2014</dd>
    <dt>Views</dt>
    <dd>1,662</dd>
    <dt>Status</dt>
    <dd>Approved</dd>
</dl>

Inverse

For scenarios where the label pair bolding should be reversed use .dl-inverse.

Examiner: IP, Sikyin / 69776 / 1742
SPE (multiple): John Olaskey
Applicants: Roman Amirpur
Inventors: Disney Dale
Law firm: Clayton & Clayton Associates

Confirmation #: 1662
Publication #: 32132132132
Patent #: —
Attorney docket #: 10951/1202
Foreign priority claimed: Yes

<dl class="dl-horizontal dl-inverse">
    <dt>Confirmation #</dt>
    <dd>1662</dd>
    <dt>Patent #</dt>
    <dd>&mdash;</dd>
</dl>