@e-fellows/website-2022

Hinweis 

<div class="alert alert--info" role="alert">
    <svg class="icon icon--info-alt alert__icon" viewBox="0 0 200 200" aria-hidden="true">
        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#info-alt"></use>
    </svg>
    <p class="alert__text">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>
 
{% set icons = {
  success: 'success',
  info: 'info-alt',
  error: 'error',
  warning: 'caution',
} -%}

<div {{ html_attributes({
  id: id ?? false,
  class: ['alert', "alert--#{type}"],
  role: 'alert',
}, attrs ?? {}) }}>
  {% if icon|default or icons[type] %}
    {% include '@icon' with {
      icon: icon ?? icons[type],
      class: 'alert__icon',
    } only %}
  {% endif %}

  <p class="alert__text">
    {{- text | componentize -}}
  </p>
</div>
 
/* No context defined. */
  • Content: 
    :root {
  --alert-border-width: 2px;
  --alert-color: var(--color-midnight);
  --alert-font-size: 1.6rem;
  --alert-gap: 2rem;
  --alert-icon-size: 4rem;
  --alert-line-height: var(--line-height-body);
  --alert-padding-block: 2rem;
  --alert-padding-inline: 2rem;
  --alert-icon-color: var(--color-midnight);
  --alert-border-color: var(--color-grey-dark);
  --alert-background-color: transparent;
}

.alert {
  background-color: var(--alert-background-color);
  border: var(--alert-border-width) solid var(--alert-border-color);
  display: flex;
  gap: var(--alert-gap);
  padding-block: var(--alert-padding-block);
  padding-inline: var(--alert-padding-inline);
}

.alert--info {
  --alert-border-color: var(--color-blue-light);
  --alert-icon-color: var(--color-blue);
}

.alert--success {
  --alert-border-color: var(--color-green-light);
  --alert-icon-color: var(--color-green);
}

.alert--warning {
  --alert-border-color: var(--color-orange-light);
  --alert-icon-color: var(--color-orange);
}

.alert--error {
  --alert-border-color: var(--color-red-light);
  --alert-icon-color: var(--color-red);
}

.alert__icon {
  color: var(--alert-icon-color);
  flex-shrink: 0;
  font-size: var(--alert-icon-size);
}

.alert__text {
  align-self: center;
  color: var(--alert-color);
  font-size: var(--alert-font-size);
  line-height: var(--alert-line-height);
}
  • URL: /components/raw/alert/alert.scss
  • Filesystem Path: src/components/1-atoms/alert/alert.scss
  • Size: 1.4 KB

No notes defined.