Academy of Natural Sciences

Data List 

<dl class="o-data-list">

    <div class="o-data-list__item">
        <dt class="o-data-list__item-title f-bold">Title</dt>
        <dd class="o-data-list__item-value">Value</dd>
    </div>

    <div class="o-data-list__item">
        <dt class="o-data-list__item-title f-bold">Adults (13+)</dt>
        <dd class="o-data-list__item-value">$22.00</dd>
    </div>

    <div class="o-data-list__item">
        <dt class="o-data-list__item-title f-bold">Seniors (65+)</dt>
        <dd class="o-data-list__item-value">$19.00</dd>
    </div>

    <div class="o-data-list__item">
        <dt class="o-data-list__item-title f-bold">Military and Students (with ID)</dt>
        <dd class="o-data-list__item-value">$19.00</dd>
    </div>

</dl>
 
<dl class="o-data-list">
  {% for item in items %}
    <div class="o-data-list__item">
      <dt class="o-data-list__item-title f-bold">{{ item.title }}</dt>
      <dd class="o-data-list__item-value">{{ item.value }}</dd>
    </div>
  {% endfor %}
</dl>
 
{
  "pageColorTheme": "teal",
  "items": [
    {
      "title": "Title",
      "value": "Value"
    },
    {
      "title": "Adults (13+)",
      "value": "$22.00"
    },
    {
      "title": "Seniors (65+)",
      "value": "$19.00"
    },
    {
      "title": "Military and Students (with ID)",
      "value": "$19.00"
    }
  ]
}
  • Content: 
    .o-data-list__item {
  display: flex;
  justify-content: space-between;

  & + & {
    border-top: 0.1rem solid var(--ct-txt);
    padding-top: 2.6rem;
    margin-top: 2.2rem;
  }
}
  • URL: /components/raw/data-list/data-list.scss
  • Filesystem Path: patterns\04-objects\data-list\data-list.scss
  • Size: 192 Bytes

This list should be accompanied by a heading describing the content of the list.