List Items
- src
- components
- list-items.scss
Class list
- .list-items
- .list-items .list-item
Description
If you have repeated content that you want visually separated by a border, consider using .list-items. Any content you want can be put inside of a .list-item.
Structure
-
lorem
-
ipsum
-
dolor
<ul class="list-items">
<li class="list-item">
<!-- your content -->
</li>
<li class="list-item">
<!-- your content -->
</li>
<li class="list-item">
<!-- your content -->
</li>
</ul>Font size scaling
Using the font-size utility classes on a .list-items changes the padding value for each .list-item within.
-
lorem
-
ipsum
-
dolor
<ul class="list-items h6">
<li class="list-item">
<!-- your content -->
</li>
<li class="list-item">
<!-- your content -->
</li>
<li class="list-item">
<!-- your content -->
</li>
</ul>