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.

<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

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`