@zplane-web/craft-licensing

Notice 

<div class="notice" data-notice-type="info">
    <div class="notice__icon">
        <svg class="icon icon--circle-info" viewBox="0 0 200 200" aria-hidden="true">
            <use xlink:href="/assets/icons/icons.dcaca1c147.svg#circle-info"></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>&#65279;</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."
}
  • Content: 
    .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;
}
  • URL: /components/raw/notice/notice.scss
  • Filesystem Path: src/components/2-atoms/notice/notice.scss
  • Size: 735 Bytes

No notes defined.