Block

Block renders a top-level page landmark element.

github.com/fastygo/templ/ui

Summary

Block renders a top-level page landmark element.Do not nest Block inside another Block.

Use Cases

Define main page region with Tag main

Define page header and footer landmarks

Define content sections with Tag section

Semantics

All values in api.Tag.enum are valid landmarks

ResolveTag uses TagGroupLayout from utils.tags

Invalid Tag falls back to div

Example tag.main

Page content

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

templ Example() {
	@ui.Block(ui.BlockProps{Tag: "main", Class: "min-h-screen"}) {
		Page content
	}
}

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

templ Example() {
	@ui.Block(ui.BlockProps{Tag: "main", Class: "min-h-screen"}) {
		Page content
	}
}

Example tag.section

Section content

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

templ Example() {
	@ui.Block(ui.BlockProps{Tag: "section", Class: "py-8"}) {
		Section content
	}
}

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

templ Example() {
	@ui.Block(ui.BlockProps{Tag: "section", Class: "py-8"}) {
		Section content
	}
}

Example tag.header

Site header

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

templ Example() {
	@ui.Block(ui.BlockProps{Tag: "header", Class: "border-b border-border"}) {
		Site header
	}
}

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

templ Example() {
	@ui.Block(ui.BlockProps{Tag: "header", Class: "border-b border-border"}) {
		Site header
	}
}

Example tag.footer

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

templ Example() {
	@ui.Block(ui.BlockProps{Tag: "footer", Class: "border-t border-border"}) {
		Site footer
	}
}

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

templ Example() {
	@ui.Block(ui.BlockProps{Tag: "footer", Class: "border-t border-border"}) {
		Site footer
	}
}

Example tag.nav

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

templ Example() {
	@ui.Block(ui.BlockProps{Tag: "nav", Class: "py-2"}) {
		Primary navigation
	}
}

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

templ Example() {
	@ui.Block(ui.BlockProps{Tag: "nav", Class: "py-2"}) {
		Primary navigation
	}
}

API

Attrs · templ.Attributes — role: html-attrs

Class · string — role: style-extension

ID · string — role: identity