layout

Documentation

Overview

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

Index

• func Container(props ContainerProps, content elements.Items) templ.Component
• func Footer(props FooterProps, content elements.Items) templ.Component
• func Hero(props HeroProps, content elements.Items) templ.Component
• func HeroBody(props HeroBodyProps, content elements.Items) templ.Component
• func HeroFoot(props HeroFootProps, content elements.Items) templ.Component
• func HeroHead(props HeroHeadProps, content elements.Items) templ.Component
• func Level(props LevelProps, content elements.Items) templ.Component
• func LevelItem(props LevelItemProps, content elements.Items) templ.Component
• func LevelLeft(props LevelLeftProps, content elements.Items) templ.Component
• func LevelRight(props LevelRightProps, content elements.Items) templ.Component
• func Media(props MediaProps, content elements.Items) templ.Component
• func MediaContent(props MediaContentProps, content elements.Items) templ.Component
• func MediaLeft(props MediaLeftProps, content elements.Items) templ.Component
• func MediaRight(props MediaRightProps, content elements.Items) templ.Component
• func Section(props SectionProps, content elements.Items) templ.Component
• type ContainerProps
• type FooterProps
• type HeroBodyProps
• type HeroFootProps
• type HeroHeadProps
• type HeroProps
• type LevelItemProps
• type LevelLeftProps
• type LevelProps
• type LevelRightProps
• type MediaContentProps
• type MediaLeftProps
• type MediaProps
• type MediaRightProps
• type SectionProps

Functions

func Container

func Container(props ContainerProps, content elements.Items) templ.Component

Container renders a Bulma `.container` element.

func Footer

func Footer(props FooterProps, content elements.Items) templ.Component

Footer renders a Bulma `.footer` element.

func Hero

func Hero(props HeroProps, content elements.Items) templ.Component

Hero renders a Bulma `.hero` container.

func HeroBody

func HeroBody(props HeroBodyProps, content elements.Items) templ.Component

HeroBody renders a Bulma `.hero-body` container.

func HeroFoot

func HeroFoot(props HeroFootProps, content elements.Items) templ.Component

HeroFoot renders a Bulma `.hero-foot` container.

func HeroHead

func HeroHead(props HeroHeadProps, content elements.Items) templ.Component

HeroHead renders a Bulma `.hero-head` container.

func Level

func Level(props LevelProps, content elements.Items) templ.Component

Level renders a Bulma `.level` container.

func LevelItem

func LevelItem(props LevelItemProps, content elements.Items) templ.Component

LevelItem renders a Bulma `.level-item`.

func LevelLeft

func LevelLeft(props LevelLeftProps, content elements.Items) templ.Component

LevelLeft renders a Bulma `.level-left` container.

func LevelRight

func LevelRight(props LevelRightProps, content elements.Items) templ.Component

LevelRight renders a Bulma `.level-right` container.

func Media

func Media(props MediaProps, content elements.Items) templ.Component

Media renders a Bulma `.media` container.

func MediaContent

func MediaContent(props MediaContentProps, content elements.Items) templ.Component

MediaContent renders a Bulma `.media-content` container.

func MediaLeft

func MediaLeft(props MediaLeftProps, content elements.Items) templ.Component

MediaLeft renders a Bulma `.media-left` container.

func MediaRight

func MediaRight(props MediaRightProps, content elements.Items) templ.Component

MediaRight renders a Bulma `.media-right` container.

func Section

func Section(props SectionProps, content elements.Items) templ.Component

Section renders a Bulma `.section` element.

Types

type ContainerProps

type ContainerProps struct {
	// Fluid applies the `is-fluid` modifier,
	// making the container full-width.
	Fluid bool

	// Widescreen applies the `is-widescreen` modifier.
	Widescreen bool

	// FullHD applies the `is-fullhd` modifier.
	FullHD bool

	// Attr contains additional HTML attributes
	// for the `.container` element.
	Attr templ.Attributes
}

Container — Bulma container layout wrapper. Atomic level: ATOM

Container constrains the horizontal width of its content according to Bulma container rules.

This component does NOT manage grid, columns, or spacing. It is intended to be used as a structural layout wrapper.

type FooterProps

type FooterProps struct {
	// Attr contains additional HTML attributes
	// for the `.footer` element.
	Attr templ.Attributes
}

Footer — Bulma footer layout component. Atomic level: ORGANISM

Footer defines the bottom section of a page using the Bulma `.footer` class.

This component is purely structural and does NOT impose any internal layout or content structure.

type HeroBodyProps

type HeroBodyProps struct {
	// Attr contains additional HTML attributes
	// for the `.hero-body` container.
	Attr templ.Attributes
}

HeroBody — main content section of Hero. Atomic level: MOLECULE

HeroBody defines the primary content container of Hero. It does NOT impose layout rules or manage content behavior.

type HeroFootProps

type HeroFootProps struct {
	// Attr contains additional HTML attributes
	// for the `.hero-foot` container.
	Attr templ.Attributes
}

HeroFoot — bottom section of Hero. Atomic level: MOLECULE

HeroFoot is used for secondary navigation or additional actions below the Hero body.

type HeroHeadProps

type HeroHeadProps struct {
	// Attr contains additional HTML attributes
	// for the `.hero-head` container.
	Attr templ.Attributes
}

HeroHead — top section of Hero. Atomic level: MOLECULE

HeroHead is typically used to place a Navbar or auxiliary content above the main Hero body.

type HeroProps

type HeroProps struct {
	// Color defines the Bulma color modifier
	// (is-primary, is-link, is-dark, etc.).
	Color string

	// Size defines the Bulma size modifier
	// (is-small, is-medium, is-large, is-fullheight).
	Size string

	// Attr contains additional HTML attributes
	// for the `.hero` container.
	Attr templ.Attributes
}

Hero — Bulma hero layout component. Atomic level: ORGANISM

Hero defines a large layout wrapper used for prominent page sections such as headers and promotional blocks.

This component is structural only and does NOT manage content, behavior, or internal composition.

type LevelItemProps

type LevelItemProps struct {
	// Attr contains additional HTML attributes
	// for the `.level-item` wrapper.
	Attr templ.Attributes
}

LevelItem — individual item inside Level. Atomic level: MOLECULE

LevelItem wraps a single element inside Level and applies proper alignment and spacing.

type LevelLeftProps

type LevelLeftProps struct {
	// Attr contains additional HTML attributes
	// for the `.level-left` container.
	Attr templ.Attributes
}

LevelLeft — left-aligned section of Level. Atomic level: MOLECULE

LevelLeft groups items aligned to the left side of the Level container.

type LevelProps

type LevelProps struct {
	// Mobile applies the `is-mobile` modifier,
	// preventing collapsing on mobile devices.
	Mobile bool

	// Attr contains additional HTML attributes
	// for the `.level` container.
	Attr templ.Attributes
}

Level — Bulma level layout component. Atomic level: ORGANISM

Level is used to horizontally align elements to the left, right, or center using the Bulma `.level` pattern.

This component does NOT manage content behavior or state.

type LevelRightProps

type LevelRightProps struct {
	// Attr contains additional HTML attributes
	// for the `.level-right` container.
	Attr templ.Attributes
}

LevelRight — right-aligned section of Level. Atomic level: MOLECULE

LevelRight groups items aligned to the right side of the Level container.

type MediaContentProps

type MediaContentProps struct {
	// Attr contains additional HTML attributes
	// for the `.media-content` container.
	Attr templ.Attributes
}

MediaContent — main content section of Media. Atomic level: MOLECULE

MediaContent holds the primary textual or structured content associated with the media object.

type MediaLeftProps

type MediaLeftProps struct {
	// Attr contains additional HTML attributes
	// for the `.media-left` container.
	Attr templ.Attributes
}

MediaLeft — left section of Media. Atomic level: MOLECULE

MediaLeft is typically used for images, icons, or avatars displayed to the left of the content.

type MediaProps

type MediaProps struct {
	// Attr contains additional HTML attributes
	// for the `.media` container.
	Attr templ.Attributes
}

Media — Bulma media object layout component. Atomic level: ORGANISM

Media defines a structural layout pattern used to align images, icons, or avatars next to content.

This component is purely structural and does not manage content behavior or state.

type MediaRightProps

type MediaRightProps struct {
	// Attr contains additional HTML attributes
	// for the `.media-right` container.
	Attr templ.Attributes
}

MediaRight — right section of Media. Atomic level: MOLECULE

MediaRight is used for actions such as buttons, icons, or delete controls aligned to the right.

type SectionProps

type SectionProps struct {
	// Size defines the section size modifier
	// (is-medium, is-large).
	Size string

	// Attr contains additional HTML attributes
	// for the `.section` element.
	Attr templ.Attributes
}

Section — Bulma section layout wrapper. Atomic level: ORGANISM

Section provides vertical spacing between page sections using the Bulma `.section` class.

This component does NOT constrain content width. To limit horizontal width, compose it with Container explicitly.