Media

Media Component

The Media component is used to build complex and repetitive content where media is positioned alongside content.

Inheritance

Media : BootstrapComponentBase

Parameters

Name	Type	Description
Heading	string	The text to display as heading.
HeadingLevel	HeadingLevel	The level for the heading. The default is HeadingLevel.H5.
HeadingDisplay	HeadingDisplay?	Use the heading display to make the heading even more stand out. The default is null.
HeadingTemplate	RenderFragment<string>	Allows you to completely customize the heading. The context parameter for the template contains the string specified on the Heading parameter.
ImageCssStyle	string	Enables you to specify CSS styles for your image. This value can be anything that you can set in the style attribute for <img /> elements.
ImageUrl	string	The URL to the image to show in the component.
ImageTemplate	RenderFragment<string>	Allows you to completely customize the rendering of the image. The context parameter to the template contains the URL specified in the ImageUrl parameter.
ImageHorizontalAlignment	HorizontalAlignment	Specifies whether to align the image to the left or to the right. Default is HorizontalAlignment.Left.
ImageVerticalAlignment	VerticalAlignment	Allows you to define how the image is aligned vertically. The default is VerticalAlignment.Top.

Examples

Basic Media

<Media Heading="Standard Media Object" ImageUrl="...">
    <Paragraph>
        This is a standard media object with the image
        aligned to the left.
    </Paragraph>
</Media>

Image Alignment

<Media
    Heading="Image to the right"
    ImageUrl="..."
    ImageHorizontalAlignment="HorizontalAlignment.Right">

    This image is aligned to the right.
</Media>

<Media
    Heading="Image on the bottom"
    ImageUrl="..."
    ImageVerticalAlignment="VerticalAlignment.Bottom">

    <Paragraph Height="200">
        This is a 200px high paragraph that demonstrates
        how to use the vertical image alignment.
    </Paragraph>
</Media>

Nesting

Nesting Media components is also supported.

<Media Heading="Root Media Object">
    <Paragraph>
        The root-level Media component.
    </Paragraph>

    <Media Heading="Child Media Object">
        <Paragraph>
            A child Media component.
        </Paragraph>

        <Media Heading="Grand Child Media Object">
            <Paragraph>
                An other nested Media object.
            </Paragraph>
        </Media>
    </Media>
</Media>