<dl class="attributeList ">
<dt class="attributeList__attribute">Produced by</dt>
<dd class="attributeList__value">Will Parson</dd>
<dt class="attributeList__attribute">Music</dt>
<dd class="attributeList__value">Doctor Turtle via FreeMusicArchive.org</dd>
<dt class="attributeList__attribute">Additional footage</dt>
<dd class="attributeList__value">Jim Thompson</dd>
<dt class="attributeList__attribute">Special thanks to</dt>
<dd class="attributeList__value">Jim Thompson and the Maryland Department of Natural Resources</dd>
</dl>
<link media="all" rel="stylesheet" href="/attribute-list/attribute-list.css" />
<script src="/attribute-list/attribute-list.js"></script>
<dl class="attributeList {{ containerClass }}">
{%- for a in attributes %}
<dt class="attributeList__attribute">{{ a.attribute }}</dt>
<dd class="attributeList__value">{{ a.value }}</dd>
{%- endfor -%}
</dl>
{% import "_macros.twig" as h %}
{{ h.componentAssets('attribute-list') }}
{
"containerClass": null,
"attributes": [
{
"attribute": "Produced by",
"value": "Will Parson"
},
{
"attribute": "Music",
"value": "Doctor Turtle via FreeMusicArchive.org"
},
{
"attribute": "Additional footage",
"value": "Jim Thompson"
},
{
"attribute": "Special thanks to",
"value": "Jim Thompson and the Maryland Department of Natural Resources"
}
]
}
import "./attribute-list.scss";
.attributeList {
}
.attributeList__attribute {
font-weight: var(--bold-weight);
&:not(:first-of-type) {
margin-block-start: 1em;
}
& + .attributeList__value {
margin-block-start: 0.3em;
}
}
.attributeList__value {
margin-block-start: 0.5em;
}
.termsList__group {
& + & {
margin-block-start: var(--attributeListSpacing, 0.2em);
}
& > * {
display: inline;
}
}
.termsList__value--inline {
//used so that the first element inside dd.termsList__value is inline with dt (eg a <p>)
& > *:first-child {
display: inline;
}
}
If the definition description (<dd>) contains a block element (like a <p>), you can still have it be inline with the definition term (dt) by adding .termsList__value--inline to the definition description:
<div class="termsList__group">
<dt class="attributeList__attribute">Definition Term:</dt>
<dd class="termsList__value termsList__value--inline">
<p>Some block element that will appear inline with the definition term!</p>
</dd>
</div>