LgTitle

LgTitle displays a section title rendered as an <h1> to <h6> tag based on the level chosen. The text goes through the translation dictionary (keys #MyKey).

<LgTitle Text="#OrdersSection" TitleLevel="TitleLevel.Level2" />

• Namespace : Lagoon.UI.Components
• Inherits from : LgAriaComponentBase → LgComponentBase
• NuGet package : Lagoon.UI

Usage

Demo

Try this component in the Lagoon showcase.

Title level

The level is defined by TitleLevel (enumeration) or by Level (integer 1 to 6; both parameters control the same value, out-of-bounds values are clamped to 1-6).

DashboardPage.razor

<LgTitle Text="#Dashboard" TitleLevel="TitleLevel.Level1" />

<LgTitle Text="#RecentOrders" Level="2" CssClass="mt-4" />

Properties

All [Parameter] properties of the component, including inherited ones.

Name	Type	Default	Declared in	Description
CssClass	string	null	LgTitle	Additional CSS classes.
Level	int	0	LgTitle	Title level (1 to 6); out-of-bounds values are clamped to 1-6.
Text	string	null	LgTitle	Title text (plain text or dictionary key #MyKey).
TitleLevel	TitleLevel	(TitleLevel)0	LgTitle	Title level as an enumeration; controls the same value as Level.
AriaLabel	string	null	LgAriaComponentBase	Value of the aria-label attribute.
AriaLabelledBy	string	null	LgAriaComponentBase	Value of the aria-labelledby attribute.

Associated enumerations

TitleLevel

Value	Description
Level1	Renders an <h1>.
Level2	Renders an <h2>.
Level3	Renders an <h3>.
Level4	Renders an <h4>.
Level5	Renders an <h5>.
Level6	Renders an <h6>.

Best practices / accessibility

• Respect the heading level hierarchy in the page (one h1 only, no level skipping): it structures navigation for screen readers.
• Choose the level for structure, not size: adjust appearance with CssClass if needed.

Complete reference

All parameters: API Reference — LgTitle.

Related components

• LgLabel — simple label.