@e-fellows/website-2022

Nachricht: Info 

<div class="notice notice--info">
    <svg class="icon icon--info-alt notice__icon" viewBox="0 0 200 200" aria-hidden="true">
        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#info-alt"></use>
    </svg>
    <span class="notice__text">Lorem ipsum dolor sit amet, consetetur <a class="link link--internal" href="#"><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: 'info-alt',
  error: 'caution',
  instructions: 'info-alt',
} -%}

<div {{ html_attributes({
  id: id ?? false,
  class: ['notice', "notice--#{type}"],
}, attrs ?? {}) }}>
  {% if type in icons|keys %}
    {% include '@icon' with {
      icon: icons[type],
      class: 'notice__icon',
    } only %}
  {% endif %}

  <span class="notice__text">
    {{- text | componentize -}}
  </span>
</div>
 
{
  "text": "Lorem ipsum dolor sit amet, consetetur <a href=\"#\">sadipscing elitr, sed diam nonumy</a> eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
  "type": "info"
}
  • Content: 
    :root {
  --notice-color: var(--color-midnight);
  --notice-font-size: 1.2rem;
  --notice-icon-color: var(--color-midnight);
  --notice-icon-size: 2.2rem;
  --notice-line-height: 2rem;
  --notice-gap: 1.2rem;
}

.notice {
  color: var(--notice-color);
  display: flex;
  gap: var(--notice-gap);
}

.notice__icon {
  color: var(--notice-icon-color);
  flex-shrink: 0;
  font-size: var(--notice-icon-size);
  line-height: 0;
}

.notice__text {
  --link-color: var(--notice-color);
  --link-font-weight: var(--font-weight-semibold);

  font-size: var(--notice-font-size);
  line-height: var(--notice-line-height);
  margin-block-start: calc((var(--notice-icon-size) - var(--notice-line-height)) / 2);
}
  • URL: /components/raw/notice/notice.scss
  • Filesystem Path: src/components/1-atoms/notice/notice.scss
  • Size: 700 Bytes

No notes defined.