Use Table elements.
✓ Hint
Narrow the viewport to see truncation of values.
<!-- Default -->
<dl>
<dt>
<pre><code></code></pre>
</dt>
<dd>
<table class=" ">
<tbody>
<tr>
<th>
System Processor
</th>
<td>
560 GB
</td>
</tr>
<tr>
<th>
Types of Antimatter
</th>
<td>
3 theorized, 1 actual
</td>
</tr>
<tr>
<th>
Quantum Nodes
</th>
<td>
Several
</td>
</tr>
</tbody>
</table>
<div>Content (not a paragraph) after a table.</div>
</dd>
</dl>
<!-- Horz. & Wide -->
<dl>
<dt>
<pre><code>c-data-list
c-data-list--is-horz
c-data-list--is-wide</code></pre>
</dt>
<dd>
<table class=" c-data-list
c-data-list--is-horz
c-data-list--is-wide">
<tbody>
<tr>
<th>
System Processor
</th>
<td>
560 GB
</td>
</tr>
<tr>
<th>
Types of Antimatter
</th>
<td>
3 theorized, 1 actual
</td>
</tr>
<tr>
<th>
Quantum Nodes
</th>
<td>
Several
</td>
</tr>
</tbody>
</table>
<div>Content (not a paragraph) after a table.</div>
</dd>
</dl>
<!-- Horz. & Wide (Values Truncated) -->
<dl>
<dt>
<pre><code>c-data-list
c-data-list--is-horz
c-data-list--is-wide
c-data-list--should-truncate-values</code></pre>
</dt>
<dd>
<table class=" c-data-list
c-data-list--is-horz
c-data-list--is-wide
c-data-list--should-truncate-values">
<tbody>
<tr>
<th>
System Processor
</th>
<td>
560 GB
</td>
</tr>
<tr>
<th>
Types of Antimatter
</th>
<td>
3 theorized, 1 actual
</td>
</tr>
<tr>
<th>
Quantum Nodes
</th>
<td>
Several
</td>
</tr>
</tbody>
</table>
<div>Content (not a paragraph) after a table.</div>
</dd>
</dl>
<!-- Horz. & Narrow -->
<dl>
<dt>
<pre><code>c-data-list
c-data-list--is-horz
c-data-list--is-narrow</code></pre>
</dt>
<dd>
<table class=" c-data-list
c-data-list--is-horz
c-data-list--is-narrow">
<tbody>
<tr>
<th>
System Processor
</th>
<td>
560 GB
</td>
</tr>
<tr>
<th>
Types of Antimatter
</th>
<td>
3 theorized, 1 actual
</td>
</tr>
<tr>
<th>
Quantum Nodes
</th>
<td>
Several
</td>
</tr>
</tbody>
</table>
<div>Content (not a paragraph) after a table.</div>
</dd>
</dl>
<!-- Horz. & Narrow (Values Truncated) -->
<dl>
<dt>
<pre><code>c-data-list
c-data-list--is-horz
c-data-list--is-narrow
c-data-list--should-truncate-values</code></pre>
</dt>
<dd>
<table class=" c-data-list
c-data-list--is-horz
c-data-list--is-narrow
c-data-list--should-truncate-values">
<tbody>
<tr>
<th>
System Processor
</th>
<td>
560 GB
</td>
</tr>
<tr>
<th>
Types of Antimatter
</th>
<td>
3 theorized, 1 actual
</td>
</tr>
<tr>
<th>
Quantum Nodes
</th>
<td>
Several
</td>
</tr>
</tbody>
</table>
<div>Content (not a paragraph) after a table.</div>
</dd>
</dl>
<!-- Vert. & Wide -->
<dl>
<dt>
<pre><code>c-data-list
c-data-list--is-vert
c-data-list--is-wide</code></pre>
</dt>
<dd>
<table class=" c-data-list
c-data-list--is-vert
c-data-list--is-wide">
<tbody>
<tr>
<th>
System Processor
</th>
<td>
560 GB
</td>
</tr>
<tr>
<th>
Types of Antimatter
</th>
<td>
3 theorized, 1 actual
</td>
</tr>
<tr>
<th>
Quantum Nodes
</th>
<td>
Several
</td>
</tr>
</tbody>
</table>
<div>Content (not a paragraph) after a table.</div>
</dd>
</dl>
<!-- Vert. & Wide (Values Truncated) -->
<dl>
<dt>
<pre><code>c-data-list
c-data-list--is-vert
c-data-list--is-wide
c-data-list--should-truncate-values</code></pre>
</dt>
<dd>
<table class=" c-data-list
c-data-list--is-vert
c-data-list--is-wide
c-data-list--should-truncate-values">
<tbody>
<tr>
<th>
System Processor
</th>
<td>
560 GB
</td>
</tr>
<tr>
<th>
Types of Antimatter
</th>
<td>
3 theorized, 1 actual
</td>
</tr>
<tr>
<th>
Quantum Nodes
</th>
<td>
Several
</td>
</tr>
</tbody>
</table>
<div>Content (not a paragraph) after a table.</div>
</dd>
</dl>
<!-- Vert. & Narrow -->
<dl>
<dt>
<pre><code>c-data-list
c-data-list--is-vert
c-data-list--is-narrow</code></pre>
</dt>
<dd>
<table class=" c-data-list
c-data-list--is-vert
c-data-list--is-narrow">
<tbody>
<tr>
<th>
System Processor
</th>
<td>
560 GB
</td>
</tr>
<tr>
<th>
Types of Antimatter
</th>
<td>
3 theorized, 1 actual
</td>
</tr>
<tr>
<th>
Quantum Nodes
</th>
<td>
Several
</td>
</tr>
</tbody>
</table>
<div>Content (not a paragraph) after a table.</div>
</dd>
</dl>
<!-- Vert. & Narrow (Values Truncated) -->
<dl>
<dt>
<pre><code>c-data-list
c-data-list--is-vert
c-data-list--is-narrow
c-data-list--should-truncate-values</code></pre>
</dt>
<dd>
<table class=" c-data-list
c-data-list--is-vert
c-data-list--is-narrow
c-data-list--should-truncate-values">
<tbody>
<tr>
<th>
System Processor
</th>
<td>
560 GB
</td>
</tr>
<tr>
<th>
Types of Antimatter
</th>
<td>
3 theorized, 1 actual
</td>
</tr>
<tr>
<th>
Quantum Nodes
</th>
<td>
Several
</td>
</tr>
</tbody>
</table>
<div>Content (not a paragraph) after a table.</div>
</dd>
</dl>
<!-- Multi-Row Items -->
<dl>
<dt>Multi-Row Data List Items</dt>
<dd>
<table class="c-data-list">
<tbody>
<tr>
<th class="c-data-list__key">Segmented</th>
<td class="c-data-list__value">No</td>
</tr>
<tr>
<th class="c-data-list__key">Voxel length (x, y, z)</th>
<td class="c-data-list__value">1.66, 1.66, 1.66 μm</td>
</tr>
<tr class="c-data-list__row--start-final">
<th class="c-data-list__key">Analysis of this Data</th>
<td class="c-data-list__value">Bentheimer Cycle 1 Filtered</td>
</tr>
<tr>
<td></td>
<td class="c-data-list__value">Bentheimer Pore Cycle 1</td>
</tr>
<tr>
<td></td>
<td class="c-data-list__value">Bentheimer Segmented Pores</td>
</tr>
<tr>
<td></td>
<td class="c-data-list__value">Bentheimer Cycle 1 scCO2 Binary</td>
</tr>
</tbody>
</table>
</dd>
</dl>
/* Default */
{
"shouldSkipPattern": true,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "components",
"data": {
"key-value-pairs": [
{
"key": "System Processor",
"value": "560 GB"
},
{
"key": "Types of Antimatter",
"value": "3 theorized, 1 actual"
},
{
"key": "Quantum Nodes",
"value": "Several"
}
]
},
"key-class": "c-data-list__key",
"value-class": "c-data-list__value"
}
/* Horz. & Wide */
{
"shouldSkipPattern": true,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "components",
"data": {
"key-value-pairs": [
{
"key": "System Processor",
"value": "560 GB"
},
{
"key": "Types of Antimatter",
"value": "3 theorized, 1 actual"
},
{
"key": "Quantum Nodes",
"value": "Several"
}
]
},
"key-class": "c-data-list__key",
"value-class": "c-data-list__value",
"class": "c-data-list\nc-data-list--is-horz\nc-data-list--is-wide"
}
/* Horz. & Wide (Values Truncated) */
{
"shouldSkipPattern": true,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "components",
"data": {
"key-value-pairs": [
{
"key": "System Processor",
"value": "560 GB"
},
{
"key": "Types of Antimatter",
"value": "3 theorized, 1 actual"
},
{
"key": "Quantum Nodes",
"value": "Several"
}
]
},
"key-class": "c-data-list__key",
"value-class": "c-data-list__value",
"class": "c-data-list\nc-data-list--is-horz\nc-data-list--is-wide\nc-data-list--should-truncate-values"
}
/* Horz. & Narrow */
{
"shouldSkipPattern": true,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "components",
"data": {
"key-value-pairs": [
{
"key": "System Processor",
"value": "560 GB"
},
{
"key": "Types of Antimatter",
"value": "3 theorized, 1 actual"
},
{
"key": "Quantum Nodes",
"value": "Several"
}
]
},
"key-class": "c-data-list__key",
"value-class": "c-data-list__value",
"class": "c-data-list\nc-data-list--is-horz\nc-data-list--is-narrow"
}
/* Horz. & Narrow (Values Truncated) */
{
"shouldSkipPattern": true,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "components",
"data": {
"key-value-pairs": [
{
"key": "System Processor",
"value": "560 GB"
},
{
"key": "Types of Antimatter",
"value": "3 theorized, 1 actual"
},
{
"key": "Quantum Nodes",
"value": "Several"
}
]
},
"key-class": "c-data-list__key",
"value-class": "c-data-list__value",
"class": "c-data-list\nc-data-list--is-horz\nc-data-list--is-narrow\nc-data-list--should-truncate-values"
}
/* Vert. & Wide */
{
"shouldSkipPattern": true,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "components",
"data": {
"key-value-pairs": [
{
"key": "System Processor",
"value": "560 GB"
},
{
"key": "Types of Antimatter",
"value": "3 theorized, 1 actual"
},
{
"key": "Quantum Nodes",
"value": "Several"
}
]
},
"key-class": "c-data-list__key",
"value-class": "c-data-list__value",
"class": "c-data-list\nc-data-list--is-vert\nc-data-list--is-wide"
}
/* Vert. & Wide (Values Truncated) */
{
"shouldSkipPattern": true,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "components",
"data": {
"key-value-pairs": [
{
"key": "System Processor",
"value": "560 GB"
},
{
"key": "Types of Antimatter",
"value": "3 theorized, 1 actual"
},
{
"key": "Quantum Nodes",
"value": "Several"
}
]
},
"key-class": "c-data-list__key",
"value-class": "c-data-list__value",
"class": "c-data-list\nc-data-list--is-vert\nc-data-list--is-wide\nc-data-list--should-truncate-values"
}
/* Vert. & Narrow */
{
"shouldSkipPattern": true,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "components",
"data": {
"key-value-pairs": [
{
"key": "System Processor",
"value": "560 GB"
},
{
"key": "Types of Antimatter",
"value": "3 theorized, 1 actual"
},
{
"key": "Quantum Nodes",
"value": "Several"
}
]
},
"key-class": "c-data-list__key",
"value-class": "c-data-list__value",
"class": "c-data-list\nc-data-list--is-vert\nc-data-list--is-narrow"
}
/* Vert. & Narrow (Values Truncated) */
{
"shouldSkipPattern": true,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "components",
"data": {
"key-value-pairs": [
{
"key": "System Processor",
"value": "560 GB"
},
{
"key": "Types of Antimatter",
"value": "3 theorized, 1 actual"
},
{
"key": "Quantum Nodes",
"value": "Several"
}
]
},
"key-class": "c-data-list__key",
"value-class": "c-data-list__value",
"class": "c-data-list\nc-data-list--is-vert\nc-data-list--is-narrow\nc-data-list--should-truncate-values"
}
/* Multi-Row Items */
{
"shouldSkipPattern": true,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "components",
"data": {
"key-value-pairs": [
{
"key": "System Processor",
"value": "560 GB"
},
{
"key": "Types of Antimatter",
"value": "3 theorized, 1 actual"
},
{
"key": "Quantum Nodes",
"value": "Several"
}
]
},
"key-class": "c-data-list__key",
"value-class": "c-data-list__value",
"class": "c-data-list"
}