Messages
Messages are used to display important information to the user, such as informational, success, error, or warning messages.
In the examples below, you should make sure the headings within the message are appropriately nested within the page’s heading structure.
Page Level Messages
Page level messages are used to display important information about the page. They are typically displayed at the top of the page or section and can be used to provide feedback to the user about their actions, such as form submissions or system notifications.
Informational Message
Info Message
This is an info message. It provides additional information or context about a situation.
<div class="corn-message corn-message--info">
<div class="corn-message--status">
<svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-hidden="true"><use href="[information icon]"></use></svg>
</div>
<div class="corn-message--content">
<h5 class="corn-message--title">Info Message</h5>
<p>This is an info message. It provides additional information or context about a situation.</p>
</div>
</div>Success Message
Success Message
This is a success message. It indicates that an action was completed successfully.
<div class="corn-message corn-message--success">
<div class="corn-message--status">
<svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-hidden="true"><use href="[success icon]"></use></svg>
</div>
<div class="corn-message--content">
<h5 class="corn-message--title">Success Message</h5>
<p>This is a success message. It indicates that an action was completed successfully.</p>
</div>
</div>Warning Message
Warning Message
This is a warning message. It indicates that there is a potential issue that the user should be aware of.
<div class="corn-message corn-message--warning">
<div class="corn-message--status">
<svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-hidden="true"><use href="[warning icon]"></use></svg>
</div>
<div class="corn-message--content">
<h5 class="corn-message--title">Warning Message</h5>
<p>This is a warning message. It indicates that there is a potential issue that the user should be aware of.</p>
</div>
</div>Error Message
Error Message
This is an error message. It indicates that an action was not completed successfully and there is an issue that needs to be addressed.
<div class="corn-message corn-message--error">
<div class="corn-message--status">
<svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-hidden="true"><use href="[error icon]"></use></svg>
</div>
<div class="corn-message--content">
<h5 class="corn-message--title">Error Message</h5>
<p>This is an error message. It indicates that an action was not completed successfully and there is an issue that needs to be addressed.</p>
</div>
</div>Header-Only Messages
Header-only messages are used to display short messages that do not require additional context or information. They are typically used for simple notifications or alerts.
Informational Message
This is an info message.
<div class="corn-message corn-message--info">
<div class="corn-message--status">
<svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-hidden="true"><use href="[information icon]"></use></svg>
</div>
<div class="corn-message--content">
<p class="corn-message--title">This is an info message.</p>
</div>
</div>Success Message
This is a success message.
<div class="corn-message corn-message--success">
<div class="corn-message--status">
<svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-hidden="true"><use href="[success icon]"></use></svg>
</div>
<div class="corn-message--content">
<p class="corn-message--title">This is a success message.</p>
</div>
</div>Warning Message
This is a warning message.
<div class="corn-message corn-message--warning">
<div class="corn-message--status">
<svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-hidden="true"><use href="[warning icon]"></use></svg>
</div>
<div class="corn-message--content">
<p class="corn-message--title">This is a warning message.</p>
</div>
</div>Error Message
This is an error message.
<div class="corn-message corn-message--error">
<div class="corn-message--status">
<svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-hidden="true"><use href="[error icon]"></use></svg>
</div>
<div class="corn-message--content">
<p class="corn-message--title">This is an error message.</p>
</div>
</div>Message Tokens
:root {
--cc-message--border--radius: var(--cc-border--radius);
--cc-message--border--width: var(--cc-border--width);
--cc-message--border--style: var(--cc-border--style);
--cc-message--border--color: rgb(from var(--cc-border--color) r g b / 21%);
--cc-message--shadow: var(--cc-shadow--drop);
--cc-message--padding: var(--cc-size-1);
--cc-message--padding--sm: var(--cc-size--2);
--cc-message--background: var(--cc-gray-10);
--cc-message--title--color: var(--cc-gray-80);
--cc-message--status--border--radius: var(--cc-border--radius--round);
--cc-message--status--color: var(--cc-gray-80);
--cc-message--status--border--color: var(--cc-message--border--color);
--cc-message--status--border--style: var(--cc-border--style);
--cc-message--status--border--width: var(--cc-border--width);
--cc-message--success--background: var(--cc-status--success--background);
--cc-message--success--color: var(--cc-status--success--color);
--cc-message--success--border--color: var(--cc-status--success--border-color);
--cc-message--warning--background: var(--cc-status--warning--background);
--cc-message--warning--color: var(--cc-status--warning--color);
--cc-message--warning--border--color: var(--cc-status--warning--border-color);
--cc-message--error--background: var(--cc-status--error--background);
--cc-message--error--color: var(--cc-status--error--color);
--cc-message--error--border--color: var(--cc-status--error--border-color);
--cc-message--info--background: var(--cc-status--info--background);
--cc-message--info--color: var(--cc-status--info--color);
--cc-message--info--border--color: var(--cc-status--info--border-color);
}