<div class="alert alert--warning">
<div class="alert__inner">
<div class="alert__icon">
<svg class="icon icon--circle-exclamation" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#circle-exclamation"></use>
</svg>
</div>
<div class="alert__text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>
</div>
{% set icons = {
info: 'circle-info',
error: 'circle-xmark',
success: 'circle-check',
warning: 'circle-exclamation',
hint: 'circle-arrow-right',
question: 'circle-question',
} -%}
{% set type = type ??? 'success' %}
{% set icon = icon ?? icons[type] %}
<div {{ html_attributes({
id: id ?? false,
class: html_cva(
base: 'alert',
variants: {
type: {
info: 'alert--info',
error: 'alert--error',
success: 'alert--success',
warning: 'alert--warning',
hint: 'alert--hint',
question: 'alert--question',
},
},
).apply({ type }),
role: role ?? false,
}, attrs ?? {}) }}>
<div class="alert__inner">
<div class="alert__icon">
{% include '@icon' with {
icon: icon,
} only %}
</div>
<div class="alert__text">
{{- text | componentize(inline_only=true) -}}
</div>
</div>
</div>
{
"text": "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>\n",
"type": "warning"
}
.alert {
container-name: alert;
container-type: inline-size;
}
.alert--info {
--alert-background-color: var(--color-steel-050);
--alert-color: var(--color-steel-900);
--alert-icon-color: var(--color-steel-900);
}
.alert--success {
--alert-background-color: var(--color-green-050);
--alert-color: var(--color-green-900);
--alert-icon-color: var(--color-green-900);
}
.alert--warning {
--alert-background-color: var(--color-yellow-100);
--alert-color: var(--color-yellow-900);
--alert-icon-color: var(--color-yellow-900);
}
.alert--error {
--alert-background-color: var(--color-red-050);
--alert-color: var(--color-red-900);
--alert-icon-color: var(--color-red-900);
}
.alert__inner {
--icon-size: 3.2rem;
align-items: flex-start;
background-color: var(--alert-background-color, var(--color-gray-100));
border-color: var(--alert-border-color, transparent);
border-radius: var(--border-radius-large);
border-style: var(--alert-border-style, solid);
border-width: var(--alert-border-width, 0);
color: var(--alert-color, var(--text-color));
column-gap: 1.6rem;
display: flex;
font-size: var(--alert-font-size, var(--font-size-default));
justify-content: flex-start;
line-height: var(--alert-line-height, var(--line-height-wide));
padding-block: 2.4rem;
padding-inline: 2.4rem;
text-align: start;
@container alert (inline-size >= 40rem) {
--icon-size: 4rem;
border-radius: var(--border-radius-x-large);
column-gap: 2.4rem;
padding-block: 3.2rem;
padding-inline: 3.2rem;
}
}
.alert__icon {
color: var(--alert-icon-color, inherit);
display: flex;
flex-shrink: 0;
margin-block-start: calc((1lh - var(--icon-size)) / 2);
@container alert (inline-size >= 40rem) {
margin-block-start: 0;
}
}
.alert__text {
align-self: center;
color: var(--alert-text-color, inherit);
flex-grow: 1;
}
No notes defined.