W3.CSS — Lists

Basic List

<ul class="w3-ul">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

List Styles

<!-- Striped list -->
<ul class="w3-ul w3-striped">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<!-- Hoverable list -->
<ul class="w3-ul w3-hoverable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<!-- Border list -->
<ul class="w3-ul w3-border">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

List with Cards

<ul class="w3-ul w3-card-4">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

List Examples

<!-- Contact list -->
<ul class="w3-ul w3-card-4">
    <li class="w3-bar">
        <img src="avatar1.jpg" class="w3-bar-item w3-circle" style="width:50px">
        <div class="w3-bar-item">
            <span class="w3-large">John Doe</span><br>
            <span>Web Developer</span>
        </div>
    </li>
    <li class="w3-bar">
        <img src="avatar2.jpg" class="w3-bar-item w3-circle" style="width:50px">
        <div class="w3-bar-item">
            <span class="w3-large">Jane Smith</span><br>
            <span>Designer</span>
        </div>
    </li>
</ul>

<!-- Task list -->
<ul class="w3-ul w3-border">
    <li class="w3-padding-16">
        <span class="w3-tag w3-green w3-right">Done</span>
        Task 1
    </li>
    <li class="w3-padding-16">
        <span class="w3-tag w3-red w3-right">Pending</span>
        Task 2
    </li>
    <li class="w3-padding-16">
        <span class="w3-tag w3-orange w3-right">In Progress</span>
        Task 3
    </li>
</ul>

Ordered List

<ol class="w3-ol">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Mini Practice

Create HTML code that:

1. Creates a basic unordered list
2. Adds a striped list
3. Creates a contact list with avatars
4. Creates a task list with statuses

Up Next

Next: Learn about W3.CSS Forms.