Blazorise Jumbotron component

Lightweight, flexible component for showcasing hero unit style content.

A lightweight, flexible component that can optionally extend the entire viewport to showcase some special content or information.

  • <Jumbotron> the main container.

    • <JumbotronTitle> required title of the jumbotron.

    • <JumbotronSubtitle> optional subtitle of the jumbotron.

Examples

Basic

Jumbotron is a full width card that is usually displayed at the top of the page, sometimes also referred to as a "Hero component".

The jumbotron color should be only slightly off the background of the page to make your design feel "light".

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

It uses utility classes for typography and spacing to space content out within the larger container. 

<Jumbotron Background="Background.Light" Margin="Margin.Is4.FromBottom">
    <JumbotronTitle Size="JumbotronTitleSize.Is4">Hello, world!</JumbotronTitle>
    <JumbotronSubtitle>
        This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
    </JumbotronSubtitle>
    <Divider></Divider>
    <Paragraph>
        It uses utility classes for typography and spacing to space content out within the larger container.
    </Paragraph>
</Jumbotron>

Best Practices

One Message

Use a jumbotron for one prominent message or call to action rather than several unrelated features. Lead with a clear heading and brief supporting text that users can understand at a glance, and limit the number of actions so their priority remains obvious.

Responsive Design

Prominent typography and generous spacing can quickly consume a small viewport. Check text length, spacing, and action wrapping at narrow widths so the message remains readable without pushing important content too far down the page.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page