List

A styled list component that renders ordered, unordered, or unstyled lists using USWDS typography classes.

Props

Prop	Default	Description
`list_type`		List style: `ordered`, `unstyled`, or leave empty for unordered (default)

Slots

Slot	Description
(default)	List items (`<li>` elements)

Example Usage

Unordered List (Default)

<c-list>
    <li>Unordered list item one</li>
    <li>Unordered list item two</li>
    <li>Unordered list item three</li>
</c-list>

Ordered List

<c-list list_type="ordered">
    <li>First step</li>
    <li>Second step</li>
    <li>Third step</li>
</c-list>

Unstyled List

Removes bullets and default list margins.

<c-list list_type="unstyled">
    <li>Item without bullet</li>
    <li>Another item</li>
    <li>One more item</li>
</c-list>

Usage Notes

Omitting list_type (or leaving it empty) renders a standard <ul class="usa-list">
The unstyled variant (list_type="unstyled") is useful for navigation menus or custom list layouts where the default bullet styling is not wanted
For icon-annotated lists, use the c-icon-list component instead

{% load cotton %}

<div class="component-variants">
    <h1>List Component</h1>
    
    {% for variant in variants %}
    <div class="component-variant">
        <h2 class="variant-title">{{ variant.title }}</h2>

        {% cotton list list_type="{{ variant.list_type }}" %}
            {% for item in variant.items %}
                <li>{{ item.text }}</li>
            {% endfor %}
        {% endcotton %}
    </div>
    {% endfor %}
</div>

name: List Component
context:
  variants:            
    - title: "Unordered List"
      list_type: "unordered"
      items:
        - text: "Unordered list item"
        - text: "Unordered list item"
        - text: "Unordered list item"
    - title: "Ordered List"
      list_type: "ordered"
      items:
        - text: "Ordered list item"
        - text: "Ordered list item"
        - text: "Ordered list item"
    - title: "Unstyled List"
      list_type: "unstyled"
      items:
        - text: "Unstyled list item"
        - text: "Unstyled list item"
        - text: "Unstyled list item"