One moment, we're cooking some code examples
Lists are a great tool for summarizing information and emphasizing your unique selling points (USPs).
An unordered list is a collection of related items that have no special order or sequence. The <ul> element represents an unordered list of items, typically rendered as a bulleted list. But be aware! the list has a default left margin of 40px and a top and bottom margin of 16px.
Default
With square
With nothing
An Ordered list is a collection of related items that have order. The <ol> element represents an unordered list of items. An ordered list can be changed with start="100" to change the starting number. with type="A" you can change it to be numerical ( 1, 2, 3 ), alphabetical in lower and higher case ( a, b, c ) or roman numerals in lower and higher case ( I, II, III )
Default
With start number
With different type
To change the list from vertical to horizontal you can style the <ul> and the <li>element. this is commonly used with a navigation bar.
With a nested is a list inside a list
To add the same icons to a list you can use a pseudo element like &:before
To add icon instead of bullets use Font Awesome, but if you want to place it in front of the text you must use a pseudo ( before or after ). This is because the system converts the unique code of the icon into an SVG. This is the best option if you want to use it for the whole list, but if you need different icons in your list you can place the code in the html.
To add different icons a list you can put the code in HTML like this <i class="fal fa-bolt">