Use a Description List.
<dl>
<dt>
<pre><code>c-data-list
c-data-list--is-vert
c-data-list--is-narrow</code></pre>
</dt>
<dd>
<dl class="c-data-list
c-data-list--is-vert
c-data-list--is-narrow">
<dt class="c-data-list__key">System Processor</dt>
<dd class="c-data-list__value">560 GB</dd>
<dt class="c-data-list__key">Types of Antimatter</dt>
<dd class="c-data-list__value">3 theorized, 1 actual</dd>
<dt class="c-data-list__key">Quantum Nodes</dt>
<dd class="c-data-list__value">Several</dd>
</dl>
</dd>
</dl>
{
"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"
}