<div class="notice" data-notice-type="error">
<div class="notice__icon">
<svg class="icon icon--triangle-exclamation" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#triangle-exclamation"></use>
</svg>
</div>
<span class="notice__text">Lorem ipsum dolor sit amet, consetetur <a class="link" data-link-type="external" href="https://example.com" rel="noopener noreferrer" target="_blank"><span class="link__icon"><svg class="icon icon--arrow-up-right-from-square" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-up-right-from-square"></use>
</svg></span><span class="link__text u-underline">sadipscing elitr, sed diam nonumy</span></a> eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span>
</div>
{% set icons = {
info: 'circle-info',
error: 'triangle-exclamation',
files: 'file-check',
} -%}
<div {{ html_attributes({
id: id ?? false,
class: 'notice',
'data-notice-type': type,
}, attrs ?? {}) }}>
{% if type in icons|keys %}
<div class="notice__icon">
{% include '@icon' with {
icon: icons[type],
} only %}
</div>
{% endif %}
<span class="notice__text">
{{- text | componentize(inline_only=true) -}}
</span>
</div>
{
"text": "Lorem ipsum dolor sit amet, consetetur <a href=\"https://example.com\">sadipscing elitr, sed diam nonumy</a> eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
"type": "error"
}
.notice {
align-items: flex-start;
color: var(--notice-color, inherit);
display: flex;
font-size: var(--notice-font-size, var(--font-size-small));
gap: var(--notice-gap, 0.75em);
line-height: var(--notice-line-height, var(--line-height-regular));
}
.notice__icon {
--icon-size: var(--notice-icon-size, 1.2em);
color: var(--notice-icon-color, inherit);
display: flex;
flex-shrink: 0;
padding-block-start: calc((1lh - var(--icon-size)) / 2);
}
.notice__text {
--link-color-default: currentColor;
--link-color--engaged-default: currentColor;
--link-underline-color-default: currentColor;
--link-underline-color--engaged: transparent;
--link-underline-thickness: 1px;
--link-underline-offset: 0.2em;
}
No notes defined.