Message

The Message component is a simple, colored message block used to emphasize part of your page.

API Documentation

How it works #

The Message component provides a simple, styled message box for highlighting important information or content on your page.

How to use:
  1. Add the Message component to your page.
  2. Optionally include a MessageHeader for a title or heading.
  3. Place your main content inside the MessageBody section.
This demo shows the basic structure of a message with a header and body, suitable for general notifications or information.
Hello World
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed fermentum, nunc a gravida consectetur, eros velit ultricies nulla, nec scelerisque nunc risus id neque. Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, arcu ut pretium sollicitudin, ligula metus convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. Aliquam erat volutpat. 
<Message>
    <MessageHeader>
        <div>Hello World</div>
    </MessageHeader>
    <MessageBody>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
        eros velit ultricies nulla, nec scelerisque nunc risus id neque. 
        Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, 
        arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
        at vulputate felis ligula a nisl. Integer posuere, nisi eget 
        tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
        justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. 
        Aliquam erat volutpat.
    </MessageBody>
</Message>

Colors #

The Message component supports different color themes to convey various types of information. Use the Color parameter to set the message style.

How to use:
  1. Set the Color property to MessageColor.Dark for a dark-themed message.
  2. Include MessageHeader and MessageBody as needed.
This demo displays a message with the Dark color style.
Hello World
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed fermentum, nunc a gravida consectetur, eros velit ultricies nulla, nec scelerisque nunc risus id neque. Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, arcu ut pretium sollicitudin, ligula metus convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. Aliquam erat volutpat. 
<Message Color="MessageColor.Dark">
    <MessageHeader>
        <div>Hello World</div>
    </MessageHeader>
    <MessageBody>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
        eros velit ultricies nulla, nec scelerisque nunc risus id neque. 
        Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, 
        arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
        at vulputate felis ligula a nisl. Integer posuere, nisi eget 
        tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
        justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. 
        Aliquam erat volutpat.
    </MessageBody>
</Message>
Set the Color property to MessageColor.Link for a link-themed message, often used for informational or navigational content.

How to use:
  1. Use Color="MessageColor.Link" on the Message component.
  2. Structure your content with MessageHeader and MessageBody.
This demo shows a message styled with the Link color. 
<Message Color="MessageColor.Link">
    <MessageHeader>
        <div>Hello World</div>
    </MessageHeader>
    <MessageBody>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
        eros velit ultricies nulla, nec scelerisque nunc risus id neque. 
        Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, 
        arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
        at vulputate felis ligula a nisl. Integer posuere, nisi eget 
        tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
        justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. 
        Aliquam erat volutpat.
    </MessageBody>
</Message>
Use Color="MessageColor.Primary" to highlight primary actions or information.

How to use:
  1. Apply Color="MessageColor.Primary" to the Message component.
  2. Include header and body as needed.
This demo presents a message with the Primary color.
Hello World
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed fermentum, nunc a gravida consectetur, eros velit ultricies nulla, nec scelerisque nunc risus id neque. Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, arcu ut pretium sollicitudin, ligula metus convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. Aliquam erat volutpat. 
<Message Color="MessageColor.Primary">
    <MessageHeader>
        <div>Hello World</div>
    </MessageHeader>
    <MessageBody>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
        eros velit ultricies nulla, nec scelerisque nunc risus id neque. 
        Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, 
        arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
        at vulputate felis ligula a nisl. Integer posuere, nisi eget 
        tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
        justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. 
        Aliquam erat volutpat.
    </MessageBody>
</Message>
The Info color is ideal for neutral or informational messages. Set Color="MessageColor.Info" to use this style.

How to use:
  1. Set Color="MessageColor.Info" on the Message component.
  2. Use MessageHeader and MessageBody for your content.
This demo displays a message with the Info color.
Hello World
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed fermentum, nunc a gravida consectetur, eros velit ultricies nulla, nec scelerisque nunc risus id neque. Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, arcu ut pretium sollicitudin, ligula metus convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. Aliquam erat volutpat. 
<Message Color="MessageColor.Info">
    <MessageHeader>
        <div>Hello World</div>
    </MessageHeader>
    <MessageBody>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
        eros velit ultricies nulla, nec scelerisque nunc risus id neque. 
        Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, 
        arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
        at vulputate felis ligula a nisl. Integer posuere, nisi eget 
        tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
        justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. 
        Aliquam erat volutpat.
    </MessageBody>
</Message>
Use Color="MessageColor.Success" to indicate successful operations or positive feedback.

How to use:
  1. Apply Color="MessageColor.Success" to the Message component.
  2. Structure your message as needed.
This demo shows a message with the Success color.
Hello World
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed fermentum, nunc a gravida consectetur, eros velit ultricies nulla, nec scelerisque nunc risus id neque. Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, arcu ut pretium sollicitudin, ligula metus convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. Aliquam erat volutpat. 
<Message Color="MessageColor.Success">
    <MessageHeader>
        <div>Hello World</div>
    </MessageHeader>
    <MessageBody>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
        eros velit ultricies nulla, nec scelerisque nunc risus id neque. 
        Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, 
        arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
        at vulputate felis ligula a nisl. Integer posuere, nisi eget 
        tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
        justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. 
        Aliquam erat volutpat.
    </MessageBody>
</Message>
The Warning color is used for cautionary or warning messages. Set Color="MessageColor.Warning" to apply this style.

How to use:
  1. Use Color="MessageColor.Warning" on the Message component.
  2. Include header and body as appropriate.
This demo presents a message with the Warning color.
Hello World
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed fermentum, nunc a gravida consectetur, eros velit ultricies nulla, nec scelerisque nunc risus id neque. Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, arcu ut pretium sollicitudin, ligula metus convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. Aliquam erat volutpat. 
<Message Color="MessageColor.Warning">
    <MessageHeader>
        <div>Hello World</div>
    </MessageHeader>
    <MessageBody>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
        eros velit ultricies nulla, nec scelerisque nunc risus id neque. 
        Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, 
        arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
        at vulputate felis ligula a nisl. Integer posuere, nisi eget 
        tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
        justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. 
        Aliquam erat volutpat.
    </MessageBody>
</Message>
Use Color="MessageColor.Danger" for error or critical messages that require user attention.

How to use:
  1. Set Color="MessageColor.Danger" on the Message component.
  2. Structure your content with header and body as needed.
This demo displays a message with the Danger color.
Hello World
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed fermentum, nunc a gravida consectetur, eros velit ultricies nulla, nec scelerisque nunc risus id neque. Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, arcu ut pretium sollicitudin, ligula metus convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. Aliquam erat volutpat. 
<Message Color="MessageColor.Danger">
    <MessageHeader>
        <div>Hello World</div>
    </MessageHeader>
    <MessageBody>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
        eros velit ultricies nulla, nec scelerisque nunc risus id neque. 
        Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, 
        arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
        at vulputate felis ligula a nisl. Integer posuere, nisi eget 
        tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
        justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. 
        Aliquam erat volutpat.
    </MessageBody>
</Message>

Message body only #

The Message component can be used with only a MessageBody section, omitting the header for simpler notifications.

How to use:
  1. Add a Message component with your desired Color (optional).
  2. Place your content inside MessageBody without a MessageHeader.
This demo shows a dark message with only a body section.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed fermentum, nunc a gravida consectetur, eros velit ultricies nulla, nec scelerisque nunc risus id neque. Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, arcu ut pretium sollicitudin, ligula metus convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. Aliquam erat volutpat. 
<Message Color="MessageColor.Dark">
    <MessageBody>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
        eros velit ultricies nulla, nec scelerisque nunc risus id neque. 
        Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, 
        arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
        at vulputate felis ligula a nisl. Integer posuere, nisi eget 
        tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
        justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. 
        Aliquam erat volutpat.
    </MessageBody>
</Message>
This example uses the Link color for a message with only a body, suitable for simple informational notes.

How to use:
  1. Set Color="MessageColor.Link" on the Message component.
  2. Include only the MessageBody section.
This demo displays a link-colored message body only. 
<Message Color="MessageColor.Link">
    <MessageBody>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
        eros velit ultricies nulla, nec scelerisque nunc risus id neque. 
        Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, 
        arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
        at vulputate felis ligula a nisl. Integer posuere, nisi eget 
        tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
        justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. 
        Aliquam erat volutpat.
    </MessageBody>
</Message>
Use the Primary color for a message body only, ideal for highlighting key information.

How to use:
  1. Apply Color="MessageColor.Primary" to the Message component.
  2. Use only the MessageBody section.
This demo shows a primary-colored message body only.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed fermentum, nunc a gravida consectetur, eros velit ultricies nulla, nec scelerisque nunc risus id neque. Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, arcu ut pretium sollicitudin, ligula metus convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. Aliquam erat volutpat. 
<Message Color="MessageColor.Primary">
    <MessageBody>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
        eros velit ultricies nulla, nec scelerisque nunc risus id neque. 
        Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, 
        arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
        at vulputate felis ligula a nisl. Integer posuere, nisi eget 
        tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
        justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. 
        Aliquam erat volutpat.
    </MessageBody>
</Message>
The Info color can be used for neutral messages with only a body section.

How to use:
  1. Set Color="MessageColor.Info" on the Message component.
  2. Include only the MessageBody section.
This demo presents an info-colored message body only.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed fermentum, nunc a gravida consectetur, eros velit ultricies nulla, nec scelerisque nunc risus id neque. Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, arcu ut pretium sollicitudin, ligula metus convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. Aliquam erat volutpat. 
<Message Color="MessageColor.Info">
    <MessageBody>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
        eros velit ultricies nulla, nec scelerisque nunc risus id neque. 
        Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, 
        arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
        at vulputate felis ligula a nisl. Integer posuere, nisi eget 
        tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
        justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. 
        Aliquam erat volutpat.
    </MessageBody>
</Message>
Use the Success color for positive feedback or confirmation messages with only a body.

How to use:
  1. Apply Color="MessageColor.Success" to the Message component.
  2. Use only the MessageBody section.
This demo displays a success-colored message body only.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed fermentum, nunc a gravida consectetur, eros velit ultricies nulla, nec scelerisque nunc risus id neque. Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, arcu ut pretium sollicitudin, ligula metus convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. Aliquam erat volutpat. 
<Message Color="MessageColor.Success">
    <MessageBody>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
        eros velit ultricies nulla, nec scelerisque nunc risus id neque. 
        Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, 
        arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
        at vulputate felis ligula a nisl. Integer posuere, nisi eget 
        tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
        justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. 
        Aliquam erat volutpat.
    </MessageBody>
</Message>
The Warning color is suitable for cautionary messages with only a body section.

How to use:
  1. Set Color="MessageColor.Warning" on the Message component.
  2. Include only the MessageBody section.
This demo shows a warning-colored message body only.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed fermentum, nunc a gravida consectetur, eros velit ultricies nulla, nec scelerisque nunc risus id neque. Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, arcu ut pretium sollicitudin, ligula metus convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. Aliquam erat volutpat. 
<Message Color="MessageColor.Warning">
    <MessageBody>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
        eros velit ultricies nulla, nec scelerisque nunc risus id neque. 
        Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, 
        arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
        at vulputate felis ligula a nisl. Integer posuere, nisi eget 
        tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
        justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. 
        Aliquam erat volutpat.
    </MessageBody>
</Message>
Use the Danger color for error or alert messages with only a body section.

How to use:
  1. Apply Color="MessageColor.Danger" to the Message component.
  2. Use only the MessageBody section.
This demo presents a danger-colored message body only.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed fermentum, nunc a gravida consectetur, eros velit ultricies nulla, nec scelerisque nunc risus id neque. Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, arcu ut pretium sollicitudin, ligula metus convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. Aliquam erat volutpat. 
<Message Color="MessageColor.Danger">
    <MessageBody>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
        eros velit ultricies nulla, nec scelerisque nunc risus id neque. 
        Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, 
        arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
        at vulputate felis ligula a nisl. Integer posuere, nisi eget 
        tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
        justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. 
        Aliquam erat volutpat.
    </MessageBody>
</Message>

Sizes #

The Message component supports different sizes to fit various UI needs. Use the Size parameter to adjust the message's scale.

How to use:
  1. Set the Size property to MessageSize.Small for a compact message.
  2. Include MessageHeader and MessageBody as needed.
This demo shows a small-sized message.
Hello World
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed fermentum, nunc a gravida consectetur, eros velit ultricies nulla, nec scelerisque nunc risus id neque. Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, arcu ut pretium sollicitudin, ligula metus convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. Aliquam erat volutpat. 
<Message Size="MessageSize.Small">
    <MessageHeader>
        <div>Hello World</div>
    </MessageHeader>
    <MessageBody>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
        eros velit ultricies nulla, nec scelerisque nunc risus id neque. 
        Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, 
        arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
        at vulputate felis ligula a nisl. Integer posuere, nisi eget 
        tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
        justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. 
        Aliquam erat volutpat.
    </MessageBody>
</Message>
The default message size is Normal. Omit the Size property or set it to MessageSize.Normal for standard sizing.

How to use:
  1. Use the Message component without specifying the Size property, or set Size="MessageSize.Normal".
  2. Structure your content as usual.
This demo displays a normal-sized message.
Hello World
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed fermentum, nunc a gravida consectetur, eros velit ultricies nulla, nec scelerisque nunc risus id neque. Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, arcu ut pretium sollicitudin, ligula metus convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. Aliquam erat volutpat. 
<Message>
    <MessageHeader>
        <div>Hello World</div>
    </MessageHeader>
    <MessageBody>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
        eros velit ultricies nulla, nec scelerisque nunc risus id neque. 
        Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, 
        arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
        at vulputate felis ligula a nisl. Integer posuere, nisi eget 
        tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
        justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. 
        Aliquam erat volutpat.
    </MessageBody>
</Message>
Set Size="MessageSize.Medium" for a medium-sized message, useful for drawing more attention.

How to use:
  1. Apply Size="MessageSize.Medium" to the Message component.
  2. Include header and body as needed.
This demo shows a medium-sized message.
Hello World
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed fermentum, nunc a gravida consectetur, eros velit ultricies nulla, nec scelerisque nunc risus id neque. Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, arcu ut pretium sollicitudin, ligula metus convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. Aliquam erat volutpat. 
<Message Size="MessageSize.Medium">
    <MessageHeader>
        <div>Hello World</div>
    </MessageHeader>
    <MessageBody>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
        eros velit ultricies nulla, nec scelerisque nunc risus id neque. 
        Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, 
        arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
        at vulputate felis ligula a nisl. Integer posuere, nisi eget 
        tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
        justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. 
        Aliquam erat volutpat.
    </MessageBody>
</Message>
Use Size="MessageSize.Large" for a prominent, large message.

How to use:
  1. Set Size="MessageSize.Large" on the Message component.
  2. Structure your content as needed.
This demo displays a large-sized message.
Hello World
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed fermentum, nunc a gravida consectetur, eros velit ultricies nulla, nec scelerisque nunc risus id neque. Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, arcu ut pretium sollicitudin, ligula metus convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. Aliquam erat volutpat. 
<Message Size="MessageSize.Large">
    <MessageHeader>
        <div>Hello World</div>
    </MessageHeader>
    <MessageBody>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
        eros velit ultricies nulla, nec scelerisque nunc risus id neque. 
        Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, 
        arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
        at vulputate felis ligula a nisl. Integer posuere, nisi eget 
        tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
        justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. 
        Aliquam erat volutpat.
    </MessageBody>
</Message>

Hide close button #

The Message component includes a close button by default. You can hide this button by setting the HideCloseButton parameter to true.

How to use:
  1. Add the Message component to your page.
  2. Set HideCloseButton="true" to hide the close button.
  3. Include MessageHeader and MessageBody as needed.
This demo shows a message without the close button.
Hello World
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed fermentum, nunc a gravida consectetur, eros velit ultricies nulla, nec scelerisque nunc risus id neque. Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, arcu ut pretium sollicitudin, ligula metus convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. Aliquam erat volutpat. 
<Message HideCloseButton="true">
    <MessageHeader>
        <div>Hello World</div>
    </MessageHeader>
    <MessageBody>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
        eros velit ultricies nulla, nec scelerisque nunc risus id neque. 
        Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, 
        arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
        at vulputate felis ligula a nisl. Integer posuere, nisi eget 
        tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
        justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. 
        Aliquam erat volutpat.
    </MessageBody>
</Message>
DO YOU KNOW?
This demo website is built using the BlazorExpress.Bulma library and published on the Azure Web App. See our source code on GitHub.
If you like BlazorExpress.Bulma, give it a star on GitHub!