In HTML, unordered lists (
<ul>
) examples are 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
8.15.1. Circle identifier ¶
In Foundation, unordered lists (
<ul>
The prefix symbol of) is circle, and the .circle class is used. The example is as follows:
<ul class="circle">
<li>List item</li>
...
</ul>
8.15.2. Square identifier ¶
The box identifier prefix uses the .square class:
<ul class="square">
<li>List item</li>
...
</ul>
8.15.3. 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>
If you need to add a horizontal list, you can use the
<ul>
Add on
.inline-list
Class:
<ul class="inline-list">
8.15.4. List menu ¶
Some Web pages may require list menus.
In HTML, list menus are the same as unordered lists
<ul>
To define, for example:
<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:
- `Home <foundation-lists.html#>`__
- `Menu 1 <foundation-lists.html#>`__
- `Menu 2 <foundation-lists.html#>`__
- `Menu 3 <foundation-lists.html#>`__