Messaging is typically used for messages from the server - warnings, errors on form validation, site outage info, etc. An optional SVG-based icon is often used within messaging. We modify the icon’s vertical position to align to the top of its adjacent .messaging__content, accounting for messaging’s line-height. This allows for the icon to appear aligned to the cap height of .messaging__content‘a text, not to the top of .messaging__content bounding box.
It’s recommended to stick with rem units for messaging’s $font-size and $icon-size mixin arguments.
@mixin messaging()
None.
.messaging>.messaging__icon>svg^.messaging__content>{lorem ipsum}
<!-- Default -->
<div class="messaging">
<svg class="messaging__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1" />
<line x1="12" y1="12" x2="12" y2="12.01" />
<line x1="8" y1="12" x2="8" y2="12.01" />
<line x1="16" y1="12" x2="16" y2="12.01" />
</svg>
<div class="messaging__content">
<p><strong>Default</strong> – Message with a <a href="https://www.imarc.com/">link</a>.</p>
<a href="#" class="button -primary">Click Me</a>
</div>
</div>
<div class="messaging -success">
<svg class="messaging__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="9" />
<path d="M9 12l2 2l4 -4" />
</svg>
<div class="messaging__content">
<p>
<strong>Success</strong> – Message with a <a href="https://www.imarc.com/">link</a>.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis pariatur odio qui odit in natus voluptatum, dolore minus officia quae dolorem blanditiis? Accusantium aperiam nesciunt repudiandae? Dolorum soluta iure dolor.
</p>
<a href="#" class="button -primary">Click Me</a>
</div>
</div>
<div class="messaging -error">
<svg class="messaging__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z" />
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" />
</svg>
<div class="messaging__content">
<p><strong>Error</strong> – Message with a <a href="https://www.imarc.com/">link</a>.</p>
<ul>
<li>Error one</li>
<li>Error two</li>
</ul>
<a href="#" class="button -primary">Click Me</a>
</div>
</div>
<div class="messaging -info">
<svg class="messaging__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="9" />
<line x1="12" y1="8" x2="12.01" y2="8" />
<polyline points="11 12 12 12 12 16 13 16" />
</svg>
<div class="messaging__content">
<p><strong>Info</strong> – Message with a <a href="https://www.imarc.com/">link</a>.</p>
<a href="#" class="button -primary">Click Me</a>
</div>
</div>
<div class="messaging -warning">
<svg class="messaging__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 9v2m0 4v.01" />
<path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" />
</svg>
<div class="messaging__content">
<p><strong>Warning</strong> – Message with a <a href="https://www.imarc.com/">link</a>.</p>
<a href="#" class="button -primary">Click Me</a>
</div>
</div>
<!-- Filled -->
<div class="messaging -filled">
<svg class="messaging__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1" />
<line x1="12" y1="12" x2="12" y2="12.01" />
<line x1="8" y1="12" x2="8" y2="12.01" />
<line x1="16" y1="12" x2="16" y2="12.01" />
</svg>
<div class="messaging__content">
<p><strong>Default</strong> – Message with a <a href="https://www.imarc.com/">link</a>.</p>
<a href="#" class="button -outline -primary">Click Me</a>
</div>
</div>
<div class="messaging -filled -success">
<svg class="messaging__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="9" />
<path d="M9 12l2 2l4 -4" />
</svg>
<div class="messaging__content">
<p><strong>Success</strong> – Message with a <a href="https://www.imarc.com/">link</a>.</p>
<a href="#" class="button -outline -primary">Click Me</a>
</div>
</div>
<div class="messaging -filled -error">
<svg class="messaging__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z" />
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" />
</svg>
<div class="messaging__content">
<p><strong>Error</strong> – Message with a <a href="https://www.imarc.com/">link</a>.</p>
<ul>
<li>Error one</li>
</ul>
<a href="#" class="button -primary">Click Me</a>
</div>
</div>
<div class="messaging -filled -info">
<svg class="messaging__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="9" />
<line x1="12" y1="8" x2="12.01" y2="8" />
<polyline points="11 12 12 12 12 16 13 16" />
</svg>
<div class="messaging__content">
<p><strong>Info</strong> – Message with a <a href="https://www.imarc.com/">link</a>.</p>
<a href="#" class="button -secondary">Click Me</a>
</div>
</div>
<div class="messaging -filled -warning">
<svg class="messaging__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 9v2m0 4v.01" />
<path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" />
</svg>
<div class="messaging__content">
<p><strong>Warning</strong> – Message with a <a href="https://www.imarc.com/">link</a>.</p>
<a href="#" class="button -confirm">Click Me</a>
</div>
@use "/resources/styles/config";
@use "/resources/styles/common" as *;
///
/// For messages to the user.
///
.messaging {
$b: &;
--messaging-color: var(--color, #{config.$plain-text});
--messaging-color-contrast: var(--color-contrast, #{blackwhite(config.$plain-text)});
--messaging-height-icon: var(--height-icon, 1.5rem);
background-color: config.$gray-100;
box-shadow: .25rem 0 0 var(--messaging-color) inset, config.$med-shadow;
display: grid;
gap: config.$h-space;
grid: "icon content" #{config.$line-height * 1em} "_ content" / auto 1fr;
margin-bottom: 2rem;
padding: config.$padding;
&__icon {
align-self: center;
grid-area: icon;
height: var(--messaging-height-icon);
color: var(--messaging-color);
}
&__content {
grid-area: content;
}
&.-filled {
box-shadow: config.$med-shadow;
background-color: var(--messaging-color);
color: var(--messaging-color-contrast);
#{$b}__icon {
color: inherit;
}
a:not([class]) {
color: var(--messaging-color-contrast);
text-decoration: underline;
}
}
&.-success {
--messaging-color: var(--color, #{config.$success});
--messaging-color-contrast: var(--color-contrast, #{blackwhite(config.$success)});
}
&.-warning {
--messaging-color: var(--color, #{config.$warning});
--messaging-color-contrast: var(--color-contrast, #{blackwhite(config.$warning)});
}
&.-info {
--messaging-color: var(--color, #{config.$info});
--messaging-color-contrast: var(--color-contrast, #{blackwhite(config.$info)});
}
&.-error {
--messaging-color: var(--color, #{config.$error});
--messaging-color-contrast: var(--color-contrast, #{blackwhite(config.$error)});
}
}