Informational Box - Fod.DemoPage

Styles

Informational boxes support four styles to convey different levels of importance.

Info

Scheduled maintenance is planned for tonight. Some services may be temporarily unavailable.

Info-Moderate

This is a moderate informational message for general guidance without high urgency.

Warning

Your session will expire in 5 minutes. Please save your work before then.

Error

The submitted data could not be validated. Please review the fields and try again.

razor

<FodInformationalBox Color="InformationalBoxColor.Info">Info message</FodInformationalBox>
<FodInformationalBox Color="InformationalBoxColor.Neutral">Info-Moderate message</FodInformationalBox>
<FodInformationalBox Color="InformationalBoxColor.Warning">Warning message</FodInformationalBox>
<FodInformationalBox Color="InformationalBoxColor.Error">Error message</FodInformationalBox>

Types

Informational boxes come in two visual types: Subtle (default, neutral gray background) and Strong (color-tinted background).

Subtle (Default)

Subtle type uses a neutral gray background regardless of color.

Strong

Strong type uses a color-tinted background based on the selected color.

All Colors in Strong Type

Neutral strong

Info strong

Warning strong

Error strong

razor

<FodInformationalBox Color="InformationalBoxColor.Info" Type="InformationalBoxType.Subtle">
    Subtle type — neutral gray background (default).
</FodInformationalBox>

<FodInformationalBox Color="InformationalBoxColor.Info" Type="InformationalBoxType.Strong">
    Strong type — color-tinted background.
</FodInformationalBox>

Variations

Different configurations of the informational box component.

w/ icon

Uses the default icon for the selected color.

icon-none

This informational box has no icon displayed.

w/ heading

Important Notice

This informational box includes a title to provide additional context.

w/ close

Click the close button to dismiss this informational box.

w/ link

For more details about the new policy changes, review our updated documentation.

Learn more

w/ action

For enhanced security, always use two-factor authentication when accessing your digital identity or personal records online.

razor

@* w/ icon (default) *@
<FodInformationalBox Color="InformationalBoxColor.Info">
    Default icon is shown automatically based on color.
</FodInformationalBox>

@* icon-none *@
<FodInformationalBox Color="InformationalBoxColor.Info" HideIcon="true">
    This box has no icon displayed.
</FodInformationalBox>

@* w/ heading *@
<FodInformationalBox Color="InformationalBoxColor.Info" Title="Important Notice">
    This informational box includes a title.
</FodInformationalBox>

@* w/ close *@
<FodInformationalBox Color="InformationalBoxColor.Info" Dismissible="true" OnDismiss="HandleDismiss">
    Click the close button to dismiss this box.
</FodInformationalBox>

@* w/ link *@
<FodInformationalBox Color="InformationalBoxColor.Info">
    <ChildContent>Review our updated documentation.</ChildContent>
    <Action>
        <a href="#">Learn more</a>
    </Action>
</FodInformationalBox>

@* w/ action *@
<FodInformationalBox Color="InformationalBoxColor.Info">
    <ChildContent>
        For enhanced security, always use two-factor authentication.
    </ChildContent>
    <Action>
        <FodButton Type="FodColor.Primary" Size="Size.Small"
                   Variant="ButtonVariant.Filled">
            Confirm your identity
        </FodButton>
        <FodButton Type="FodColor.Primary" Size="Size.Small"
                   Variant="ButtonVariant.Text">
            Learn more
        </FodButton>
    </Action>
</FodInformationalBox>

Accessibility

ARIA roles are automatically assigned based on color. Neutral and Info use role=status with aria-live=polite. Warning and Error use role=alert with aria-live=assertive.

Info (role=status, aria-live=polite)

Informational boxes use polite announcements by default.

Error (role=alert, aria-live=assertive)

Error boxes use assertive announcements for immediate attention.

Custom Role Override

This info box uses role=alert instead of the default role=status.

razor

@* Default roles based on color *@
<FodInformationalBox Color="InformationalBoxColor.Info">role=status, aria-live=polite</FodInformationalBox>
<FodInformationalBox Color="InformationalBoxColor.Error">role=alert, aria-live=assertive</FodInformationalBox>

@* Override default role *@
<FodInformationalBox Color="InformationalBoxColor.Info" Role="alert">
    Custom role override
</FodInformationalBox>

API Reference

Complete list of FodInformationalBox component parameters.

No properties defined.