<div class="message message--info">
    <p class="message--title">Note:</p>
    <p>The message goes here</p>
    <p>It can have multiple paragraphs</p>
</div>
<div class="message message--{{ name }}">
  <p class="message--title">{{ title }}</p>
  <p>The message goes here</p>
  <p>It can have multiple paragraphs</p>
</div>
{
  "name": "info",
  "title": "Note:"
}
  • Content:
    .message {
      border: 1px solid #ddd;
      border-radius: 8px;
      width: 50vw;
      padding: 1.5em;
    
      &.message--info {
        background-color: rgba(173, 216, 230, .2);
      }
    
      &.message--warning {
        background-color: rgba(255, 255, 224, .5);
      }
    
      &.message--danger {
        background-color: rgba(255, 85, 0, .2);
      }
    }
    
    .message--title {
      font-size: 2em;
      font-weight: 700;
      margin: 0;
    }
  • URL: /components/raw/message/message.css
  • Filesystem Path: src/components/01-atoms/99-utils/message/message.css
  • Size: 383 Bytes
  • Handle: @message--info
  • Preview:
  • Filesystem Path: src/components/01-atoms/99-utils/message/message--info.hbs

Messsage boxes

Most of the time I want to display a message to the reader that is outside the regular flow of the page content.