Data
List
Display a list of items, usually used for a list of links
Elements
The component is composed of multiple elements:
listthe wrapperlist__itemthe children.list__itemIconan optional icon for the list item. Has to be placed before the text
<div class="list">
<p class="list__item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="list__itemIcon">
<line x1="88" y1="24" x2="88" y2="56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<line x1="120" y1="24" x2="120" y2="56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<line x1="152" y1="24" x2="152" y2="56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<line x1="32" y1="216" x2="208" y2="216" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<path d="M83.3,216A88,88,0,0,1,32,136V88H208v48a88,88,0,0,1-51.3,80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<path d="M208,88h0a32,32,0,0,1,32,32v8a32,32,0,0,1-32,32h-3.38" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
</svg>
List item with icon
</p>
<p class="list__item">List item default 1</p>
<p class="list__item">List item default 2</p>
</div>List item with icon
List item default 1
List item default 2
Properties
Add classes to the wrapper class to change the style of the component.
Dense
Make the space between list items smaller
class="list list--success list--dense"
List dense
List dense
List dense