List

The List component allows you to display items in either ordered (<ol>) or unordered (<ul>) lists. This is especially useful for dynamically rendering sets of data, like domains, invoices, statuses, or other collections from your API. Using the for each loop, you can easily generate list items based on the data you retrieve from custom endpoints.

Unordered lists

Unordered lists use bullet points to organize information and are defined using the <ul> tag. Below is an example of how you can create an unordered list of domains with color-coded pills to indicate their active status.

<ul>
  {% for item in domains['items'] %}
    <li>
      <span class="pill {% if item.active == true %}pill--green{% else %}pill--red{% endif %}">{{ item.domain }}</span>
    </li>
  {% endfor %}
</ul>

In this example, the for loop iterates through the domains.items object, to retrieve the list of domains. Each domain is wrapped in a list item (<li>) and displayed with a <span> containing the pill class. The pill color changes depending on the item.active value, where active domains are green and inactive domains are red.

Ordered lists

If you need a numbered list, you can use the <ol> tag to create an ordered list. Here’s an example of an ordered list that displays items such as statuses or priority levels:

<ol>
  {% for item in statuses['items'] %}
    <li>
      <span>{{ item.status_name }}</span>
    </li>
  {% endfor %}
</ol>

In this case, the for loop fetches statuses and lists them in numbered order. Each <li> contains the status name, but you can further customize this with additional HTML or CSS classes.

Customizing lists

Fernand’s List component is highly flexible, and you can apply different classes, styles, and dynamic data to match your needs. Here are some additional ideas for customizing your lists:

• Add badges or icons to each <li> item for extra context

• Use the if condition inside the loop to show or hide specific list items

By leveraging the power of loops and conditions, you can create dynamic, data-driven lists that automatically update based on your API’s responses.