List Components

Documentation and examples on how to build lists and group components from CSS Utilities.

Default Lists

All lists—<ul>, <ol>, and <dl>—have their margin-top removed and a margin-bottom: 1rem. Nested lists have no margin-bottom. We’ve also reset the padding-left on <ul> and <ol> elements.

All lists have their top margin removed
And their bottom margin normalized
Nested lists have no bottom margin
- This way they have a more even appearance
- Particularly when followed by more list items
The left padding has also been reset

All lists have their top margin removed
And their bottom margin normalized
Nested lists have no bottom margin
- This way they have a more even appearance
- Particularly when followed by more list items
The left padding has also been reset

<!-- Grid -->
<div class="row">
<!-- Column -->
<div class="col mb-20">
<ul>
<li>All lists have their top margin removed</li>
<li>And their bottom margin normalized</li>
<li>Nested lists have no bottom margin
<ul>
<li>This way they have a more even appearance</li>
<li>Particularly when followed by more list items</li>
</ul>
</li>
<li>The left padding has also been reset</li>
</ul>
</div>
<!-- Column -->
<div class="col mb-20">
<ol>
<li>All lists have their top margin removed</li>
<li>And their bottom margin normalized</li>
<li>Nested lists have no bottom margin
<ul>
<li>This way they have a more even appearance</li>
<li>Particularly when followed by more list items</li>
</ul>
</li>
<li>The left padding has also been reset</li>
</ol>
</div>
<!-- // Column -->
</div>
<!-- // Grid -->

Lists With Icons

you can reset any default list with a .reset-list class name then you can use font-icons classes or images/SVG icons in your list items to change how it looks.

All lists have their top margin removed
And their bottom margin normalized
The left padding has also been reset
Custom icon Lists are Easly Made

<ul class="reset-list">
<li class="far fa-check-circle tx-icon">All lists have their top margin removed</li>
<li class="far fa-star tx-icon">And their bottom margin normalized</li>
<li class="far fa-times-circle tx-icon">The left padding has also been reset</li>
<li class="far fa-user tx-icon">Custom icon Lists are Easly Made</li>
</ul>

List Card

in the example below we are using the CSS Utilities to create a card-like list.

All lists have their top margin removed
And their bottom margin normalized
The left padding has also been reset
Custom icon Lists are Easly Made

All lists have their top margin removed
And their bottom margin normalized
The left padding has also been reset
Custom icon Lists are Easly Made

<!-- List w/ icons -->
<ul class="reset-list fs-14 radius-md bg-white border-1 border-solid border-gray-light">
<li class="pdy-10 pdx-20 divider-b far fa-check-circle tx-icon">All lists have their top margin removed</li>
<li class="pdy-10 pdx-20 divider-b fas fa-star tx-icon medium-weight">And their bottom margin normalized</li>
<li class="pdy-10 pdx-20 divider-b far fa-times-circle tx-icon bg-primary color-white">The left padding has also been reset</li>
<li class="pdy-10 pdx-20 far fa-user tx-icon">Custom icon Lists are Easly Made</li>
</ul>
<!-- // List w/ icons -->
<!-- Card List -->
<ul class="reset-list fs-14 radius-md bg-white border-1 border-solid border-gray-light">
<li class="pdy-10 pdx-20 divider-b bg-primary color-white">All lists have their top margin removed</li>
<li class="pdy-10 pdx-20 divider-b">And their bottom margin normalized</li>
<li class="pdy-10 pdx-20 divider-b strong-weight">The left padding has also been reset</li>
<li class="pdy-10 pdx-20">Custom icon Lists are Easly Made</li>
</ul>
<!-- // Card List -->

List With Images