Blazor Callout

Blazor Bootstrap callout component provides content presentation in a visually distinct manner.

Examples #

NOTE
This is a default callout. Example text to show it in action. See callout documentation.
DANGER
This is an danger callout. Example text to show it in action. See callout documentation.
WARNING
This is an warning callout. Example text to show it in action. See callout documentation.
INFO
This is an info callout. Example text to show it in action. See callout documentation.
TIP
This is an success callout. Example text to show it in action. See callout documentation.
Razor 
<Callout>
    <strong>This is a default callout</strong>. Example text to show it in action. See <a href="https://blazorbootstrap.com/docs/components/callout">callout documentation</a>.
</Callout>

<Callout Color="CalloutColor.Danger">
    <strong>This is an danger callout</strong>. Example text to show it in action. See <a href="https://blazorbootstrap.com/docs/components/callout">callout documentation</a>.
</Callout>

<Callout Color="CalloutColor.Warning">
    <strong>This is an warning callout</strong>. Example text to show it in action. See <a href="https://blazorbootstrap.com/docs/components/callout">callout documentation</a>.
</Callout>

<Callout Color="CalloutColor.Info">
    <strong>This is an info callout</strong>. Example text to show it in action. See <a href="https://blazorbootstrap.com/docs/components/callout">callout documentation</a>.
</Callout>

<Callout Color="CalloutColor.Success">
    <strong>This is an success callout</strong>. Example text to show it in action. See <a href="https://blazorbootstrap.com/docs/components/callout">callout documentation</a>.
</Callout>

Custom heading #

Important
This is a default callout. Example text to show it in action. See callout documentation.
Important
This is an danger callout. Example text to show it in action. See callout documentation.
Important
This is an warning callout. Example text to show it in action. See callout documentation.
Important
This is an info callout. Example text to show it in action. See callout documentation.
Important
This is an tip callout. Example text to show it in action. See callout documentation.
Razor 
<Callout Heading="Important">
    <strong>This is a default callout</strong>. Example text to show it in action. See <a href="https://blazorbootstrap.com/docs/components/callout">callout documentation</a>.
</Callout>

<Callout Color="CalloutColor.Danger" Heading="Important">
    <strong>This is an danger callout</strong>. Example text to show it in action. See <a href="https://blazorbootstrap.com/docs/components/callout">callout documentation</a>.
</Callout>

<Callout Color="CalloutColor.Warning" Heading="Important">
    <strong>This is an warning callout</strong>. Example text to show it in action. See <a href="https://blazorbootstrap.com/docs/components/callout">callout documentation</a>.
</Callout>

<Callout Color="CalloutColor.Info" Heading="Important">
    <strong>This is an info callout</strong>. Example text to show it in action. See <a href="https://blazorbootstrap.com/docs/components/callout">callout documentation</a>.
</Callout>

<Callout Color="CalloutColor.Success" Heading="Important">
    <strong>This is an tip callout</strong>. Example text to show it in action. See <a href="https://blazorbootstrap.com/docs/components/callout">callout documentation</a>.
</Callout>

Large text #

NOTE

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

DANGER

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

WARNING

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

INFO

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

TIP

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Razor 
<Callout>
    <h4>Conveying meaning to assistive technologies</h4>
    <p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.</p>
</Callout>

<Callout Color="CalloutColor.Danger">
    <h4>Conveying meaning to assistive technologies</h4>
    <p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.</p>
</Callout>

<Callout Color="CalloutColor.Warning">
    <h4>Conveying meaning to assistive technologies</h4>
    <p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.</p>
</Callout>

<Callout Color="CalloutColor.Info">
    <h4>Conveying meaning to assistive technologies</h4>
    <p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.</p>
</Callout>

<Callout Color="CalloutColor.Success">
    <h4>Conveying meaning to assistive technologies</h4>
    <p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.</p>
</Callout>

Hide heading #

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Razor 
<Callout HideHeading="true">
    <h4>Conveying meaning to assistive technologies</h4>
    <p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.</p>
</Callout>

<Callout Color="CalloutColor.Danger" HideHeading="true">
    <h4>Conveying meaning to assistive technologies</h4>
    <p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.</p>
</Callout>

<Callout Color="CalloutColor.Warning" HideHeading="true">
    <h4>Conveying meaning to assistive technologies</h4>
    <p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.</p>
</Callout>

<Callout Color="CalloutColor.Info" HideHeading="true">
    <h4>Conveying meaning to assistive technologies</h4>
    <p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.</p>
</Callout>

<Callout Color="CalloutColor.Success" HideHeading="true">
    <h4>Conveying meaning to assistive technologies</h4>
    <p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.</p>
</Callout>
If you like Blazor Bootstrap, give it a star on GitHub!
Blazor Bootstrap Blazor Bootstrap
  • Designed and built with all the love in the world by the Blazor Bootstrap team with the help of our contributors.
  • Code licensed Apache License 2.0.
  • Currently v3.2.0.
  • Powered by .NET 9.0.0
Links
Guides
Community