Message
We support a number of different message styles. For proper styling, please use one of the six classes that we provided. They can be applied to elements such as p and div.
Please note: each message style has its corresponding colour and icon, which cannot be changed.
Available classes
Error message:
<p class="msg-error"> ... </p>
Warning message:
<p class="msg-warn"> ... </p>
Information message:
<p class="msg-info"> ... </p>
Success message:
<p class="msg-success"> ... </p>
Inline message:
<p class="msg-inline"> ... </p>
Customisation
Font size & Colours
As the error messages are written inside tag <p>, you are able to combine different styles with it. For example, by adding class="large" to the <p>, you can make the message in larger font; by adding class="text-unigrey" you can change the font colour to dark grey. Please refer to the Text documentation for all the available styles.
Please note: Gold and white font colour are prohibited on any message styles because those combinations are not fully accessible. Please view the Accessibility section for a full set of approved colour combinations.
<p class="msg-error large">This is a larger error message. Note that please don't use gold or white text on any message, because the combinations, will not pass WCAG 2.1.
<p class="msg-info text-unigrey">This is a normal-size error message with dark grey text.
Width
You can also add width class, such as w50, w60, w80 to change the width of the message. For more available classes, please view the Width section.
<p class="msg-info w80">This is a message with class w80, which makes the width of this message will always be 80% wide of its parent container.
We support a number of different message styles. For proper styling, please use one of the six classes that we provided. They can be applied to elements such as p and div. Please note, each message style has its corresponding colour and icon, which cannot be changed.
Available classes
Error message:
<p class="msg-error"> ... </p>
Warning message:
<p class="msg-warn"> ... </p>
Information message:
<p class="msg-info"> ... </p>
Success message:
<p class="msg-success"> ... </p>
Inline message:
<p class="msg-inline"> ... </p>
Customisation
Font size & Colours
As the error messages are written inside tag <p>, you are able to combine different styles with it. For example, by adding class="large" to the <p>, you can make the message in larger font; by adding class="text-unigrey" you can change the font colour to dark grey. Please refer to the Text documentation for all the available styles.
Please note: Gold and white font color are prohibited on any message styles because those combinations are not fully accessible. Please view Accessibility section for a full set of approved colour combinations.
<p class="msg-error large">This is a larger error message. Note that please don't use gold or white text on any message, because the combinations, will not pass WCAG 2.1.
<p class="msg-info text-unigrey">This is a normal-size error message with dark grey text.
Width
You can also add width class, such as w50, w60, w80 to change the width of the message. For more available classes, please view the Width section.
<p class="msg-info w80">This is a message with class w80, which makes the width of this message will always be 80% wide of its parent container.