rivendellweb pattern library

Message: Normal 

<div class="message message--normal">
    <p class="message--title"><span>Message:</span> The message goes here</p>
    <p>The message goes here</p>
    <p>It can have multiple paragraphs</p>
</div>
 
<div class="message message--{{ name }}">
  <p class="message--title"><span>{{ admonition }}</span> The message goes here</p>
  <p>The message goes here</p>
  <p>It can have multiple paragraphs</p>
</div>
 
{
  "name": "normal",
  "admonition": "Message:"
}
  • 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-weight: 700;
  margin: 0;
}
  • URL: /components/raw/message/message.css
  • Filesystem Path: src/components/01-atoms/40-message/message.css
  • Size: 365 Bytes

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.