Message Boxes

Main Message Box Types

There are five main types of message boxes.

<div class="euaa-message-box euaa-message-box--info">
    This is an Info message box
</div>
<div class="euaa-message-box euaa-message-box--success">
    This is a Success message box
</div>
<div class="euaa-message-box euaa-message-box--alert">
    This is an Alert message box
</div>
<div class="euaa-message-box euaa-message-box--error">
    This is an Error message box
</div>
<div class="euaa-message-box euaa-message-box--outline">
    This is an Outline message box
</div>

Message box with link

Just add a normal link with the <a> tag. This will work with all types of message boxes.

<div class="euaa-message-box euaa-message-box--info">
    This is an Info message box with a <a href="#">link to click</a>.
</div>

Message box with title

Just add the <h4> tag to add a title to the message box. This will work with all types of message boxes.

<div class="euaa-message-box euaa-message-box--info">
    <h4>Title here</h4>
    This is an Info message box
</div>

Message box without image

This is a message box without an icon. This isn't for normal use but in the case when there is limited space on the screen. This will work with all types of message boxes.

<div class="euaa-message-box euaa-message-box--info euaa-message-box--no-image">
    This is an Info message box without image
</div>

Condensed message box

This type of message box is only used for error messages.

<div class="euaa-message-box euaa-message-box--error-condensed">
    This is a condensed error message box
</div>