<ul class="message__list">
    <li class="message__list-item"><span class="error">Please enter a valid email address.</span>
    </li>
    <li class="message__list-item"><span class="success">Shipping address updated successfully.</span>
    </li>
</ul>
<ul class="message__list">
  {{#each items}}
  <li class="message__list-item">{{render (dynamicComponent component) this}}</li>
  {{/each}}
</ul>
{
  "items": [
    {
      "value": "Please enter a valid email address.",
      "component": "error"
    },
    {
      "value": "Shipping address updated successfully.",
      "component": "success"
    }
  ]
}
  • Content:
    .message__list {
      margin: $gutter-width 0;
      padding-left: 15px;
    }
    
    .message__list-item {
      .error,
      .success {
        margin: 0;
      }
    }
    
    .l-global-messages {
      padding-right: 10px;
      padding-left: 10px;
    
      .error,
      .message {
        @include breakpoint($breakpoint-lg) {
          margin: 25px 0;
        }
    
        @include breakpoint($page-width-max) {
          margin: 25px 0 10px;
        }
      }
    }
    
  • URL: /components/raw/messages/messages.scss
  • Filesystem Path: src/components/01-elements/messages/messages.scss
  • Size: 379 Bytes

There are no notes for this item.