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.

Sass Mixin

@mixin messaging()

Parameters

None.

Emmet Shorthand

.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>

  • Content:
    @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)});
        }
    }
    
  • URL: /components/raw/messaging/_index.scss
  • Filesystem Path: resources/styles/molecules/messaging/_index.scss
  • Size: 1.9 KB