HAS Green Academy styleguide

List Definitions

1179 × 333 
<dl class="c-list-definition">
    <div>
        <dt>Diploma</dt>
        <dd>Hbo Bachelor</dd>
    </div>
    <div>
        <dt>Start in</dt>
        <dd>September</dd>
    </div>
    <div>
        <dt>Studieduur</dt>
        <dd>4 jaar</dd>
    </div>
    <div>
        <dt>Leerweg</dt>
        <dd>Voltijd</dd>
    </div>
</dl>
 
<dl class="c-list-definition">
  {{#each items}}
    <div>
      <dt>{{term}}</dt>
      <dd>{{description}}</dd>
    </div>
  {{/each}}
</dl>
 
{
  "items": [
    {
      "term": "Diploma",
      "description": "Hbo Bachelor"
    },
    {
      "term": "Start in",
      "description": "September"
    },
    {
      "term": "Studieduur",
      "description": "4 jaar"
    },
    {
      "term": "Leerweg",
      "description": "Voltijd"
    }
  ]
}
  • Content: 
    /*  =========================================================================
    Components.List-definition
    ========================================================================= */

.c-list-definition {
  display: grid;
  gap: var(--space-tiny) var(--space-base);
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));

  dt {
    font-weight: var(--font-weight-bold);
  }

  dd {
    margin-inline-start: 0;
  }
}
  • URL: /components/raw/atoms-list-definitions/_list-definitions.scss
  • Filesystem Path: src/components/atoms/lists/list-definitions/_list-definitions.scss
  • Size: 433 Bytes

No notes defined.