rivendellweb pattern library

Description 

<dl>
    <dt>Lorem ipsum</dt>
    <dd>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </dd>
    <dd>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </dd>
    <dd>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </dd>
    <dt>Lorem ipsum</dt>
    <dd>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </dd>
    <dd>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </dd>
    <dd>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </dd>
    <dt>Lorem ipsum</dt>
    <dd>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </dd>
    <dd>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </dd>
    <dd>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </dd>
    <dt>Lorem ipsum</dt>
    <dd>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </dd>
    <dd>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </dd>
    <dd>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </dd>
</dl>
 
<dl>
{{#each listItems as |item|}}
    <dt>{{ item.term }}</dt>
    <dd>
      {{ item.description }}
      {{ item.description }}
      {{ item.description }}
      {{ item.description }}
      {{ item.description }}
      {{ item.description }}
      {{ item.description }}
      {{ item.description }}
      {{ item.description }}
      {{ item.description }}
    </dd>
    <dd>
      {{ item.description }}
      {{ item.description }}
      {{ item.description }}
      {{ item.description }}
      {{ item.description }}
      {{ item.description }}
      {{ item.description }}
      {{ item.description }}
      {{ item.description }}
      {{ item.description }}
    </dd>
    <dd>
      {{ item.description }}
      {{ item.description }}
      {{ item.description }}
      {{ item.description }}
      {{ item.description }}
      {{ item.description }}
      {{ item.description }}
      {{ item.description }}
      {{ item.description }}
      {{ item.description }}
    </dd>
{{/each}}
</dl>
 
{
  "listItems": [
    {
      "term": "Lorem ipsum",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
    },
    {
      "term": "Lorem ipsum",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
    },
    {
      "term": "Lorem ipsum",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
    },
    {
      "term": "Lorem ipsum",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
    }
  ]
}
  • Content: 
    dt {
  font-size: 1.5rem;
  font-weight: 700;
}

dd {
  margin-inline-start: 2em;
}

dd:not(:last-child) {
  margin-block-end: 2rem;
}

.font-desc {
  font-size: 1.5rem;
  font-weight: 700;

  & dd {
    margin-inline-start: 2em;
  }
  
  & dd:not(:last-child) {
    margin-block-end: 2rem;
  }
}
  • URL: /components/raw/description/description-list.css
  • Filesystem Path: src/components/01-atoms/10-list/description-list/description-list.css
  • Size: 296 Bytes
  • Handle: @description
  • Preview:
  • Filesystem Path: src/components/01-atoms/10-list/description-list/description-list.hbs

No notes defined.