USPTO Design

Metadata

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

Do

  • 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>