Ready
Added in 2.0.0
Easily create nice looking description lists, which come in different styles.
Usage
Add the .gls-description-list class to display terms and descriptions below each other.
<dl class="gls-description-list">
<dt></dt>
<dd></dd>
</dl>
-
- Description term
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Description term
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Description term
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<dl class="gls-description-list"> <dt>Description term</dt> <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd> <dt>Description term</dt> <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd> <dt>Description term</dt> <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd> </dl>
Divider modifier
Add the .gls-description-list-divider class to add a horizontal line between list items.
<dl class="gls-description-list gls-description-list-divider">
<dt></dt>
<dd></dd>
</dl>
-
- Description term
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Description term
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Description term
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<dl class="gls-description-list gls-description-list-divider"> <dt>Description term</dt> <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd> <dt>Description term</dt> <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd> <dt>Description term</dt> <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd> </dl>