Blazorise Figure component

Keep an image and its caption together as a single piece of content.

Use the Figure component for illustrations, photographs, or diagrams that need a related caption.

Structure

A Figure groups an image with an optional caption.

Examples

Basic Example

Use the included <Figure>, <FigureImage> and <FigureCaption> classes to provide some baseline styles for the HTML5 figure and figcaption elements.

Hide code example

Copy code

<Figure Size="FigureSize.Is256x256">
    <FigureImage Source="img/empty-256x256.png" Text="empty-256x256" />
    <FigureCaption>A caption for the above image.</FigureCaption>
</Figure>

Rounded

Making the figure rounded is easy with the Rounded attribute.

Hide code example

Copy code

<Figure Size="FigureSize.Is256x256">
    <FigureImage Source="img/empty-256x256.png" Text="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.

• <Figure />
• <FigureImage />