Use a Description List.
<!-- Default -->
<dl>
<dt>
<pre><code></code></pre>
</dt>
<dd>
<dl>
<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>
<!-- Horz. & Wide -->
<dl>
<dt>
<pre><code>c-data-list
c-data-list--is-horz
c-data-list--is-wide</code></pre>
</dt>
<dd>
<dl class="c-data-list
c-data-list--is-horz
c-data-list--is-wide">
<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>
<!-- 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>
<dl class="c-data-list
c-data-list--is-horz
c-data-list--is-wide
c-data-list--should-truncate-values">
<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>
<!-- Horz. & Narrow -->
<dl>
<dt>
<pre><code>c-data-list
c-data-list--is-horz
c-data-list--is-narrow</code></pre>
</dt>
<dd>
<dl class="c-data-list
c-data-list--is-horz
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>
<!-- 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>
<dl class="c-data-list
c-data-list--is-horz
c-data-list--is-narrow
c-data-list--should-truncate-values">
<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>
<!-- Vert. & Wide -->
<dl>
<dt>
<pre><code>c-data-list
c-data-list--is-vert
c-data-list--is-wide</code></pre>
</dt>
<dd>
<dl class="c-data-list
c-data-list--is-vert
c-data-list--is-wide">
<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>
<!-- 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>
<dl class="c-data-list
c-data-list--is-vert
c-data-list--is-wide
c-data-list--should-truncate-values">
<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>
<!-- Vert. & Narrow -->
<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>
<!-- 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>
<dl class="c-data-list
c-data-list--is-vert
c-data-list--is-narrow
c-data-list--should-truncate-values">
<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>
/* 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"
}