Skip to content
IzzyBlazor 0.1.0-alpha.17

Enter all results ↑ ↓ move Esc close

Heading

Headings 1 to 6, with fluid sizes and section links.

An interactive page: C# runs over a Blazor Server connection.

A heading. Level sets the element (h1 to h6) and a default size; Size overrides the look without changing the document structure.

Usage

razor
<Heading Level="1">Build a multi-step wizard</Heading>
<Heading Level="2" Size="new() { Base = TextSize.Xl2, Md = TextSize.Xl4 }">...</Heading>

Levels

Use Level to set the element, h1 to h6, and its default size.

Preview

Quarterly report

Revenue by region

North America

Enterprise accounts

Renewals
Notes

Code

Levels.razor 
<Stack Gap="3" Grow>
    <Heading Level="1">Quarterly report</Heading>
    <Heading Level="2">Revenue by region</Heading>
    <Heading Level="3">North America</Heading>
    <Heading Level="4">Enterprise accounts</Heading>
    <Heading Level="5">Renewals</Heading>
    <Heading Level="6">Notes</Heading>
</Stack>

Size apart from level

Use Size to change how a heading looks without changing its level, per breakpoint or fluid with MinSize.

Preview

Billing

Ship faster, sleep better

Forms that work offline

Code

SizeLevel.razor 
@* An h2 that looks like a small label, an h1 that's bigger from Md up, and an h1 that grows
   smoothly with the screen. *@
<Stack Gap="4" Grow>
    <Heading Level="2" Size="TextSize.Sm" Color="Color.Muted" Transform="TextTransform.Uppercase" LetterSpacing="LetterSpacing.Wider">Billing</Heading>
    <Heading Level="1" Size="new() { Base = TextSize.Xl3, Md = TextSize.Xl5 }" LetterSpacing="LetterSpacing.Tight">Ship faster, sleep better</Heading>
    <Heading Level="1" Size="TextSize.Xl5" MinSize="TextSize.Xl3" LetterSpacing="LetterSpacing.Tight">Forms that work offline</Heading>
</Stack>

Details

Defaults: bold, tight line height, balanced wrapping, no margins. Every default can be overridden with the typography props.

In an AppMain on a page with an OnThisPage, a heading gets an id from its text (unless it sets one) and is listed there; headings at the levels it lists also become links to themselves, with a "#" shown on hover, so a section can be linked.

Mode support

What works in each mode, Heading
FeatureOffStaticLive
EverythingYesYesYes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).

Accessibility

  • Level sets the element; Size changes only the look, so keep levels in order, with one h1 per page.
  • It doesn't take As, so the element always matches the level; for text that only looks like a heading, use TextBlock.
  • An anchored heading's text is the link, so the link's name is the heading's text; the "#" is CSS with empty alt text and isn't read.
  • Each anchored heading is a tab stop, and shows its focus ring and "#" on keyboard focus.
  • Outline="false" leaves a heading out of the OnThisPage and gives it no link; Anchor="false" removes only the link.

Parameters

Heading parameters
PropTypeDefault
LevelThe heading level, 1 to 6, which sets the element (h1 to h6).int2
OutlineLists the heading in the page's OnThisPage (when its level is one it lists).booltrue
AnchorMakes the heading a link to itself, with a "#" on hover, so a section can be linked.bool?
SizeFont size.Responsive<TextSize>
WeightFont weight.FontWeight?
FamilyFont family.FontFamily?
AlignHorizontal alignment.Responsive<TextAlign>
LineHeightLine height.LineHeight?
LetterSpacingLetter spacing.LetterSpacing?
TransformLetter case.TextTransform?
DecorationUnderline or strike-through.TextDecoration?
ItalicItalic.boolfalse
WrapHow lines break: normal, never, balanced or pretty.TextWrap?
TruncateKeep to one line and end with an ellipsis when it does not fit.boolfalse
LineClampShow at most this many lines, ending with an ellipsis.int?
TabularNumsEqual-width digits, so numbers line up in columns and do not jitter when they change.boolfalse
MinSizeMakes the size fluid: the text is MinSize on a 360px screen and grows smoothly to Size at 1280px and up, as for a hero heading: <Heading Size="TextSize.Xl5" MinSize="TextSize.Xl3">.TextSize?
ChildContentThe content.RenderFragment?

Plus 25 surface props, 16 item props and 4 common props.

Full API

See also

  • TextBlock: body text with every text style.
  • OnThisPage: the page's sections, listed on the server.
  • Prose: styles plain HTML, such as rendered Markdown.