Default Message
A basic message block with a neutral "Slate" color.
- Uses the .message class for styling.
- No additional colors—defaults to a neutral look.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus molestias, maxime quam odio velit commodi, nesciunt impedit deleniti praesentium. Quod necessitatibus animi quia cupiditate rerum, voluptate velit voluptas quasi aspernatur.
<p class="message">...</p>
Message Variants
You can modify the appearance using these additional classes:
Success / Positive Message
Use .message--positive for success confirmations (e.g., form submissions).
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus molestias, maxime quam odio velit commodi, nesciunt impedit deleniti praesentium. Quod necessitatibus animi quia cupiditate rerum, voluptate velit voluptas quasi aspernatur.
<p class="message message--positive">...</p>
Informational Message
Use .message--info for general notices or updates.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus molestias, maxime quam odio velit commodi, nesciunt impedit deleniti praesentium. Quod necessitatibus animi quia cupiditate rerum, voluptate velit voluptas quasi aspernatur.
<p class="message message--info">...</p>
Warning Message
Use .message--warning for cautionary alerts (e.g., security warnings).
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus molestias, maxime quam odio velit commodi, nesciunt impedit deleniti praesentium. Quod necessitatibus animi quia cupiditate rerum, voluptate velit voluptas quasi aspernatur.
<p class="message message--warning">...</p>
Error / Negative Message
Use .message--negative for errors or validation failures.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus molestias, maxime quam odio velit commodi, nesciunt impedit deleniti praesentium. Quod necessitatibus animi quia cupiditate rerum, voluptate velit voluptas quasi aspernatur.
<p class="message message--negative">...</p>