Basic HTML Elements

Fundamental building blocks with Swiftlets syntax

Headings

All Heading Levels

H1("Heading Level 1")
H2("Heading Level 2")
H3("Heading Level 3")
H4("Heading Level 4")
H5("Heading Level 5")
H6("Heading Level 6")

Preview:

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Text Elements

Paragraphs

P("This is a paragraph with some text content.")
P("Another paragraph with different content.")
    .style("color", "#6c757d")

Preview:

This is a paragraph with some text content.

Another paragraph with different content.

Text Modifiers

Text("Plain text without paragraph wrapper")
Span("Inline span element")
    .style("color", "#667eea")

Preview:

Plain text without paragraph wrapperInline span element

Links

Various Link Types

Link(href: "/", "Home Link")
Link(href: "https://example.com", "External Link")
    .attribute("target", "_blank")
Link(href: "#section", "Anchor Link")
    .class("btn-modern")

Preview:

Container Elements

Div Containers

Div {
    H3("Container Title")
    P("Content inside a div container")
}
.style("padding", "1.5rem")
.style("background", "#f8f9fa")
.style("border-radius", "0.5rem")

Preview:

Container Title

Content inside a div container

Inline Spans

P {
    Text("This paragraph contains ")
    Span("highlighted text")
        .style("background", "#ffd93d")
        .style("padding", "0.2rem 0.4rem")
    Text(" within it.")
}

Preview:

This paragraph contains highlighted text within it.