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 that needs to be displayed
  • <FigureCaption> a caption text bellow 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.

<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.

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

API

Attributes

Figure

FigureImage