Blazorise Jumbotron component

Give a page introduction or featured message a prominent place.

Use the Jumbotron component for a landing page introduction, announcement, or other content that needs more emphasis than the surrounding page.

Structure

A Jumbotron can contain a title, a subtitle, and other featured content.

  • <Jumbotron>Contains the featured content.
    • <JumbotronTitle>The main heading.
    • <JumbotronSubtitle>An optional supporting heading.

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 />
    <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