🍷 Digital Wine Cellar – Pattern Library

Status message 

<!-- Default -->
<div class="status-message status-info">
    <h3 class="status-message-title">Info message</h3>
    <p>This is a generic informative message.</p>
    <svg class="icon info-icon" height="20" width="20" aria-hidden="true">
        <use xlink:href="../../sprite.svg#status-info" />
    </svg>
</div>


<!-- Status Error -->
<div class="status-message status-error">
    <h3 class="status-message-title">Error message</h3>
    <p>This is an error message. Something have most likely gone wrong, or you done goofed!
    </p>
    <svg class="icon info-icon" height="20" width="20" aria-hidden="true">
        <use xlink:href="../../sprite.svg#status-error" />
    </svg>
</div>


<!-- Status Warning -->
<div class="status-message status-warning">
    <h3 class="status-message-title">Warning message</h3>
    <p>This is a warning message. Something is probably not right, but at least no one has died.
    </p>
    <svg class="icon info-icon" height="20" width="20" aria-hidden="true">
        <use xlink:href="../../sprite.svg#status-warning" />
    </svg>
</div>


<!-- Status Success -->
<div class="status-message status-success">
    <h3 class="status-message-title">Success message</h3>
    <p>This is a success message. Whatever you did, it worked great!
    </p>
    <svg class="icon info-icon" height="20" width="20" aria-hidden="true">
        <use xlink:href="../../sprite.svg#status-success" />
    </svg>
</div>


<div class="status-message status-{{type}}">
  <h3 class="status-message-title">{{title}}</h3>
  {{#> @partial-block}}
    <p>{{message}}</p>
  {{/ @partial-block}}
  {{> @svg modifier="info-icon"}}
  {{#if closable}}
    {{> @button modifier="close-button" icon="close"}}
  {{/if}}
</div>
 
/* Default */
{
  "type": "info",
  "title": "Info message",
  "icon": "status-info",
  "message": "This is a generic informative message."
}


/* Status Error */
{
  "type": "error",
  "title": "Error message",
  "icon": "status-error",
  "message": "This is an error message. Something have most likely gone wrong, or you done goofed!\n"
}


/* Status Warning */
{
  "type": "warning",
  "title": "Warning message",
  "icon": "status-warning",
  "message": "This is a warning message. Something is probably not right, but at least no one has died.\n"
}


/* Status Success */
{
  "type": "success",
  "title": "Success message",
  "icon": "status-success",
  "message": "This is a success message. Whatever you did, it worked great!\n"
}
  • Content: 
    /**
 * Status messages
 */

@media screen {

  .status-message {
    margin: 1rem 0;
    padding: 1rem 1rem 1rem 2.5rem;
    border-radius: 3px;
    position: relative;
    box-shadow: var(--status-message-shadow);
  }

  .status-message a {
    color: currentColor;
  }

  .status-message-title {
    margin: 0 0 1em;
    font-size: 1em;
    font-weight: 600;
    display: flex;
    align-items: center;
  }

  .status-message .icon.info-icon {
    position: absolute;
    top: 0.8rem;
    left: 0.7rem;
    height: 1.6em;
    width: 1.6em;
  }

  .status-message button.close-button {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    border: 0;
    background-color: transparent;
    color: currentColor;
    box-shadow: none;
  }

  .status-message .close-button .icon {
    fill: currentColor;
  }

  /* Info */
  .status-info {
    color: var(--status-info);
    background-color: var(--status-info-bg);
  }

  /* Error */
  .status-error {
    color: var(--status-error);
    background-color: var(--status-error-bg);
  }

  /* Warning */
  .status-warning {
    color: var(--status-warning);
    background-color: var(--status-warning-bg);
  }

  /* Success */
  .status-success {
    color: var(--status-success);
    background-color: var(--status-success-bg);
  }
}
  • URL: /components/raw/status-message/status-message.css
  • Filesystem Path: components/02_molecules/status-message/status-message.css
  • Size: 1.3 KB

Status message

A block-level component with the ability to display color-coded messages to the user. Also supports displaying a close button to discard the message.