Documentation version
GuideApplies to 1.0.0

Hero layout and alignment

Set horizontal and vertical alignment for consistent banner layouts.

Hero alignment should be designed around the template rather than a single image.

Horizontal alignment

Choose a text alignment that works with the site’s design language and reading direction. Review left, center and right variants at the breakpoints where the content width changes.

Vertical alignment

Use vertical alignment to place the content block predictably within the hero height. Avoid relying on large manual margins to simulate alignment.

Content width

If long titles are possible, keep the readable text measure controlled so headings do not stretch across the entire hero on wide screens.