To notify users for different reasons (type) and at different contexts (scope).
| Class (Std.) | Class (Alt.) | Reason |
|---|---|---|
.c-message--type-success |
.message--success |
action completed |
.c-message--type-info |
.message--info |
just info, no problem |
.c-message--type-warning |
.message--warning |
event could prevent function |
.c-message--type-error |
.message--error |
event does prevent function |
| Class (Std.) | Class (Alt.) | Usage |
|---|---|---|
.c-message |
⊘ | base class required only for c-message-- modifiers |
.c-message--type-... |
.message--... |
express reason for message |
.c-message--scope-... |
.message--... |
define context of message |
<dl>
<dt>Type <strong>info</strong></dt>
<dd>
<div class="
c-message
c-message--type-info
c-message--scope-inline
">
<p>
<strong>Inline:</strong>
Notify user of any details that are <strong>not</strong> a problem.
<a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.
</p>
</div>
<div class="
c-message
c-message--type-info
c-message--scope-section
">
<p>
<strong>Section:</strong>
Notify user of any details that are <strong>not</strong> a problem.
<a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.
</p>
</div>
<div class="
c-message
c-message--type-info
c-message--scope-global
">
<p>
<strong>Global:</strong>
Notify user of any details that are <strong>not</strong> a problem.
<a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.
</p>
</div>
</dd>
<dt>Type <strong>success</strong></dt>
<dd>
<div class="
c-message
c-message--type-success
c-message--scope-inline
">
<p>
<strong>Inline:</strong>
Notify user of a successful event.
<a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.
</p>
</div>
<div class="
c-message
c-message--type-success
c-message--scope-section
">
<p>
<strong>Section:</strong>
Notify user of a successful event.
<a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.
</p>
</div>
<div class="
c-message
c-message--type-success
c-message--scope-global
">
<p>
<strong>Global:</strong>
Notify user of a successful event.
<a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.
</p>
</div>
</dd>
<dt>Type <strong>warning</strong></dt>
<dd>
<div class="
c-message
c-message--type-warning
c-message--scope-inline
">
<p>
<strong>Inline:</strong>
Notify user of an <strong>un</strong>successful event that <em>could prevent</em> functionality.
<a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.
</p>
</div>
<div class="
c-message
c-message--type-warning
c-message--scope-section
">
<p>
<strong>Section:</strong>
Notify user of an <strong>un</strong>successful event that <em>could prevent</em> functionality.
<a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.
</p>
</div>
<div class="
c-message
c-message--type-warning
c-message--scope-global
">
<p>
<strong>Global:</strong>
Notify user of an <strong>un</strong>successful event that <em>could prevent</em> functionality.
<a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.
</p>
</div>
</dd>
<dt>Type <strong>error</strong></dt>
<dd>
<div class="
c-message
c-message--type-error
c-message--scope-inline
">
<p>
<strong>Inline:</strong>
Notify user of an <strong>un</strong>successful event that <em>does prevent</em> functionality.
<a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.
</p>
</div>
<div class="
c-message
c-message--type-error
c-message--scope-section
">
<p>
<strong>Section:</strong>
Notify user of an <strong>un</strong>successful event that <em>does prevent</em> functionality.
<a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.
</p>
</div>
<div class="
c-message
c-message--type-error
c-message--scope-global
">
<p>
<strong>Global:</strong>
Notify user of an <strong>un</strong>successful event that <em>does prevent</em> functionality.
<a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.
</p>
</div>
</dd>
</dl>
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
.c-message {
margin-top: 1em;
}
dt {
text-transform: capitalize;
}
dd {
margin-block: 2em;
}
{
"shouldSkipPattern": true,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "components",
"types": [
{
"name": "info",
"content": "Notify user of any details that are <strong>not</strong> a problem."
},
{
"name": "success",
"content": "Notify user of a successful event."
},
{
"name": "warning",
"content": "Notify user of an <strong>un</strong>successful event that <em>could prevent</em> functionality."
},
{
"name": "error",
"content": "Notify user of an <strong>un</strong>successful event that <em>does prevent</em> functionality."
}
],
"scopes": [
{
"name": "inline",
"content": "An inline message."
},
{
"name": "section",
"content": "A wide block message."
},
{
"name": "global",
"content": "A site-wide banner message."
}
]
}