Pinecone

Notification: Default 

<div class="spacer"></div>
<div class="notification" role="alert">
    <button id="button" type="button" class="button button--borderless"><svg class="icon icon--close" aria-hidden="true" viewBox="0 0 20 20" focusable="false">
            <use href="/images/close.svg#close" />
        </svg>
        <span class="button__label screen-reader-text">Close notification</span></button>
    <p class="notification__title"><svg class="icon icon--info" aria-hidden="true" viewBox="0 0 20 20" focusable="false">
            <use href="/images/info.svg#info" />
        </svg>
        Notification</p>
    <div class="notification__content">Sunt omnis aut officia nam dolore veniam porro voluptatem. Laborum iste in et assumenda. Consectetur minima sit quasi et sapiente iusto.</div>
</div>
 
{% if not standAlone %}<div class="spacer"></div>{% endif %}
<div class="notification{% if modifier %} notification--{{ modifier }}{% endif %}" role="alert">
	{% render '@button--borderless', {
		label: 'Close notification',
		labelVisuallyHidden: true,
		icon: 'close',
		standAlone: true
	}, true %}
	<p class="notification__title">{% if icon %}{% render '@svg', {svg: icon}, true %}{% endif %}{{ title }}</p>
	<div class="notification__content">{{ content | safe }}</div>
</div>
 
{
  "icon": "info",
  "title": "Notification",
  "content": "Sunt omnis aut officia nam dolore veniam porro voluptatem. Laborum iste in et assumenda. Consectetur minima sit quasi et sapiente iusto.",
  "standAlone": false,
  "bodyClass": "has-off-white-background-color"
}

There are no notes for this item.