Skip to content
STYLESCAPE

Description List

Examples for the ss-c-description-list module: key-value readouts built on <dl>. Pairs may be wrapped in a <div>, which the inline and grid variants rely on.

Stacked

Project
Harbour bridge renovation
Owner
Municipality of Rotterdam
Status
In review
HTML 
<dl class="ss-c-description-list">
            <dt>Project</dt>
            <dd>Harbour bridge renovation</dd>
            <dt>Owner</dt>
            <dd>Municipality of Rotterdam</dd>
            <dt>Status</dt>
            <dd>In review</dd>
        </dl>

Inline

Camera
Perspective, 45° FOV
Projection
EPSG:28992
Visible objects
12 408
HTML 
<dl class="ss-c-description-list ss-c-description-list--inline">
            <div><dt>Camera</dt><dd>Perspective, 45° FOV</dd></div>
            <div><dt>Projection</dt><dd>EPSG:28992</dd></div>
            <div><dt>Visible objects</dt><dd>12 408</dd></div>
        </dl>

Divided readout, monospace values

X
92 814.203
Y
437 551.870
Z
4.125
Heading
271.4°
Pitch
-12.0°
HTML 
<dl class="ss-c-description-list ss-c-description-list--inline ss-c-description-list--divided ss-c-description-list--mono" style="max-width: 24rem">
            <div><dt>X</dt><dd>92 814.203</dd></div>
            <div><dt>Y</dt><dd>437 551.870</dd></div>
            <div><dt>Z</dt><dd>4.125</dd></div>
            <div><dt>Heading</dt><dd>271.4°</dd></div>
            <div><dt>Pitch</dt><dd>-12.0°</dd></div>
        </dl>

Grid

Spindle
12 000 rpm
Feed
850 mm/min
Tool
T04 · 6 mm end mill
Coolant
On
Runtime
01:42:17
HTML 
<dl class="ss-c-description-list ss-c-description-list--grid">
            <div><dt>Spindle</dt><dd>12 000 rpm</dd></div>
            <div><dt>Feed</dt><dd>850 mm/min</dd></div>
            <div><dt>Tool</dt><dd>T04 · 6 mm end mill</dd></div>
            <div><dt>Coolant</dt><dd>On</dd></div>
            <div><dt>Runtime</dt><dd>01:42:17</dd></div>
        </dl>