Stack

Stack arranges children in a vertical flex column.

github.com/fastygo/templ/ui

Summary

Stack arranges children in a vertical flex column.Stack is the default spacing primitive for sections.

Use Cases

Space form fields vertically with gap utilities

Stack headings and body copy in a section

Semantics

Base classes include flex flex-col items-start

ResolveTag uses TagGroupStack from utils

Example tag.default

First line

Second line

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Stack(ui.StackProps{Class: "gap-4"}) {
		@ui.Text(ui.TextProps{}, "First line")
		@ui.Text(ui.TextProps{}, "Second line")
	}
}

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Stack(ui.StackProps{Class: "gap-4"}) {
		@ui.Text(ui.TextProps{}, "First line")
		@ui.Text(ui.TextProps{}, "Second line")
	}
}

Example tag.ul

Item one

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Stack(ui.StackProps{Tag: "ul", Class: "gap-2"}) {
		@ui.Text(ui.TextProps{Tag: "span"}, "Item one")
	}
}

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Stack(ui.StackProps{Tag: "ul", Class: "gap-2"}) {
		@ui.Text(ui.TextProps{Tag: "span"}, "Item one")
	}
}

API

Attrs · templ.Attributes — role: html-attrs

Class · string — role: style-extension