Components

Heading

A title. How big it looks and where it sits in the document's outline are two steps, so a small heading can still be an <h2>, and a large one can stay out of the outline.

Drawn and behaving as Flux UI's heading does, measured against its live docs.

Sizes

14, 16, 24 and 36 pixels.

HeadingSizesExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class HeadingSizesExample : Component
{
    protected override Component? Render() =>
        Div.Class("flex flex-col gap-4")[
            Ui.Heading["Default"],
            Ui.Heading.Lg["Large"],
            Ui.Heading.Xl["Extra large"],
            Ui.Heading.Xxl["Extra extra large"]
        ];
}

Live result

Default

Large

Extra large

Extra extra large

Heading level

The outline level is its own step: this one is an <h3> at the base size.

HeadingLevelExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class HeadingLevelExample : Component
{
    protected override Component? Render() =>
        [
            Ui.Heading.Level(3)["User profile"],
            Ui.Text.Class("mt-2")["This information will be displayed publicly."]
        ];
}

Live result

User profile

This information will be displayed publicly.

Leading subheading

A line of text above a heading.

HeadingLeadingExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class HeadingLeadingExample : Component
{
    protected override Component? Render() =>
        [
            Ui.Text["Year to date"],
            Ui.Heading.Xl.Class("mb-1")["$7,532.16"],
            Ui.Text.Color(Ui.Color.Green)["15.2%"]
        ];
}

Live result

Year to date

$7,532.16

15.2%

Reference

`Ui.Heading`

flux:heading

A title. Its size and its place in the outline are separate.

Step	Takes	What it does
`.Size(…)`	`Ui.HeadingSize` Base Lg Xl Xxl Each is a step of its own too, unless an HTML tag has its name.	How big it looks. Base when unset.
`.Level(…)`	`int`	The heading level, 1 to 4. Unset, it is a <div> outside the outline.
`.Accent()`	`bool`	Draws it in the accent colour.

It is one HTML element, so Id, Class, Style, Data, Aria and the events are its steps too.