The Foundation list

May 04, 2021 Foundation5

1. The Foundation list

2. List menu

The Foundation list

In HTML, the example of a <ul> is as follows:

< Ul >
< li > List item < /li >
< li > List item < /li >
< li > List item < /li >
< li > List item < /li >
< /ul >

Results:

List item
List item
List item
List item

Circle identifier

In Foundation, the prefix symbol for a sequenceless table <ul> is circled, using the .circle class, as follows:

< ul class= "circle" >
< li > List item < /li >
...
< /ul >

Try it out . . .

Block identifier

The block identifier prefix uses the .square class:

< ul class= "square" >
< li > List item < /li >
...
< /ul >

Try it out . . .

No identifier

If you don't need an identifier, you can use the .no-bullet class:

< ul class= "no-bullet" >
< li > List item < /li >
...
< /ul >

Try it out . . .

If you need to add <ul> a list of levels, you can add the .inline-list on .

< ul class= "inline-list" >

Try it out . . .

List menu

Some Web pages may require a list menu.

In HTML, list menus are defined <ul> tables, such as:

< Ul >
< li > < a href= "#" > Home < /a > < /li >
< li > < a href= "#" > Menu 1 < /a > < /li >
< li > < a href= "#" > Menu 2 < /a > < /li >
< li > < a href= "#" > Menu 3 < /a > < /li >
< /ul >

Results:

The Foundation list

Table of contents