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

Attributes

Figure

Name Description Type Default
Size Figure size variations. FigureSize Default

FigureImage

Name Description Type Default
Source Image URL. string
AlternateText Alternate text when image cannot be found. string
Rounded Makes the figure border rounded. bool false