Notice

The Notice component provides a reusable pattern for notice in the interface.

Type

The type parameter is meant to be seen as sort of severity indicator. It's value either success, info, warning or danger.

Tellus Sem Lorem Malesuada Ipsum

Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. A link to something.

Sed posuere consectetur est at lobortis.

Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis.

<div class="c-notice c-notice--success" id="id_6ae466cad5d86" data-component="notice" aria-labelledby="notice__text__id_6ae466cad5d86">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cad5d86" data-js-notice-message="true" class="c-notice__message">Tellus Sem
  Lorem Malesuada Ipsum</span>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--info" id="id_6ae466cad5fde" data-component="notice" aria-labelledby="notice__text__id_6ae466cad5fde">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--report c-icon--material c-icon--material-report c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d=
  "M480 680Q497 680 508.5 668.5Q520 657 520.0 640.0Q520 623 508.5 611.5Q497 600 480 600Q463 600 451.5 611.5Q440 623 440.0 640.0Q440 657 451.5 668.5Q463 680 480 680ZM440 520H520V280H440ZM330 840 120 630V330L330 120H630L840 330V630L630 840ZM364 760H596L760 596V364L596 200H364L200 364V596ZM480 480Z">
  </path></svg></span></span> <span id="notice__text__id_6ae466cad5fde" data-js-notice-message="true" class="c-notice__message">Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam.
  Pellentesque ornare sem lacinia quam venenatis vestibulum. <a href="#">A link to something.</a></span>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--danger" id="id_6ae466cad60d9" data-component="notice" aria-labelledby="notice__text__id_6ae466cad60d9">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--forum c-icon--material c-icon--material-forum c-icon--svg-material c-icon--color-black c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d=
  "M880 880 720 720H320Q287 720 263.5 696.5Q240 673 240 640V600H680Q713 600 736.5 576.5Q760 553 760 520V240H800Q833 240 856.5 263.5Q880 287 880 320ZM160 487 207 440H600Q600 440 600.0 440.0Q600 440 600 440V160Q600 160 600.0 160.0Q600 160 600 160H160Q160 160 160.0 160.0Q160 160 160 160ZM80 680V160Q80 127 103.5 103.5Q127 80 160 80H600Q633 80 656.5 103.5Q680 127 680 160V440Q680 473 656.5 496.5Q633 520 600 520H240ZM160 440V160Q160 160 160.0 160.0Q160 160 160 160Q160 160 160.0 160.0Q160 160 160 160V440Q160 440 160.0 440.0Q160 440 160 440Z">
  </path></svg></span></span> <span id="notice__text__id_6ae466cad60d9" data-js-notice-message="true" class="c-notice__message">Sed posuere consectetur est at lobortis.</span>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--warning" id="id_6ae466cad61cf" data-component="notice" aria-labelledby="notice__text__id_6ae466cad61cf">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--accessibility c-icon--material c-icon--material-accessibility c-icon--svg-material c-icon--color-black c-icon--size-md" role="img" data-nosnippet="" translate="no"
  aria-label="Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d=
  "M480.0 240.0Q447 240 423.5 216.5Q400 193 400.0 160.0Q400 127 423.5 103.5Q447 80 480.0 80.0Q513 80 536.5 103.5Q560 127 560.0 160.0Q560 193 536.5 216.5Q513 240 480.0 240.0ZM360 880V360H120V280H840V360H600V880H520V640H440V880Z">
  </path></svg></span></span> <span id="notice__text__id_6ae466cad61cf" data-js-notice-message="true" class="c-notice__message">Curabitur blandit tempus porttitor. Sed posuere consectetur est at
  lobortis.</span>
</div>

@notice([
    'type' => 'success',
    'message' => [
        'text' => 'Tellus Sem Lorem Malesuada Ipsum',
    ],
    'icon' => [
        'name' => 'check',
        'size' => 'md',
        'color' => 'white'
    ]
])
@endnotice

@notice([
    'type' => 'info',
    'message' => [
        'text' => 'Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. <a href="#">A link to something.</a>',
    ],
    'icon' => [
        'name' => 'report',
        'size' => 'md',
        'color' => 'white'
    ]
])
@endnotice

@notice([
    'type' => 'danger',
    'message' => [
        'text' => 'Sed posuere consectetur est at lobortis.',
    ],
    'icon' => [
        'name' => 'forum',
        'size' => 'md',
        'color' => 'black'
    ]
])
@endnotice

@notice([
    'type' => 'warning',
    'message' => [
        'text' => 'Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis.',
    ],
    'icon' => [
        'name' => 'accessibility',
        'size' => 'md',
        'color' => 'black'
    ]
])
@endnotice

Icon

The icon parameter is an array that can configured just as the icon component. It could also be left out completely.

Icon color red.

Icon size small

Without an icon.

<div class="c-notice c-notice--success" id="id_6ae466cad6306" data-component="notice" aria-labelledby="notice__text__id_6ae466cad6306">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-primary c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cad6306" data-js-notice-message="true" class="c-notice__message">Icon color
  red.</span>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--success" id="id_6ae466cad63e9" data-component="notice" aria-labelledby="notice__text__id_6ae466cad63e9">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--apps c-icon--material c-icon--material-apps c-icon--svg-material c-icon--color-white c-icon--size-sm" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d=
  "M240.0 800.0Q207 800 183.5 776.5Q160 753 160.0 720.0Q160 687 183.5 663.5Q207 640 240.0 640.0Q273 640 296.5 663.5Q320 687 320.0 720.0Q320 753 296.5 776.5Q273 800 240.0 800.0ZM480.0 800.0Q447 800 423.5 776.5Q400 753 400.0 720.0Q400 687 423.5 663.5Q447 640 480.0 640.0Q513 640 536.5 663.5Q560 687 560.0 720.0Q560 753 536.5 776.5Q513 800 480.0 800.0ZM720.0 800.0Q687 800 663.5 776.5Q640 753 640.0 720.0Q640 687 663.5 663.5Q687 640 720.0 640.0Q753 640 776.5 663.5Q800 687 800.0 720.0Q800 753 776.5 776.5Q753 800 720.0 800.0ZM240.0 560.0Q207 560 183.5 536.5Q160 513 160.0 480.0Q160 447 183.5 423.5Q207 400 240.0 400.0Q273 400 296.5 423.5Q320 447 320.0 480.0Q320 513 296.5 536.5Q273 560 240.0 560.0ZM480.0 560.0Q447 560 423.5 536.5Q400 513 400.0 480.0Q400 447 423.5 423.5Q447 400 480.0 400.0Q513 400 536.5 423.5Q560 447 560.0 480.0Q560 513 536.5 536.5Q513 560 480.0 560.0ZM720.0 560.0Q687 560 663.5 536.5Q640 513 640.0 480.0Q640 447 663.5 423.5Q687 400 720.0 400.0Q753 400 776.5 423.5Q800 447 800.0 480.0Q800 513 776.5 536.5Q753 560 720.0 560.0ZM240.0 320.0Q207 320 183.5 296.5Q160 273 160.0 240.0Q160 207 183.5 183.5Q207 160 240.0 160.0Q273 160 296.5 183.5Q320 207 320.0 240.0Q320 273 296.5 296.5Q273 320 240.0 320.0ZM480.0 320.0Q447 320 423.5 296.5Q400 273 400.0 240.0Q400 207 423.5 183.5Q447 160 480.0 160.0Q513 160 536.5 183.5Q560 207 560.0 240.0Q560 273 536.5 296.5Q513 320 480.0 320.0ZM720.0 320.0Q687 320 663.5 296.5Q640 273 640.0 240.0Q640 207 663.5 183.5Q687 160 720.0 160.0Q753 160 776.5 183.5Q800 207 800.0 240.0Q800 273 776.5 296.5Q753 320 720.0 320.0Z">
  </path></svg></span></span> <span id="notice__text__id_6ae466cad63e9" data-js-notice-message="true" class="c-notice__message">Icon size small</span>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--success" id="id_6ae466cad64f6" data-component="notice" aria-labelledby="notice__text__id_6ae466cad64f6">
  <span id="notice__text__id_6ae466cad64f6" data-js-notice-message="true" class="c-notice__message">Without an icon.</span>
</div>

@notice([
    'type' => 'success',
    'message' => [
        'text' => 'Icon color red.',
    ],
    'icon' => [
        'name' => 'check',
        'size' => 'md',
        'color' => 'primary'
    ]
])
@endnotice

@notice([
    'type' => 'success',
    'message' => [
        'text' => 'Icon size small',
    ],
    'icon' => [
        'name' => 'apps',
        'size' => 'md',
        'color' => 'white',
        'size' => 'sm'
    ]
])
@endnotice

@notice([
    'type' => 'success',
    'message' => [
        'text' => 'Without an icon.',
    ]
])
@endnotice

Title

The title to show above the message

Lorem ipsum

Tellus Sem Lorem Malesuada Ipsum

<div class="c-notice c-notice--success" id="id_6ae466cad659c" data-component="notice" aria-labelledby="notice__text__id_6ae466cad659c">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <!-- typography.blade.php   original: h2 -->
  <h2 class="c-typography c-notice__title c-typography__variant--h4" data-component="typography">
    Lorem ipsum
  </h2><span id="notice__text__id_6ae466cad659c" data-js-notice-message="true" class="c-notice__message">Tellus Sem Lorem Malesuada Ipsum</span>
</div>

@notice([
    'type' => 'success',
    'message' => [
        'title' => 'Lorem ipsum',
        'text' => 'Tellus Sem Lorem Malesuada Ipsum',
    ],
    'icon' => [
        'name' => 'check',
        'size' => 'md',
        'color' => 'white'
        ]
    ])
@endnotice

Actions & dismiss

These can have an action, and be dismissable.

This message has an action button and may be dismissed (Type: info, Timeout: immediate, Iteration: 1).

Go to home

This message may be dismissed (Type: info, Timeout: immediate, Iteration: 1).

This has a button to do a task but no dismiss action (Type: info, Timeout: immediate, Iteration: 1).

Undo

This message has an action button and may be dismissed (Type: success, Timeout: immediate, Iteration: 2).

Go to home

This message may be dismissed (Type: success, Timeout: immediate, Iteration: 2).

This has a button to do a task but no dismiss action (Type: success, Timeout: immediate, Iteration: 2).

Undo

This message has an action button and may be dismissed (Type: danger, Timeout: immediate, Iteration: 3).

Go to home

This message may be dismissed (Type: danger, Timeout: immediate, Iteration: 3).

This has a button to do a task but no dismiss action (Type: danger, Timeout: immediate, Iteration: 3).

Undo

This message has an action button and may be dismissed (Type: warning, Timeout: immediate, Iteration: 4).

Go to home

This message may be dismissed (Type: warning, Timeout: immediate, Iteration: 4).

This has a button to do a task but no dismiss action (Type: warning, Timeout: immediate, Iteration: 4).

Undo

This message has an action button and may be dismissed (Type: info, Timeout: session, Iteration: 1).

Go to home

This message may be dismissed (Type: info, Timeout: session, Iteration: 1).

This has a button to do a task but no dismiss action (Type: info, Timeout: session, Iteration: 1).

Undo

This message has an action button and may be dismissed (Type: success, Timeout: session, Iteration: 2).

Go to home

This message may be dismissed (Type: success, Timeout: session, Iteration: 2).

This has a button to do a task but no dismiss action (Type: success, Timeout: session, Iteration: 2).

Undo

This message has an action button and may be dismissed (Type: danger, Timeout: session, Iteration: 3).

Go to home

This message may be dismissed (Type: danger, Timeout: session, Iteration: 3).

This has a button to do a task but no dismiss action (Type: danger, Timeout: session, Iteration: 3).

Undo

This message has an action button and may be dismissed (Type: warning, Timeout: session, Iteration: 4).

Go to home

This message may be dismissed (Type: warning, Timeout: session, Iteration: 4).

This has a button to do a task but no dismiss action (Type: warning, Timeout: session, Iteration: 4).

Undo

This message has an action button and may be dismissed (Type: info, Timeout: permanent, Iteration: 1).

Go to home

This message may be dismissed (Type: info, Timeout: permanent, Iteration: 1).

This has a button to do a task but no dismiss action (Type: info, Timeout: permanent, Iteration: 1).

Undo

This message has an action button and may be dismissed (Type: success, Timeout: permanent, Iteration: 2).

Go to home

This message may be dismissed (Type: success, Timeout: permanent, Iteration: 2).

This has a button to do a task but no dismiss action (Type: success, Timeout: permanent, Iteration: 2).

Undo

This message has an action button and may be dismissed (Type: danger, Timeout: permanent, Iteration: 3).

Go to home

This message may be dismissed (Type: danger, Timeout: permanent, Iteration: 3).

This has a button to do a task but no dismiss action (Type: danger, Timeout: permanent, Iteration: 3).

Undo

This message has an action button and may be dismissed (Type: warning, Timeout: permanent, Iteration: 4).

Go to home

This message may be dismissed (Type: warning, Timeout: permanent, Iteration: 4).

This has a button to do a task but no dismiss action (Type: warning, Timeout: permanent, Iteration: 4).

Undo

<div class="c-notice c-notice--info" data-dismissable-notice="1" data-dismissable-notice-uid="4b562ceccaf2b9d8d252e28032220264" data-dismissable-notice-timeout="immediate" id="id_6ae466cad67ff"
data-component="notice" aria-labelledby="notice__text__id_6ae466cad67ff">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cad67ff" data-js-notice-message="true" class="c-notice__message">This
  message has an action button and may be dismissed (Type: info, Timeout: immediate, Iteration: 1).</span>
  <div class="c-notice__actions">
    <div class="c-notice__action">
      <a class="c-button c-notice__button c-button__basic c-button__basic--default c-button--sm" href="#" target="_top" aria-label="Go to home" data-component="button"><span class=
      "c-button__label"><span class="c-button__label-text">Go to home</span></span></a>
    </div>
    <div class="c-notice__dismiss">
      <button class="c-button c-notice__dismiss c-button__basic c-button__basic--default c-button--sm c-button--icon-only" data-dismissable-notice-trigger="1" aria-label="Close" type="button"
      data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-sm" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
      "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
      "fill:var(--icon-color, currentColor)">
      <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span></span></button>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--info" data-dismissable-notice="1" data-dismissable-notice-uid="b871428e99a0e19aa5e1802d5d9b0bed" data-dismissable-notice-timeout="immediate" id="id_6ae466cad6d5a"
data-component="notice" aria-labelledby="notice__text__id_6ae466cad6d5a">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cad6d5a" data-js-notice-message="true" class="c-notice__message">This
  message may be dismissed (Type: info, Timeout: immediate, Iteration: 1).</span>
  <div class="c-notice__actions">
    <div class="c-notice__dismiss">
      <button class="c-button c-notice__dismiss c-button__basic c-button__basic--default c-button--sm c-button--icon-only" data-dismissable-notice-trigger="1" aria-label="Close" type="button"
      data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-sm" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
      "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
      "fill:var(--icon-color, currentColor)">
      <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span></span></button>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--info" id="id_6ae466cad7078" data-component="notice" aria-labelledby="notice__text__id_6ae466cad7078">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cad7078" data-js-notice-message="true" class="c-notice__message">This has a
  button to do a task but no dismiss action (Type: info, Timeout: immediate, Iteration: 1).</span>
  <div class="c-notice__actions">
    <div class="c-notice__action">
      <a class="c-button c-notice__button c-button__basic c-button__basic--default c-button--sm" href="#" target="_top" aria-label="Undo" data-component="button"><span class=
      "c-button__label"><span class="c-button__label-text">Undo</span></span></a>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--success" data-dismissable-notice="1" data-dismissable-notice-uid="ba8603fe5dad7845fbee2462af10d026" data-dismissable-notice-timeout="immediate" id="id_6ae466cad72f7"
data-component="notice" aria-labelledby="notice__text__id_6ae466cad72f7">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cad72f7" data-js-notice-message="true" class="c-notice__message">This
  message has an action button and may be dismissed (Type: success, Timeout: immediate, Iteration: 2).</span>
  <div class="c-notice__actions">
    <div class="c-notice__action">
      <a class="c-button c-notice__button c-button__basic c-button__basic--default c-button--sm" href="#" target="_top" aria-label="Go to home" data-component="button"><span class=
      "c-button__label"><span class="c-button__label-text">Go to home</span></span></a>
    </div>
    <div class="c-notice__dismiss">
      <button class="c-button c-notice__dismiss c-button__basic c-button__basic--default c-button--sm c-button--icon-only" data-dismissable-notice-trigger="1" aria-label="Close" type="button"
      data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-sm" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
      "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
      "fill:var(--icon-color, currentColor)">
      <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span></span></button>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--success" data-dismissable-notice="1" data-dismissable-notice-uid="8545268fad0bb23a79e234762282b760" data-dismissable-notice-timeout="immediate" id="id_6ae466cad77a7"
data-component="notice" aria-labelledby="notice__text__id_6ae466cad77a7">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cad77a7" data-js-notice-message="true" class="c-notice__message">This
  message may be dismissed (Type: success, Timeout: immediate, Iteration: 2).</span>
  <div class="c-notice__actions">
    <div class="c-notice__dismiss">
      <button class="c-button c-notice__dismiss c-button__basic c-button__basic--default c-button--sm c-button--icon-only" data-dismissable-notice-trigger="1" aria-label="Close" type="button"
      data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-sm" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
      "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
      "fill:var(--icon-color, currentColor)">
      <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span></span></button>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--success" id="id_6ae466cad7aba" data-component="notice" aria-labelledby="notice__text__id_6ae466cad7aba">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cad7aba" data-js-notice-message="true" class="c-notice__message">This has a
  button to do a task but no dismiss action (Type: success, Timeout: immediate, Iteration: 2).</span>
  <div class="c-notice__actions">
    <div class="c-notice__action">
      <a class="c-button c-notice__button c-button__basic c-button__basic--default c-button--sm" href="#" target="_top" aria-label="Undo" data-component="button"><span class=
      "c-button__label"><span class="c-button__label-text">Undo</span></span></a>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--danger" data-dismissable-notice="1" data-dismissable-notice-uid="a25a1eb154a5ea6b990916f384164bf9" data-dismissable-notice-timeout="immediate" id="id_6ae466cad7d2a"
data-component="notice" aria-labelledby="notice__text__id_6ae466cad7d2a">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cad7d2a" data-js-notice-message="true" class="c-notice__message">This
  message has an action button and may be dismissed (Type: danger, Timeout: immediate, Iteration: 3).</span>
  <div class="c-notice__actions">
    <div class="c-notice__action">
      <a class="c-button c-notice__button c-button__basic c-button__basic--default c-button--sm" href="#" target="_top" aria-label="Go to home" data-component="button"><span class=
      "c-button__label"><span class="c-button__label-text">Go to home</span></span></a>
    </div>
    <div class="c-notice__dismiss">
      <button class="c-button c-notice__dismiss c-button__basic c-button__basic--default c-button--sm c-button--icon-only" data-dismissable-notice-trigger="1" aria-label="Close" type="button"
      data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-sm" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
      "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
      "fill:var(--icon-color, currentColor)">
      <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span></span></button>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--danger" data-dismissable-notice="1" data-dismissable-notice-uid="6ebdcf7bd3fb1e112b6ad6083986c472" data-dismissable-notice-timeout="immediate" id="id_6ae466cad81ba"
data-component="notice" aria-labelledby="notice__text__id_6ae466cad81ba">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cad81ba" data-js-notice-message="true" class="c-notice__message">This
  message may be dismissed (Type: danger, Timeout: immediate, Iteration: 3).</span>
  <div class="c-notice__actions">
    <div class="c-notice__dismiss">
      <button class="c-button c-notice__dismiss c-button__basic c-button__basic--default c-button--sm c-button--icon-only" data-dismissable-notice-trigger="1" aria-label="Close" type="button"
      data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-sm" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
      "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
      "fill:var(--icon-color, currentColor)">
      <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span></span></button>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--danger" id="id_6ae466cad849f" data-component="notice" aria-labelledby="notice__text__id_6ae466cad849f">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cad849f" data-js-notice-message="true" class="c-notice__message">This has a
  button to do a task but no dismiss action (Type: danger, Timeout: immediate, Iteration: 3).</span>
  <div class="c-notice__actions">
    <div class="c-notice__action">
      <a class="c-button c-notice__button c-button__basic c-button__basic--default c-button--sm" href="#" target="_top" aria-label="Undo" data-component="button"><span class=
      "c-button__label"><span class="c-button__label-text">Undo</span></span></a>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--warning" data-dismissable-notice="1" data-dismissable-notice-uid="e4c6fd39b407af492349fe386887cdfc" data-dismissable-notice-timeout="immediate" id="id_6ae466cad871e"
data-component="notice" aria-labelledby="notice__text__id_6ae466cad871e">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cad871e" data-js-notice-message="true" class="c-notice__message">This
  message has an action button and may be dismissed (Type: warning, Timeout: immediate, Iteration: 4).</span>
  <div class="c-notice__actions">
    <div class="c-notice__action">
      <a class="c-button c-notice__button c-button__basic c-button__basic--default c-button--sm" href="#" target="_top" aria-label="Go to home" data-component="button"><span class=
      "c-button__label"><span class="c-button__label-text">Go to home</span></span></a>
    </div>
    <div class="c-notice__dismiss">
      <button class="c-button c-notice__dismiss c-button__basic c-button__basic--default c-button--sm c-button--icon-only" data-dismissable-notice-trigger="1" aria-label="Close" type="button"
      data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-sm" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
      "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
      "fill:var(--icon-color, currentColor)">
      <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span></span></button>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--warning" data-dismissable-notice="1" data-dismissable-notice-uid="29191bf2ad3a04739048430f10513c2b" data-dismissable-notice-timeout="immediate" id="id_6ae466cad8bb3"
data-component="notice" aria-labelledby="notice__text__id_6ae466cad8bb3">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cad8bb3" data-js-notice-message="true" class="c-notice__message">This
  message may be dismissed (Type: warning, Timeout: immediate, Iteration: 4).</span>
  <div class="c-notice__actions">
    <div class="c-notice__dismiss">
      <button class="c-button c-notice__dismiss c-button__basic c-button__basic--default c-button--sm c-button--icon-only" data-dismissable-notice-trigger="1" aria-label="Close" type="button"
      data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-sm" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
      "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
      "fill:var(--icon-color, currentColor)">
      <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span></span></button>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--warning" id="id_6ae466cad8ee9" data-component="notice" aria-labelledby="notice__text__id_6ae466cad8ee9">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cad8ee9" data-js-notice-message="true" class="c-notice__message">This has a
  button to do a task but no dismiss action (Type: warning, Timeout: immediate, Iteration: 4).</span>
  <div class="c-notice__actions">
    <div class="c-notice__action">
      <a class="c-button c-notice__button c-button__basic c-button__basic--default c-button--sm" href="#" target="_top" aria-label="Undo" data-component="button"><span class=
      "c-button__label"><span class="c-button__label-text">Undo</span></span></a>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--info" data-dismissable-notice="1" data-dismissable-notice-uid="165fee388875415c5c0ba3152694d595" data-dismissable-notice-timeout="session" id="id_6ae466cad916b"
data-component="notice" aria-labelledby="notice__text__id_6ae466cad916b">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cad916b" data-js-notice-message="true" class="c-notice__message">This
  message has an action button and may be dismissed (Type: info, Timeout: session, Iteration: 1).</span>
  <div class="c-notice__actions">
    <div class="c-notice__action">
      <a class="c-button c-notice__button c-button__basic c-button__basic--default c-button--sm" href="#" target="_top" aria-label="Go to home" data-component="button"><span class=
      "c-button__label"><span class="c-button__label-text">Go to home</span></span></a>
    </div>
    <div class="c-notice__dismiss">
      <button class="c-button c-notice__dismiss c-button__basic c-button__basic--default c-button--sm c-button--icon-only" data-dismissable-notice-trigger="1" aria-label="Close" type="button"
      data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-sm" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
      "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
      "fill:var(--icon-color, currentColor)">
      <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span></span></button>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--info" data-dismissable-notice="1" data-dismissable-notice-uid="6422ea0d2d82b00f6c2a102d6df42a14" data-dismissable-notice-timeout="session" id="id_6ae466cad95f6"
data-component="notice" aria-labelledby="notice__text__id_6ae466cad95f6">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cad95f6" data-js-notice-message="true" class="c-notice__message">This
  message may be dismissed (Type: info, Timeout: session, Iteration: 1).</span>
  <div class="c-notice__actions">
    <div class="c-notice__dismiss">
      <button class="c-button c-notice__dismiss c-button__basic c-button__basic--default c-button--sm c-button--icon-only" data-dismissable-notice-trigger="1" aria-label="Close" type="button"
      data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-sm" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
      "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
      "fill:var(--icon-color, currentColor)">
      <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span></span></button>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--info" id="id_6ae466cad98ca" data-component="notice" aria-labelledby="notice__text__id_6ae466cad98ca">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cad98ca" data-js-notice-message="true" class="c-notice__message">This has a
  button to do a task but no dismiss action (Type: info, Timeout: session, Iteration: 1).</span>
  <div class="c-notice__actions">
    <div class="c-notice__action">
      <a class="c-button c-notice__button c-button__basic c-button__basic--default c-button--sm" href="#" target="_top" aria-label="Undo" data-component="button"><span class=
      "c-button__label"><span class="c-button__label-text">Undo</span></span></a>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--success" data-dismissable-notice="1" data-dismissable-notice-uid="2d4a10cb3530b41df41074bd7d3f6cee" data-dismissable-notice-timeout="session" id="id_6ae466cad9b2b"
data-component="notice" aria-labelledby="notice__text__id_6ae466cad9b2b">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cad9b2b" data-js-notice-message="true" class="c-notice__message">This
  message has an action button and may be dismissed (Type: success, Timeout: session, Iteration: 2).</span>
  <div class="c-notice__actions">
    <div class="c-notice__action">
      <a class="c-button c-notice__button c-button__basic c-button__basic--default c-button--sm" href="#" target="_top" aria-label="Go to home" data-component="button"><span class=
      "c-button__label"><span class="c-button__label-text">Go to home</span></span></a>
    </div>
    <div class="c-notice__dismiss">
      <button class="c-button c-notice__dismiss c-button__basic c-button__basic--default c-button--sm c-button--icon-only" data-dismissable-notice-trigger="1" aria-label="Close" type="button"
      data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-sm" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
      "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
      "fill:var(--icon-color, currentColor)">
      <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span></span></button>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--success" data-dismissable-notice="1" data-dismissable-notice-uid="948172e255c362bb7734ca94366724c2" data-dismissable-notice-timeout="session" id="id_6ae466cad9fd4"
data-component="notice" aria-labelledby="notice__text__id_6ae466cad9fd4">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cad9fd4" data-js-notice-message="true" class="c-notice__message">This
  message may be dismissed (Type: success, Timeout: session, Iteration: 2).</span>
  <div class="c-notice__actions">
    <div class="c-notice__dismiss">
      <button class="c-button c-notice__dismiss c-button__basic c-button__basic--default c-button--sm c-button--icon-only" data-dismissable-notice-trigger="1" aria-label="Close" type="button"
      data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-sm" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
      "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
      "fill:var(--icon-color, currentColor)">
      <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span></span></button>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--success" id="id_6ae466cada2ce" data-component="notice" aria-labelledby="notice__text__id_6ae466cada2ce">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cada2ce" data-js-notice-message="true" class="c-notice__message">This has a
  button to do a task but no dismiss action (Type: success, Timeout: session, Iteration: 2).</span>
  <div class="c-notice__actions">
    <div class="c-notice__action">
      <a class="c-button c-notice__button c-button__basic c-button__basic--default c-button--sm" href="#" target="_top" aria-label="Undo" data-component="button"><span class=
      "c-button__label"><span class="c-button__label-text">Undo</span></span></a>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--danger" data-dismissable-notice="1" data-dismissable-notice-uid="608b45484365d324c7ae13ae361fee9c" data-dismissable-notice-timeout="session" id="id_6ae466cada54c"
data-component="notice" aria-labelledby="notice__text__id_6ae466cada54c">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cada54c" data-js-notice-message="true" class="c-notice__message">This
  message has an action button and may be dismissed (Type: danger, Timeout: session, Iteration: 3).</span>
  <div class="c-notice__actions">
    <div class="c-notice__action">
      <a class="c-button c-notice__button c-button__basic c-button__basic--default c-button--sm" href="#" target="_top" aria-label="Go to home" data-component="button"><span class=
      "c-button__label"><span class="c-button__label-text">Go to home</span></span></a>
    </div>
    <div class="c-notice__dismiss">
      <button class="c-button c-notice__dismiss c-button__basic c-button__basic--default c-button--sm c-button--icon-only" data-dismissable-notice-trigger="1" aria-label="Close" type="button"
      data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-sm" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
      "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
      "fill:var(--icon-color, currentColor)">
      <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span></span></button>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--danger" data-dismissable-notice="1" data-dismissable-notice-uid="084cb6678c9b9a5f6c86d727b3c3cad7" data-dismissable-notice-timeout="session" id="id_6ae466cada9f7"
data-component="notice" aria-labelledby="notice__text__id_6ae466cada9f7">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cada9f7" data-js-notice-message="true" class="c-notice__message">This
  message may be dismissed (Type: danger, Timeout: session, Iteration: 3).</span>
  <div class="c-notice__actions">
    <div class="c-notice__dismiss">
      <button class="c-button c-notice__dismiss c-button__basic c-button__basic--default c-button--sm c-button--icon-only" data-dismissable-notice-trigger="1" aria-label="Close" type="button"
      data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-sm" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
      "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
      "fill:var(--icon-color, currentColor)">
      <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span></span></button>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--danger" id="id_6ae466cadae33" data-component="notice" aria-labelledby="notice__text__id_6ae466cadae33">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cadae33" data-js-notice-message="true" class="c-notice__message">This has a
  button to do a task but no dismiss action (Type: danger, Timeout: session, Iteration: 3).</span>
  <div class="c-notice__actions">
    <div class="c-notice__action">
      <a class="c-button c-notice__button c-button__basic c-button__basic--default c-button--sm" href="#" target="_top" aria-label="Undo" data-component="button"><span class=
      "c-button__label"><span class="c-button__label-text">Undo</span></span></a>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--warning" data-dismissable-notice="1" data-dismissable-notice-uid="932f471f10508ba42e1ce8f5741801ca" data-dismissable-notice-timeout="session" id="id_6ae466cadb10f"
data-component="notice" aria-labelledby="notice__text__id_6ae466cadb10f">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cadb10f" data-js-notice-message="true" class="c-notice__message">This
  message has an action button and may be dismissed (Type: warning, Timeout: session, Iteration: 4).</span>
  <div class="c-notice__actions">
    <div class="c-notice__action">
      <a class="c-button c-notice__button c-button__basic c-button__basic--default c-button--sm" href="#" target="_top" aria-label="Go to home" data-component="button"><span class=
      "c-button__label"><span class="c-button__label-text">Go to home</span></span></a>
    </div>
    <div class="c-notice__dismiss">
      <button class="c-button c-notice__dismiss c-button__basic c-button__basic--default c-button--sm c-button--icon-only" data-dismissable-notice-trigger="1" aria-label="Close" type="button"
      data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-sm" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
      "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
      "fill:var(--icon-color, currentColor)">
      <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span></span></button>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--warning" data-dismissable-notice="1" data-dismissable-notice-uid="bb3f9d6d157fc0cdfa1c19e07c8f3c0e" data-dismissable-notice-timeout="session" id="id_6ae466cadb59c"
data-component="notice" aria-labelledby="notice__text__id_6ae466cadb59c">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cadb59c" data-js-notice-message="true" class="c-notice__message">This
  message may be dismissed (Type: warning, Timeout: session, Iteration: 4).</span>
  <div class="c-notice__actions">
    <div class="c-notice__dismiss">
      <button class="c-button c-notice__dismiss c-button__basic c-button__basic--default c-button--sm c-button--icon-only" data-dismissable-notice-trigger="1" aria-label="Close" type="button"
      data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-sm" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
      "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
      "fill:var(--icon-color, currentColor)">
      <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span></span></button>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--warning" id="id_6ae466cadb8a9" data-component="notice" aria-labelledby="notice__text__id_6ae466cadb8a9">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cadb8a9" data-js-notice-message="true" class="c-notice__message">This has a
  button to do a task but no dismiss action (Type: warning, Timeout: session, Iteration: 4).</span>
  <div class="c-notice__actions">
    <div class="c-notice__action">
      <a class="c-button c-notice__button c-button__basic c-button__basic--default c-button--sm" href="#" target="_top" aria-label="Undo" data-component="button"><span class=
      "c-button__label"><span class="c-button__label-text">Undo</span></span></a>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--info" data-dismissable-notice="1" data-dismissable-notice-uid="c82f78ffc10f9c62176fdaf8fdfcbc56" data-dismissable-notice-timeout="permanent" id="id_6ae466cadbb46"
data-component="notice" aria-labelledby="notice__text__id_6ae466cadbb46">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cadbb46" data-js-notice-message="true" class="c-notice__message">This
  message has an action button and may be dismissed (Type: info, Timeout: permanent, Iteration: 1).</span>
  <div class="c-notice__actions">
    <div class="c-notice__action">
      <a class="c-button c-notice__button c-button__basic c-button__basic--default c-button--sm" href="#" target="_top" aria-label="Go to home" data-component="button"><span class=
      "c-button__label"><span class="c-button__label-text">Go to home</span></span></a>
    </div>
    <div class="c-notice__dismiss">
      <button class="c-button c-notice__dismiss c-button__basic c-button__basic--default c-button--sm c-button--icon-only" data-dismissable-notice-trigger="1" aria-label="Close" type="button"
      data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-sm" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
      "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
      "fill:var(--icon-color, currentColor)">
      <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span></span></button>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--info" data-dismissable-notice="1" data-dismissable-notice-uid="7331aeca68b9058ccd14f91d58ce5de0" data-dismissable-notice-timeout="permanent" id="id_6ae466cadc038"
data-component="notice" aria-labelledby="notice__text__id_6ae466cadc038">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cadc038" data-js-notice-message="true" class="c-notice__message">This
  message may be dismissed (Type: info, Timeout: permanent, Iteration: 1).</span>
  <div class="c-notice__actions">
    <div class="c-notice__dismiss">
      <button class="c-button c-notice__dismiss c-button__basic c-button__basic--default c-button--sm c-button--icon-only" data-dismissable-notice-trigger="1" aria-label="Close" type="button"
      data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-sm" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
      "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
      "fill:var(--icon-color, currentColor)">
      <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span></span></button>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--info" id="id_6ae466cadc32a" data-component="notice" aria-labelledby="notice__text__id_6ae466cadc32a">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cadc32a" data-js-notice-message="true" class="c-notice__message">This has a
  button to do a task but no dismiss action (Type: info, Timeout: permanent, Iteration: 1).</span>
  <div class="c-notice__actions">
    <div class="c-notice__action">
      <a class="c-button c-notice__button c-button__basic c-button__basic--default c-button--sm" href="#" target="_top" aria-label="Undo" data-component="button"><span class=
      "c-button__label"><span class="c-button__label-text">Undo</span></span></a>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--success" data-dismissable-notice="1" data-dismissable-notice-uid="ea1e39bccd46c9affec818a4b664be2d" data-dismissable-notice-timeout="permanent" id="id_6ae466cadc5a3"
data-component="notice" aria-labelledby="notice__text__id_6ae466cadc5a3">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cadc5a3" data-js-notice-message="true" class="c-notice__message">This
  message has an action button and may be dismissed (Type: success, Timeout: permanent, Iteration: 2).</span>
  <div class="c-notice__actions">
    <div class="c-notice__action">
      <a class="c-button c-notice__button c-button__basic c-button__basic--default c-button--sm" href="#" target="_top" aria-label="Go to home" data-component="button"><span class=
      "c-button__label"><span class="c-button__label-text">Go to home</span></span></a>
    </div>
    <div class="c-notice__dismiss">
      <button class="c-button c-notice__dismiss c-button__basic c-button__basic--default c-button--sm c-button--icon-only" data-dismissable-notice-trigger="1" aria-label="Close" type="button"
      data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-sm" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
      "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
      "fill:var(--icon-color, currentColor)">
      <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span></span></button>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--success" data-dismissable-notice="1" data-dismissable-notice-uid="f2ac951dc47fec4525c2b771709bdf0d" data-dismissable-notice-timeout="permanent" id="id_6ae466cadca53"
data-component="notice" aria-labelledby="notice__text__id_6ae466cadca53">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cadca53" data-js-notice-message="true" class="c-notice__message">This
  message may be dismissed (Type: success, Timeout: permanent, Iteration: 2).</span>
  <div class="c-notice__actions">
    <div class="c-notice__dismiss">
      <button class="c-button c-notice__dismiss c-button__basic c-button__basic--default c-button--sm c-button--icon-only" data-dismissable-notice-trigger="1" aria-label="Close" type="button"
      data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-sm" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
      "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
      "fill:var(--icon-color, currentColor)">
      <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span></span></button>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--success" id="id_6ae466cadcd4c" data-component="notice" aria-labelledby="notice__text__id_6ae466cadcd4c">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cadcd4c" data-js-notice-message="true" class="c-notice__message">This has a
  button to do a task but no dismiss action (Type: success, Timeout: permanent, Iteration: 2).</span>
  <div class="c-notice__actions">
    <div class="c-notice__action">
      <a class="c-button c-notice__button c-button__basic c-button__basic--default c-button--sm" href="#" target="_top" aria-label="Undo" data-component="button"><span class=
      "c-button__label"><span class="c-button__label-text">Undo</span></span></a>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--danger" data-dismissable-notice="1" data-dismissable-notice-uid="97bd0bb8221f4d926baf7a37f4279407" data-dismissable-notice-timeout="permanent" id="id_6ae466cadcfc2"
data-component="notice" aria-labelledby="notice__text__id_6ae466cadcfc2">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cadcfc2" data-js-notice-message="true" class="c-notice__message">This
  message has an action button and may be dismissed (Type: danger, Timeout: permanent, Iteration: 3).</span>
  <div class="c-notice__actions">
    <div class="c-notice__action">
      <a class="c-button c-notice__button c-button__basic c-button__basic--default c-button--sm" href="#" target="_top" aria-label="Go to home" data-component="button"><span class=
      "c-button__label"><span class="c-button__label-text">Go to home</span></span></a>
    </div>
    <div class="c-notice__dismiss">
      <button class="c-button c-notice__dismiss c-button__basic c-button__basic--default c-button--sm c-button--icon-only" data-dismissable-notice-trigger="1" aria-label="Close" type="button"
      data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-sm" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
      "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
      "fill:var(--icon-color, currentColor)">
      <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span></span></button>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--danger" data-dismissable-notice="1" data-dismissable-notice-uid="d8ba98c9bfae431b7edc60772000782f" data-dismissable-notice-timeout="permanent" id="id_6ae466cadd44d"
data-component="notice" aria-labelledby="notice__text__id_6ae466cadd44d">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cadd44d" data-js-notice-message="true" class="c-notice__message">This
  message may be dismissed (Type: danger, Timeout: permanent, Iteration: 3).</span>
  <div class="c-notice__actions">
    <div class="c-notice__dismiss">
      <button class="c-button c-notice__dismiss c-button__basic c-button__basic--default c-button--sm c-button--icon-only" data-dismissable-notice-trigger="1" aria-label="Close" type="button"
      data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-sm" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
      "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
      "fill:var(--icon-color, currentColor)">
      <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span></span></button>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--danger" id="id_6ae466cadd77a" data-component="notice" aria-labelledby="notice__text__id_6ae466cadd77a">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cadd77a" data-js-notice-message="true" class="c-notice__message">This has a
  button to do a task but no dismiss action (Type: danger, Timeout: permanent, Iteration: 3).</span>
  <div class="c-notice__actions">
    <div class="c-notice__action">
      <a class="c-button c-notice__button c-button__basic c-button__basic--default c-button--sm" href="#" target="_top" aria-label="Undo" data-component="button"><span class=
      "c-button__label"><span class="c-button__label-text">Undo</span></span></a>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--warning" data-dismissable-notice="1" data-dismissable-notice-uid="1ae5ec08582e7994bc7fe1be1e52e282" data-dismissable-notice-timeout="permanent" id="id_6ae466cadd9f8"
data-component="notice" aria-labelledby="notice__text__id_6ae466cadd9f8">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cadd9f8" data-js-notice-message="true" class="c-notice__message">This
  message has an action button and may be dismissed (Type: warning, Timeout: permanent, Iteration: 4).</span>
  <div class="c-notice__actions">
    <div class="c-notice__action">
      <a class="c-button c-notice__button c-button__basic c-button__basic--default c-button--sm" href="#" target="_top" aria-label="Go to home" data-component="button"><span class=
      "c-button__label"><span class="c-button__label-text">Go to home</span></span></a>
    </div>
    <div class="c-notice__dismiss">
      <button class="c-button c-notice__dismiss c-button__basic c-button__basic--default c-button--sm c-button--icon-only" data-dismissable-notice-trigger="1" aria-label="Close" type="button"
      data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-sm" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
      "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
      "fill:var(--icon-color, currentColor)">
      <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span></span></button>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--warning" data-dismissable-notice="1" data-dismissable-notice-uid="ada4ad1a4805c3951e0086b0502d04e4" data-dismissable-notice-timeout="permanent" id="id_6ae466cae4106"
data-component="notice" aria-labelledby="notice__text__id_6ae466cae4106">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cae4106" data-js-notice-message="true" class="c-notice__message">This
  message may be dismissed (Type: warning, Timeout: permanent, Iteration: 4).</span>
  <div class="c-notice__actions">
    <div class="c-notice__dismiss">
      <button class="c-button c-notice__dismiss c-button__basic c-button__basic--default c-button--sm c-button--icon-only" data-dismissable-notice-trigger="1" aria-label="Close" type="button"
      data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       <span class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-sm" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
      "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
      "fill:var(--icon-color, currentColor)">
      <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></span></span></button>
    </div>
  </div>
</div><!-- notice.blade.php -->
<div class="c-notice c-notice--warning" id="id_6ae466cae43fa" data-component="notice" aria-labelledby="notice__text__id_6ae466cae43fa">
  <span class="c-notice__icon"><!-- icon.blade.php -->
   <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
  "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
  "fill:var(--icon-color, currentColor)">
  <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ae466cae43fa" data-js-notice-message="true" class="c-notice__message">This has a
  button to do a task but no dismiss action (Type: warning, Timeout: permanent, Iteration: 4).</span>
  <div class="c-notice__actions">
    <div class="c-notice__action">
      <a class="c-button c-notice__button c-button__basic c-button__basic--default c-button--sm" href="#" target="_top" aria-label="Undo" data-component="button"><span class=
      "c-button__label"><span class="c-button__label-text">Undo</span></span></a>
    </div>
  </div>
</div>

@foreach(['immediate','session', 'permanent'] as $timeout)
    @foreach (['info', 'success', 'danger', 'warning'] as $type)
        @notice([
            'type' => $type,
            'message' => [
                'text' => 'This message has an action button and may be dismissed (Type: '.$type.', Timeout: '.$timeout. ', Iteration: ' .$loop->iteration.').',
            ],
            'action' => [
                'text' => 'Go to home',
                'url' => '#'
            ],
            'dismissable' => $timeout,
            'icon' => [
                'name' => 'check',
                'size' => 'md',
                'color' => 'white'
            ]
        ])
        @endnotice

        @notice([
            'type' => $type,
            'message' => [
                'text' => 'This message may be dismissed (Type: '.$type.', Timeout: '.$timeout. ', Iteration: ' .$loop->iteration.').',
            ],
            'dismissable' => $timeout,
            'icon' => [
                'name' => 'check',
                'size' => 'md',
                'color' => 'white'
            ]
        ])
        @endnotice

        @notice([
            'type' => $type,
            'message' => [
                'text' => 'This has a button to do a task but no dismiss action (Type: '.$type.', Timeout: '.$timeout. ', Iteration: ' .$loop->iteration.').',
            ],
            'action' => [
                'text' => 'Undo',
                'url' => '#'
            ],
            'icon' => [
                'name' => 'check',
                'size' => 'md',
                'color' => 'white'
            ]
        ])
        @endnotice
    @endforeach
@endforeach

API

Parameter	Default	Type	Description
type	info	string	-
message	[]	object\|array	-
icon	false	array\|boolean	-
stretch	false	boolean	-
dismissable	false	string\|boolean	-
action	false	array\|boolean	-

CSS API

Variable	Default	Type	Values	Description
--c-notice--border-radius	var(--border-radius)	range	-	Border Radius
--c-notice--border-width	var(--border-width)	range	-	Size
--c-notice--space	var(--space)	range	-	Base spacing unit. Used for padding and margin inside components.
--c-notice--outer-space	var(--outer-space)	range	-	Spacing between components. Use --space for spacing inside components.
--c-notice--shadow-color	var(--shadow-color)	rgba	-	Shadow Color
--c-notice--shadow-amount	var(--shadow-amount)	range	-	Multiplier for elevation shadows. 0 = none, 1 = default.
--c-notice--corner-shape	var(--corner-shape)	select	square, round, squircle, circular, bevel, scoop	Corner Shape
--c-notice--color--info	var(--color--info)	color	-	Selects the token family used for informational notices.
--c-notice--color--info-contrast	var(--color--info-contrast)	color	-	Info Contrast
--c-notice--color--info-border	var(--color--info-border)	color	-	Auto-generated companion token for info border and emphasis states.
--c-notice--color--danger	var(--color--danger)	color	-	Selects the token family used for danger notices.
--c-notice--color--danger-contrast	var(--color--danger-contrast)	color	-	Danger Contrast
--c-notice--color--danger-border	var(--color--danger-border)	color	-	Manual companion token for danger border and emphasis states.
--c-notice--color--warning	var(--color--warning)	color	-	Selects the token family used for warning notices.
--c-notice--color--warning-contrast	var(--color--warning-contrast)	color	-	Warning Contrast
--c-notice--color--warning-border	var(--color--warning-border)	color	-	Auto-generated companion token for warning border and emphasis states.
--c-notice--color--success	var(--color--success)	color	-	Selects the token family used for success notices.
--c-notice--color--success-contrast	var(--color--success-contrast)	color	-	Success Contrast
--c-notice--color--success-border	var(--color--success-border)	color	-	Auto-generated companion token for success border and emphasis states.
--c-notice--font-size-300	var(--font-size-300)	range	-	Two steps above base in the type scale. Equivalent to h5.

Similar components

Footer Option Tooltip