@use 'sprucecss/scss/spruce' as *;

.callout {
  --callout-color: #{color('info', 'alert')};
  background-color: color-mix(in srgb, var(--callout-color) 8%, transparent);
  border: config('border-width-base', $display) solid color-mix(in srgb, var(--callout-color) 30%, transparent);
  border-inline-start-width: 4px;
  border-radius: radius('md');
  display: flex;
  gap: spacer('s');
  padding: spacer('s') spacer('m');

  & + & {
    margin-block-start: spacer('s');
  }

  &--tip {
    --callout-color: #{color('success', 'alert')};
  }

  &--warning {
    --callout-color: #{color('warning', 'alert')};
  }

  &--danger {
    --callout-color: #{color('danger', 'alert')};
  }

  &__icon {
    block-size: 1.25rem;
    color: var(--callout-color);
    flex-shrink: 0;
    inline-size: 1.25rem;
    margin-block-start: 0.2em;
  }

  &__content {
    @include layout-stack('xxs');
  }

  &__title {
    color: color('heading');
    font-weight: 700;
  }
}

<aside class="callout callout--info" aria-label="Note">
    <svg class="callout__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
    <div class="callout__content">
        <p class="callout__title">Note</p>
        <p>Styles require the CSS custom property mode. Turn it on with <code>'css-custom-properties': true</code>.</p>
    </div>
</aside>
<aside class="callout callout--tip" aria-label="Tip">
    <svg class="callout__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z"/></svg>
    <div class="callout__content">
        <p class="callout__title">Tip</p>
        <p>Press <kbd>Ctrl</kbd> + <kbd>K</kbd> to open the command palette from anywhere.</p>
    </div>
</aside>
<aside class="callout callout--warning" aria-label="Warning">
    <svg class="callout__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m21.7 18-8-14a2 2 0 0 0-3.4 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3z"/><path d="M12 9v4M12 17h.01"/></svg>
    <div class="callout__content">
        <p class="callout__title">Warning</p>
        <p>The <code>@import</code> rule is deprecated in Sass. Use <code>@use</code> and <code>@forward</code>.</p>
    </div>
</aside>
<aside class="callout callout--danger" aria-label="Breaking change">
    <svg class="callout__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6M9 9l6 6"/></svg>
    <div class="callout__content">
        <p class="callout__title">Breaking change</p>
        <p>This option was removed in version 3. <a href="#">Read the upgrade guide</a>.</p>
    </div>
</aside>

Callout

Technical Details

It is an aside with an aria-label, so it is a labelled complementary region and the type isn't conveyed by color alone (the title and the icon say it too).
One custom property (--callout-color) colors the border, the icon and the tinted background (color-mix()); add a type with one line.
The thicker edge uses border-inline-start-width, so it moves to the right in RTL.
Callouts are static content; for dismissible system messages, use the Alert or the Banner.