CBP UI Library

Attribute List: Terms 

<dl class="termsList ">
    <div class="termsList__group">
        <dt class="attributeList__attribute">Produced by:</dt>
        <dd>Will Parson</dd>
    </div>
    <div class="termsList__group">
        <dt class="attributeList__attribute">Music:</dt>
        <dd>Doctor Turtle via FreeMusicArchive.org</dd>
    </div>
    <div class="termsList__group">
        <dt class="attributeList__attribute">Additional footage:</dt>
        <dd>Jim Thompson</dd>
    </div>
    <div class="termsList__group">
        <dt class="attributeList__attribute">Special thanks to:</dt>
        <dd>Jim Thompson and the Maryland Department of Natural Resources</dd>
    </div>
</dl>

<link media="all" rel="stylesheet" href="/attribute-list/attribute-list.css" />
<script src="/attribute-list/attribute-list.js"></script>
 
<dl class="termsList {{ containerClass }}">
    {%- for a in attributes %}
        <div class="termsList__group">
          <dt class="attributeList__attribute">{{ a.attribute }}:</dt>
          <dd>{{ a.value }}</dd>
        </div>
    {%- 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"
    }
  ]
}
  • Content: 
    .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;
  }
}
  • URL: /components/raw/attribute-list/attribute-list.scss
  • Filesystem Path: src/components/attribute-list/attribute-list.scss
  • Size: 565 Bytes

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>