Swiftlets
DocumentationShowcaseAbout

Lists

Examples of HTML list elements including unordered lists, ordered lists, and definition lists

← Back to Showcase

Unordered List

Basic unordered list with nested items.

Swift Code

UL {
    LI("First item")
    LI("Second item")
    LI("Third item with nested list") {
        UL {
            LI("Nested item 1")
            LI("Nested item 2")
        }
    }
}

Generated HTML

<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item with nested list
        <ul>
            <li>Nested item 1</li>
            <li>Nested item 2</li>
        </ul>
    </li>
</ul>

Preview

  • First item
  • Second item
  • Third item with nested list
    • Nested item 1
    • Nested item 2

Ordered List

Numbered list for sequential items or steps.

Swift Code

OL {
    LI("First step")
    LI("Second step")
    LI("Third step")
    LI("Fourth step")
}
.style("counter-reset", "item")

Generated HTML

<ol style="counter-reset: item">
    <li>First step</li>
    <li>Second step</li>
    <li>Third step</li>
    <li>Fourth step</li>
</ol>

Preview

  1. First step
  2. Second step
  3. Third step
  4. Fourth step

Definition List

Definition lists for terms and their descriptions.

Swift Code

DL {
    DT("HTML")
    DD("HyperText Markup Language - the standard markup language for web pages")
    
    DT("CSS")
    DD("Cascading Style Sheets - describes how HTML elements are displayed")
    
    DT("JavaScript")
    DD("A programming language that enables interactive web pages")
}

Generated HTML

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language - the standard markup language for web pages</dd>
    
    <dt>CSS</dt>
    <dd>Cascading Style Sheets - describes how HTML elements are displayed</dd>
    
    <dt>JavaScript</dt>
    <dd>A programming language that enables interactive web pages</dd>
</dl>

Preview

HTML
HyperText Markup Language - the standard markup language for web pages
CSS
Cascading Style Sheets - describes how HTML elements are displayed
JavaScript
A programming language that enables interactive web pages

Styled List

Custom styled lists with icons and formatting.

Swift Code

UL {
    LI("✅ Featured item with custom styling")
    LI("🎯 Another styled item")
    LI("🚀 Third styled item")
}
.style("list-style", "none")
.style("padding-left", "0")

Generated HTML

<ul style="list-style: none; padding-left: 0">
    <li>✅ Featured item with custom styling</li>
    <li>🎯 Another styled item</li>
    <li>🚀 Third styled item</li>
</ul>

Preview

  • ✅ Featured item with custom styling
  • 🎯 Another styled item
  • 🚀 Third styled item

Mixed List Types

Combining ordered and unordered lists for complex content.

Swift Code

Div {
    H3("Recipe Instructions")
    OL {
        LI("Gather ingredients:")
        UL {
            LI("2 cups flour")
            LI("1 cup sugar")
            LI("3 eggs")
        }
        LI("Mix dry ingredients")
        LI("Add wet ingredients")
        LI("Bake at 350°F for 30 minutes")
    }
}

Generated HTML

<div>
    <h3>Recipe Instructions</h3>
    <ol>
        <li>Gather ingredients:</li>
        <ul>
            <li>2 cups flour</li>
            <li>1 cup sugar</li>
            <li>3 eggs</li>
        </ul>
        <li>Mix dry ingredients</li>
        <li>Add wet ingredients</li>
        <li>Bake at 350°F for 30 minutes</li>
    </ol>
</div>

Preview

Recipe Instructions

  1. Gather ingredients:
    • 2 cups flour
    • 1 cup sugar
    • 3 eggs
  2. Mix dry ingredients
  3. Add wet ingredients
  4. Bake at 350°F for 30 minutes
Text FormattingForms