HiVolda Styleguide

Messages 

<!-- Default -->
<div class="webform-message webform-message--close">
    <div role="contentinfo" aria-label="" class="messages messages--info">
        <div class="messages--item">
            <a href="#close" aria-label="close" class="js-webform-message__link webform-message__link">×</a>
            <p>This is a <strong>info</strong> message</p>

        </div>
    </div>
</div>


<!-- Status -->
<div class="webform-message webform-message--close">
    <div role="contentinfo" aria-label="" class="messages messages--status">
        <div class="messages--item">
            <a href="#close" aria-label="close" class="js-webform-message__link webform-message__link">×</a>
            <p>This is a <strong>status</strong> message</p>

        </div>
    </div>
</div>


<!-- Warning -->
<div class="webform-message webform-message--close">
    <div role="contentinfo" aria-label="" class="messages messages--warning">
        <div class="messages--item">
            <a href="#close" aria-label="close" class="js-webform-message__link webform-message__link">×</a>
            <p>This is a <strong>warning</strong> message</p>

        </div>
    </div>
</div>


<!-- Error -->
<div class="webform-message webform-message--close">
    <div role="contentinfo" aria-label="" class="messages messages--error">
        <div class="messages--item">
            <a href="#close" aria-label="close" class="js-webform-message__link webform-message__link">×</a>
            <p>This is a <strong>error</strong> message</p>

        </div>
    </div>
</div>


<div class="webform-message webform-message--close">
  <div role="contentinfo" aria-label="" class="{{ class }}">
    <div class="messages--item">
      <a href="#close" aria-label="close" class="js-webform-message__link webform-message__link">×</a>{{ text | markdown }}
    </div>
  </div>
</div>
 
/* Default */
{
  "class": "messages messages--info",
  "text": "This is a **info** message"
}


/* Status */
{
  "class": "messages messages--status",
  "text": "This is a **status** message"
}


/* Warning */
{
  "class": "messages messages--warning",
  "text": "This is a **warning** message"
}


/* Error */
{
  "class": "messages messages--error",
  "text": "This is a **error** message"
}

No notes defined.