Portal Template

Lists

Learn about the List component and how to use it.

The List is a wrapper around styled ul and ol html tags. This is how it looks like:

  • Apples

  • Carrots

  • Pineapples

Add list

Import the component from the list folder:

import { List } from '../components/list';

The component accepts a type property which must have a value of either ordered or unordered:

<List type="ordered">
  <li><p>Buy the groceries</p></li>
  <li><p>Cook the food</p></li>
  <li><p>Eat the food</p></li>
  <li><p>Wash the dishes</p></li>
<List type="ordered">

This is how the ordered list looks like:

  1. Buy the groceries

  2. Cook the food

  3. Eat the food

  4. Wash the dishes

List component doesn't accept html attributes for the ol and ul tags. This is a todo.

Customize list style

Adjust the appearance in global.css