Blazorise Figure component

Documentation and examples for displaying related images and text with the figure component in Blazorise.

Anytime you need to display a piece of content, like an image with an optional caption, consider using a Figure.

Structure

  • <Figure> the main container.

    • <FigureImage> source image to be displayed.

    • <FigureCaption> optional caption for the image.

Examples

Basic Example

Use the included <Figure>, <FigureImage> and <FigureCaption> classes to provide some baseline styles for the HTML5 figure and figcaption elements.
empty-256x256
A caption for the above image.
<Figure Size="FigureSize.Is256x256">
    <FigureImage Source="img/empty-256x256.png" AlternateText="empty-256x256" />
    <FigureCaption>A caption for the above image.</FigureCaption>
</Figure>

Rounded

Making the figure rounded is easy with the Rounded attribute.
empty-256x256
A caption for the above image.
<Figure Size="FigureSize.Is256x256">
    <FigureImage Source="img/empty-256x256.png" AlternateText="empty-256x256" Rounded />
    <FigureCaption>A caption for the above image.</FigureCaption>
</Figure>

Best Practices

Image Captions

Use a figure when an image and its caption form one self-contained piece of content. Alternative text should explain the image's purpose, while the caption supplies surrounding context instead of repeating the same wording. Keep captions brief and place longer explanations in the main document flow.

Stable Layout

Make figure images responsive and reserve their dimensions or aspect ratio whenever possible. This prevents surrounding content from moving while the image loads.

API

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

On this page