Components: Lists

Use lists to display information in an ordered or unordered manner, such as propogation instructions or plant qualities.

Quick Summary

Creating Lists: Use ul or ol html elements with li items to create lists. All lists should have 25px of space between themselves and other page elements, with 10px of space between the list title and the list items.

Ordered Lists: Set the list-style property to decimal inside. View on Codepen.

Unordered Lists: Set the list-style property to none. Use the ::before pseudo-element to add a bullet character "•" to each list item, and set the colour to Leaf Green. Set right padding to 10px, and font-size to 1.2rem. View on Codepen.

Creating Lists

When creating lists for Plant Parents web products, create unordered and ordered list elements as normal. To style, add the appropriate css rules as shown in the examples below.

List Variations

Ordered List

Use an ordered list to display content which has a particular order, such as instructions. View on Codepen

List Name

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List

Use an unordered list to display content which does not have an order, such as qualities. View on Codepen

List Name

  • List Item 1
  • List Item 2
  • List Item 3