Blazor Callout

Blazor Bootstrap callout component provides presentation of content in a visually distinct manner. Includes a heading, icon and typically text-based content.

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 tip 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 Type="CalloutType.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 Type="CalloutType.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 Type="CalloutType.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 Type="CalloutType.Tip">
    <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>

<Callout Type="CalloutType.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 Type="CalloutType.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 Type="CalloutType.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 Type="CalloutType.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 Type="CalloutType.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 Type="CalloutType.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 Type="CalloutType.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 Type="CalloutType.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 Type="CalloutType.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 Type="CalloutType.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 Type="CalloutType.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 Type="CalloutType.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 Type="CalloutType.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>
Blazor Bootstrap Blazor Bootstrap
Links
Guides
Community