<h2 class="styleguide-title">Messages</h2>
<div class="preview-inner-container">
    <h3 class="styleguide">Success message</h3>
    <p>
        <div class="messages messages--status">
            <p>Aliquam ullamcorper vehicula leo. Mauris mattis egestas hendrerit. Sed vitae aliquet mauris. Morbi at erat sed mi mollis maximus at sit amet enim. Sed quis libero eu mauris eleifend accumsan vitae semper turpis. Vestibulum nisl ipsum, ullamcorper
                euismod ultrices nec, tempor sit amet urna. Pellentesque bibendum a mi commodo consectetur. Aliquam nec est tellus.</p>
        </div>
    </p>

    <h3 class="styleguide">Error message</h3>
    <p>
        <div class="messages messages--error">
            <p>Aliquam ullamcorper vehicula leo. Mauris mattis egestas hendrerit. Sed vitae aliquet mauris. Morbi at erat sed mi mollis maximus at sit amet enim. Sed quis libero eu mauris eleifend accumsan vitae semper turpis. Vestibulum nisl ipsum, ullamcorper
                euismod ultrices nec, tempor sit amet urna. Pellentesque bibendum a mi commodo consectetur. Aliquam nec est tellus.</p>
        </div>
    </p>

    <h3 class="styleguide">Warning message</h3>
    <p>
        <div class="messages messages--warning">
            <p>Aliquam ullamcorper vehicula leo. Mauris mattis egestas hendrerit. Sed vitae aliquet mauris. Morbi at erat sed mi mollis maximus at sit amet enim. Sed quis libero eu mauris eleifend accumsan vitae semper turpis. Vestibulum nisl ipsum, ullamcorper
                euismod ultrices nec, tempor sit amet urna. Pellentesque bibendum a mi commodo consectetur. Aliquam nec est tellus.</p>
        </div>
    </p>
</div>
<h2 class="styleguide-title">Messages</h2>
<div class="preview-inner-container">
  <h3 class="styleguide">Success message</h3>
  <p>{% include '@status-message' with { 'modifier': 'messages--status', 'text': 'Aliquam ullamcorper vehicula leo. Mauris mattis egestas hendrerit. Sed vitae aliquet mauris. Morbi at erat sed mi mollis maximus at sit amet enim. Sed quis libero eu mauris eleifend accumsan vitae semper turpis. Vestibulum nisl ipsum, ullamcorper euismod ultrices nec, tempor sit amet urna. Pellentesque bibendum a mi commodo consectetur. Aliquam nec est tellus.' } %}</p>

  <h3 class="styleguide">Error message</h3>
  <p>{% include '@status-message' with { 'modifier': 'messages--error', 'text': 'Aliquam ullamcorper vehicula leo. Mauris mattis egestas hendrerit. Sed vitae aliquet mauris. Morbi at erat sed mi mollis maximus at sit amet enim. Sed quis libero eu mauris eleifend accumsan vitae semper turpis. Vestibulum nisl ipsum, ullamcorper euismod ultrices nec, tempor sit amet urna. Pellentesque bibendum a mi commodo consectetur. Aliquam nec est tellus.' } %}</p>

  <h3 class="styleguide">Warning message</h3>
  <p>{% include '@status-message' with { 'modifier': 'messages--warning', 'text': 'Aliquam ullamcorper vehicula leo. Mauris mattis egestas hendrerit. Sed vitae aliquet mauris. Morbi at erat sed mi mollis maximus at sit amet enim. Sed quis libero eu mauris eleifend accumsan vitae semper turpis. Vestibulum nisl ipsum, ullamcorper euismod ultrices nec, tempor sit amet urna. Pellentesque bibendum a mi commodo consectetur. Aliquam nec est tellus.' } %}</p>
</div>
/* No context defined for this component. */

There are no notes for this item.