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 class="c-data-list__key">System Processor</th>
<td class="c-data-list__value">560 GB</td>
</tr>
<tr>
<th class="c-data-list__key">Types of Antimatter</th>
<td class="c-data-list__value">3 theorized, 1 actual</td>
</tr>
<tr>
<th class="c-data-list__key">Quantum Nodes</th>
<td class="c-data-list__value">Several</td>
</tr>
</tbody>
</table>
</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 class="c-data-list__key">System Processor</th>
<td class="c-data-list__value">560 GB</td>
</tr>
<tr>
<th class="c-data-list__key">Types of Antimatter</th>
<td class="c-data-list__value">3 theorized, 1 actual</td>
</tr>
<tr>
<th class="c-data-list__key">Quantum Nodes</th>
<td class="c-data-list__value">Several</td>
</tr>
</tbody>
</table>
</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 class="c-data-list__key">System Processor</th>
<td class="c-data-list__value">560 GB</td>
</tr>
<tr>
<th class="c-data-list__key">Types of Antimatter</th>
<td class="c-data-list__value">3 theorized, 1 actual</td>
</tr>
<tr>
<th class="c-data-list__key">Quantum Nodes</th>
<td class="c-data-list__value">Several</td>
</tr>
</tbody>
</table>
</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 class="c-data-list__key">System Processor</th>
<td class="c-data-list__value">560 GB</td>
</tr>
<tr>
<th class="c-data-list__key">Types of Antimatter</th>
<td class="c-data-list__value">3 theorized, 1 actual</td>
</tr>
<tr>
<th class="c-data-list__key">Quantum Nodes</th>
<td class="c-data-list__value">Several</td>
</tr>
</tbody>
</table>
</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 class="c-data-list__key">System Processor</th>
<td class="c-data-list__value">560 GB</td>
</tr>
<tr>
<th class="c-data-list__key">Types of Antimatter</th>
<td class="c-data-list__value">3 theorized, 1 actual</td>
</tr>
<tr>
<th class="c-data-list__key">Quantum Nodes</th>
<td class="c-data-list__value">Several</td>
</tr>
</tbody>
</table>
</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 class="c-data-list__key">System Processor</th>
<td class="c-data-list__value">560 GB</td>
</tr>
<tr>
<th class="c-data-list__key">Types of Antimatter</th>
<td class="c-data-list__value">3 theorized, 1 actual</td>
</tr>
<tr>
<th class="c-data-list__key">Quantum Nodes</th>
<td class="c-data-list__value">Several</td>
</tr>
</tbody>
</table>
</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 class="c-data-list__key">System Processor</th>
<td class="c-data-list__value">560 GB</td>
</tr>
<tr>
<th class="c-data-list__key">Types of Antimatter</th>
<td class="c-data-list__value">3 theorized, 1 actual</td>
</tr>
<tr>
<th class="c-data-list__key">Quantum Nodes</th>
<td class="c-data-list__value">Several</td>
</tr>
</tbody>
</table>
</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 class="c-data-list__key">System Processor</th>
<td class="c-data-list__value">560 GB</td>
</tr>
<tr>
<th class="c-data-list__key">Types of Antimatter</th>
<td class="c-data-list__value">3 theorized, 1 actual</td>
</tr>
<tr>
<th class="c-data-list__key">Quantum Nodes</th>
<td class="c-data-list__value">Several</td>
</tr>
</tbody>
</table>
</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 class="c-data-list__key">System Processor</th>
<td class="c-data-list__value">560 GB</td>
</tr>
<tr>
<th class="c-data-list__key">Types of Antimatter</th>
<td class="c-data-list__value">3 theorized, 1 actual</td>
</tr>
<tr>
<th class="c-data-list__key">Quantum Nodes</th>
<td class="c-data-list__value">Several</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"
}
]
}
}
/* 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"
}
]
},
"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"
}
]
},
"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"
}
]
},
"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"
}
]
},
"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"
}
]
},
"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"
}
]
},
"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"
}
]
},
"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"
}
]
},
"class": "c-data-list\nc-data-list--is-vert\nc-data-list--is-narrow\nc-data-list--should-truncate-values"
}