Modal

The Modal component provides a reusable pattern for modal in the interface.

Modal with normal content

<div style="display: grid; gap: 16px; justify-content: start; grid-template-columns: 1fr 1fr;">
  <button class="c-button open-modal u-margin__left--0 c-button__filled c-button__filled--secondary c-button--md" data-open="modal-standard" aria-label="Open standard modal" data-uid="6a44fdda6ba81"
  data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class="c-button__label-text">Open standard modal</span></span></button>
  <button class="c-button open-modal u-margin__left--0 c-button__filled c-button__filled--secondary c-button--md" data-open="modal-small" aria-label="Open small modal" data-uid="6a44fdda6bcc4"
  data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class="c-button__label-text">Open small modal</span></span></button>
  <button class="c-button open-modal u-margin__left--0 c-button__filled c-button__filled--secondary c-button--md" data-open="modal-medium" aria-label="Open medium modal" data-uid="6a44fdda6bd8f"
  data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class="c-button__label-text">Open medium modal</span></span></button>
  <button class="c-button open-modal u-margin__left--0 c-button__filled c-button__filled--secondary c-button--md" data-open="modal-large" aria-label="Open large modal" data-uid="6a44fdda6be49"
  data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class="c-button__label-text">Open large modal</span></span></button>
  <button class="c-button open-modal u-margin__left--0 c-button__filled c-button__filled--secondary c-button--md" data-open="modal-panel" aria-label="Open panel modal" data-uid="6a44fdda6bf57"
  data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class="c-button__label-text">Open panel modal</span></span></button>
</div><!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-modal c-modal--slide-up c-modal--padding-3 c-modal--overlay-light" aria-labelledby="modal__label__modal-standard" aria-modal="true" role="dialog" id=
"modal-standard" data-uid="6a44fdda6c1b2" data-component="modal">
  <div class="c-modal__header">
    <!-- typography.blade.php   original: h2 -->
    <h2 class="c-typography c-modal__heading c-typography__variant--h2" tabindex="1" id="modal__label__modal-standard" data-uid="6a44fdda6c25e" data-component="typography">
      Example modal standard
    </h2><button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" data-close="" type="button" aria-label="Close" data-uid="6a44fdda6c2c4" data-component=
    "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class="c-button__label-text">Close</span></span></button>
  </div>
  <div class="c-modal__content" tabindex="2">
    <button class="c-button c-modal__prev c-button__basic c-button__basic--default c-button--lg c-button--icon-only" data-prev="" aria-label="chevron_left" type="button" data-uid="6a44fdda6c39a"
    data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     </span></span></button> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce
    dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. <button class=
    "c-button c-modal__next c-button__basic c-button__basic--default c-button--lg c-button--icon-only" data-next="" aria-label="chevron_right" type="button" data-uid="6a44fdda6c49c" data-component=
    "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     </span></span></button>
  </div>
  <div class="c-modal__footer">
    <a class="c-button c-button__filled c-button__filled--primary c-button--md" href="#" target="_top" aria-label="Action" data-uid="6a44fdda6c03a" data-component="button"><span class=
    "c-button__label"><span class="c-button__label-text">Action</span></span></a> <a class="c-button c-button__filled c-button__filled--secondary c-button--md" href="#" target="_top" aria-label=
    "Secondary action" data-uid="6a44fdda6c0a5" data-component="button"><span class="c-button__label"><span class="c-button__label-text">Secondary action</span></span></a>
  </div>
</dialog><!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-modal c-modal--slide-up c-modal--size-sm c-modal--padding-3 c-modal--border-radius-lg c-modal--overlay-light" aria-labelledby="modal__label__modal-small"
aria-modal="true" role="dialog" id="modal-small" data-uid="6a44fdda6c616" data-component="modal">
  <div class="c-modal__header">
    <!-- typography.blade.php   original: h2 -->
    <h2 class="c-typography c-modal__heading c-typography__variant--h2" tabindex="1" id="modal__label__modal-small" data-uid="6a44fdda6c668" data-component="typography">
      Example modal small
    </h2><button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" data-close="" type="button" aria-label="Close" data-uid="6a44fdda6c6bd" data-component=
    "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class="c-button__label-text">Close</span></span></button>
  </div>
  <div class="c-modal__content" tabindex="2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus
    commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  </div>
  <div class="c-modal__footer">
    <a class="c-button c-button__filled c-button__filled--primary c-button--md" href="#" target="_top" aria-label="Action" data-uid="6a44fdda6c565" data-component="button"><span class=
    "c-button__label"><span class="c-button__label-text">Action</span></span></a> <a class="c-button c-button__filled c-button__filled--secondary c-button--md" href="#" target="_top" aria-label=
    "Secondary action" data-uid="6a44fdda6c5bb" data-component="button"><span class="c-button__label"><span class="c-button__label-text">Secondary action</span></span></a>
  </div>
</dialog><!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-modal c-modal--slide-up c-modal--size-md c-modal--padding-3 c-modal--border-radius-md c-modal--overlay-light" aria-labelledby="modal__label__modal-medium"
aria-modal="true" role="dialog" id="modal-medium" data-uid="6a44fdda6fb1e" data-component="modal">
  <div class="c-modal__header">
    <!-- typography.blade.php   original: h2 -->
    <h2 class="c-typography c-modal__heading c-typography__variant--h2" tabindex="1" id="modal__label__modal-medium" data-uid="6a44fdda6fb7b" data-component="typography">
      Example modal medium
    </h2><button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" data-close="" type="button" aria-label="Close" data-uid="6a44fdda6fbd9" data-component=
    "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class="c-button__label-text">Close</span></span></button>
  </div>
  <div class="c-modal__content" tabindex="2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus
    commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  </div>
  <div class="c-modal__footer">
    <a class="c-button c-button__filled c-button__filled--primary c-button--md" href="#" target="_top" aria-label="Action" data-uid="6a44fdda6c778" data-component="button"><span class=
    "c-button__label"><span class="c-button__label-text">Action</span></span></a> <a class="c-button c-button__filled c-button__filled--secondary c-button--md" href="#" target="_top" aria-label=
    "Secondary action" data-uid="6a44fdda6c7cd" data-component="button"><span class="c-button__label"><span class="c-button__label-text">Secondary action</span></span></a>
  </div>
</dialog><!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-modal c-modal--slide-up c-modal--size-lg c-modal--padding-3 c-modal--border-radius-sm c-modal--overlay-light" aria-labelledby="modal__label__modal-large"
aria-modal="true" role="dialog" id="modal-large" data-uid="6a44fdda6fd51" data-component="modal">
  <div class="c-modal__header">
    <!-- typography.blade.php   original: h2 -->
    <h2 class="c-typography c-modal__heading c-typography__variant--h2" tabindex="1" id="modal__label__modal-large" data-uid="6a44fdda6fda1" data-component="typography">
      Example modal large
    </h2><button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" data-close="" type="button" aria-label="Close" data-uid="6a44fdda6fdf7" data-component=
    "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class="c-button__label-text">Close</span></span></button>
  </div>
  <div class="c-modal__content" tabindex="2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus
    commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  </div>
  <div class="c-modal__footer">
    <a class="c-button c-button__filled c-button__filled--primary c-button--md" href="#" target="_top" aria-label="Action" data-uid="6a44fdda6fca3" data-component="button"><span class=
    "c-button__label"><span class="c-button__label-text">Action</span></span></a> <a class="c-button c-button__filled c-button__filled--secondary c-button--md" href="#" target="_top" aria-label=
    "Secondary action" data-uid="6a44fdda6fcf9" data-component="button"><span class="c-button__label"><span class="c-button__label-text">Secondary action</span></span></a>
  </div>
</dialog><!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-panel c-modal--slide-up c-modal--padding-2 c-modal--overlay-light" aria-labelledby="modal__label__modal-panel" aria-modal="true" role="dialog" id="modal-panel"
data-uid="6a44fdda6ff70" data-component="modal">
  <div class="c-modal__header">
    <!-- typography.blade.php   original: h2 -->
    <h2 class="c-typography c-modal__heading c-typography__variant--h2" tabindex="1" id="modal__label__modal-panel" data-uid="6a44fdda6ffbb" data-component="typography">
      Example modal panel
    </h2><button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" data-close="" type="button" aria-label="Close" data-uid="6a44fdda70010" data-component=
    "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class="c-button__label-text">Close</span></span></button>
  </div>
  <div class="c-modal__content" tabindex="2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus
    commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  </div>
  <div class="c-modal__footer">
    <a class="c-button c-button__filled c-button__filled--primary c-button--md" href="#" target="_top" aria-label="Action" data-uid="6a44fdda6fec7" data-component="button"><span class=
    "c-button__label"><span class="c-button__label-text">Action</span></span></a> <a class="c-button c-button__filled c-button__filled--secondary c-button--md" href="#" target="_top" aria-label=
    "Secondary action" data-uid="6a44fdda6ff1d" data-component="button"><span class="c-button__label"><span class="c-button__label-text">Secondary action</span></span></a>
  </div>
</dialog>

@php
    $modals = [
        'standard' => [
            'isPanel' => false,
            'overlay' => 'light',
            'navigation' => true,
        ],
        'small' => [
            'size' => 'sm',
            'borderRadius' => 'lg',
        ],
        'medium' => [
            'size' => 'md',
            'borderRadius' => 'md',
        ],
        'large' => [
            'size' => 'lg',
            'borderRadius' => 'sm',
        ],
        'panel' => [
            'isPanel' => true,
            'animation' => 'slide-up',
            'padding' => 2,
        ],
    ];
@endphp

<div style="display: grid; gap: 16px; justify-content: start;  grid-template-columns: 1fr 1fr;">
    @foreach ($modals as $key => $modal)
        @button([
            'href' => '',
            'type' => 'filled',
            'text' => 'Open ' . $key . ' modal',
            'icon' => 'favorite',
            'size' => 'md',
            'color' => 'secondary',
            'classList' => ['open-modal', 'u-margin__left--0'],
            'attributeList' => ['data-open' => 'modal-' . $key],
        ])
        @endbutton
    @endforeach
</div>


@foreach ($modals as $key => $modal)
    @modal(
        array_merge(
            [
                'closeButtonText' => 'Close',
                'heading' => 'Example modal ' . $key,
                'id' => 'modal-' . $key
            ],
            (array) $modal
        )
    )
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        @slot('bottom')
            @button([
                'href' => '#',
                'type' => 'filled',
                'text' => 'Action',
                'size' => 'md',
                'color' => 'primary',
            ])
            @endbutton
            @button([
                'href' => '#',
                'type' => 'filled',
                'text' => 'Secondary action',
                'size' => 'md',
                'color' => 'secondary',
            ])
            @endbutton
        @endslot
    @endmodal
@endforeach

Modal with large content

This modal contains a large amount of content to demonstrate scrolling behavior.

<div style="display: grid; gap: 16px; justify-content: start; grid-template-columns: 1fr 1fr;">
  <button class="c-button open-modal u-margin__left--0 c-button__filled c-button__filled--secondary c-button--md" data-open="modal-l-standard" aria-label="Open standard modal" data-uid=
  "6a44fdda70268" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class="c-button__label-text">Open standard
  modal</span></span></button> <button class="c-button open-modal u-margin__left--0 c-button__filled c-button__filled--secondary c-button--md" data-open="modal-l-small" aria-label="Open small modal"
  data-uid="6a44fdda70355" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class="c-button__label-text">Open small
  modal</span></span></button> <button class="c-button open-modal u-margin__left--0 c-button__filled c-button__filled--secondary c-button--md" data-open="modal-l-medium" aria-label=
  "Open medium modal" data-uid="6a44fdda7040d" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class=
  "c-button__label-text">Open medium modal</span></span></button> <button class="c-button open-modal u-margin__left--0 c-button__filled c-button__filled--secondary c-button--md" data-open=
  "modal-l-large" aria-label="Open large modal" data-uid="6a44fdda704c4" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span>
  <span class="c-button__label-text">Open large modal</span></span></button> <button class="c-button open-modal u-margin__left--0 c-button__filled c-button__filled--secondary c-button--md" data-open=
  "modal-l-panel" aria-label="Open panel modal" data-uid="6a44fdda70575" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span>
  <span class="c-button__label-text">Open panel modal</span></span></button>
</div><!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-modal c-modal--slide-up c-modal--padding-3 c-modal--overlay-light" aria-labelledby="modal__label__modal-l-standard" aria-modal="true" role="dialog" id=
"modal-l-standard" data-uid="6a44fdda706e4" data-component="modal">
  <div class="c-modal__header">
    <!-- typography.blade.php   original: h2 -->
    <h2 class="c-typography c-modal__heading c-typography__variant--h2" tabindex="1" id="modal__label__modal-l-standard" data-uid="6a44fdda70734" data-component="typography">
      Example modal with a very long title standard
    </h2><button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" data-close="" type="button" aria-label="Close" data-uid="6a44fdda7078a" data-component=
    "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class="c-button__label-text">Close</span></span></button>
  </div>
  <div class="c-modal__content" tabindex="2">
    <button class="c-button c-modal__prev c-button__basic c-button__basic--default c-button--lg c-button--icon-only" data-prev="" aria-label="chevron_left" type="button" data-uid="6a44fdda7083f"
    data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     </span></span></button> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce
    dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus
    sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem
    ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo,
    tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis
    risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
    ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel
    eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis
    consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
    amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus
    ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet
    fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum
    dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo,
    tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis
    risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
    ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel
    eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis
    consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
    amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus
    ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet
    fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum
    dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo,
    tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis
    risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
    ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel
    eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. <button class=
    "c-button c-modal__next c-button__basic c-button__basic--default c-button--lg c-button--icon-only" data-next="" aria-label="chevron_right" type="button" data-uid="6a44fdda708ef" data-component=
    "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     </span></span></button>
  </div>
  <div class="c-modal__footer">
    <a class="c-button c-button__filled c-button__filled--primary c-button--md" href="#" target="_top" aria-label="Action" data-uid="6a44fdda70628" data-component="button"><span class=
    "c-button__label"><span class="c-button__label-text">Action</span></span></a> <a class="c-button c-button__filled c-button__filled--secondary c-button--md" href="#" target="_top" aria-label=
    "Secondary action" data-uid="6a44fdda7068a" data-component="button"><span class="c-button__label"><span class="c-button__label-text">Secondary action</span></span></a>
  </div>
</dialog><!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-modal c-modal--slide-up c-modal--size-sm c-modal--padding-3 c-modal--border-radius-lg c-modal--overlay-light" aria-labelledby="modal__label__modal-l-small"
aria-modal="true" role="dialog" id="modal-l-small" data-uid="6a44fdda70abd" data-component="modal">
  <div class="c-modal__header">
    <!-- typography.blade.php   original: h2 -->
    <h2 class="c-typography c-modal__heading c-typography__variant--h2" tabindex="1" id="modal__label__modal-l-small" data-uid="6a44fdda70b21" data-component="typography">
      Example modal with a very long title small
    </h2><button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" data-close="" type="button" aria-label="Close" data-uid="6a44fdda70b7a" data-component=
    "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class="c-button__label-text">Close</span></span></button>
  </div>
  <div class="c-modal__content" tabindex="2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus
    commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
    quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris
    condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna
    mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
    massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce
    dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus
    sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem
    ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo,
    tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis
    risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
    ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel
    eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis
    consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
    amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus
    ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet
    fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum
    dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo,
    tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis
    risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
    ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel
    eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis
    consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
    amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus
    ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  </div>
  <div class="c-modal__footer">
    <a class="c-button c-button__filled c-button__filled--primary c-button--md" href="#" target="_top" aria-label="Action" data-uid="6a44fdda709a9" data-component="button"><span class=
    "c-button__label"><span class="c-button__label-text">Action</span></span></a> <a class="c-button c-button__filled c-button__filled--secondary c-button--md" href="#" target="_top" aria-label=
    "Secondary action" data-uid="6a44fdda709fd" data-component="button"><span class="c-button__label"><span class="c-button__label-text">Secondary action</span></span></a>
  </div>
</dialog><!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-modal c-modal--slide-up c-modal--size-md c-modal--padding-3 c-modal--border-radius-md c-modal--overlay-light" aria-labelledby="modal__label__modal-l-medium"
aria-modal="true" role="dialog" id="modal-l-medium" data-uid="6a44fdda70ce8" data-component="modal">
  <div class="c-modal__header">
    <!-- typography.blade.php   original: h2 -->
    <h2 class="c-typography c-modal__heading c-typography__variant--h2" tabindex="1" id="modal__label__modal-l-medium" data-uid="6a44fdda70d35" data-component="typography">
      Example modal with a very long title medium
    </h2><button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" data-close="" type="button" aria-label="Close" data-uid="6a44fdda70d89" data-component=
    "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class="c-button__label-text">Close</span></span></button>
  </div>
  <div class="c-modal__content" tabindex="2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus
    commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
    quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris
    condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna
    mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
    massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce
    dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus
    sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem
    ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo,
    tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis
    risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
    ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel
    eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis
    consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
    amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus
    ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet
    fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum
    dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo,
    tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis
    risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
    ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel
    eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis
    consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
    amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus
    ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  </div>
  <div class="c-modal__footer">
    <a class="c-button c-button__filled c-button__filled--primary c-button--md" href="#" target="_top" aria-label="Action" data-uid="6a44fdda70c3e" data-component="button"><span class=
    "c-button__label"><span class="c-button__label-text">Action</span></span></a> <a class="c-button c-button__filled c-button__filled--secondary c-button--md" href="#" target="_top" aria-label=
    "Secondary action" data-uid="6a44fdda70c92" data-component="button"><span class="c-button__label"><span class="c-button__label-text">Secondary action</span></span></a>
  </div>
</dialog><!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-modal c-modal--slide-up c-modal--size-lg c-modal--padding-3 c-modal--border-radius-sm c-modal--overlay-light" aria-labelledby="modal__label__modal-l-large"
aria-modal="true" role="dialog" id="modal-l-large" data-uid="6a44fdda70efc" data-component="modal">
  <div class="c-modal__header">
    <!-- typography.blade.php   original: h2 -->
    <h2 class="c-typography c-modal__heading c-typography__variant--h2" tabindex="1" id="modal__label__modal-l-large" data-uid="6a44fdda70f49" data-component="typography">
      Example modal with a very long title large
    </h2><button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" data-close="" type="button" aria-label="Close" data-uid="6a44fdda70f9b" data-component=
    "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class="c-button__label-text">Close</span></span></button>
  </div>
  <div class="c-modal__content" tabindex="2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus
    commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
    quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris
    condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna
    mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
    massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce
    dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus
    sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem
    ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo,
    tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis
    risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
    ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel
    eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis
    consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
    amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus
    ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet
    fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum
    dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo,
    tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis
    risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
    ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel
    eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis
    consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
    amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus
    ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  </div>
  <div class="c-modal__footer">
    <a class="c-button c-button__filled c-button__filled--primary c-button--md" href="#" target="_top" aria-label="Action" data-uid="6a44fdda70e51" data-component="button"><span class=
    "c-button__label"><span class="c-button__label-text">Action</span></span></a> <a class="c-button c-button__filled c-button__filled--secondary c-button--md" href="#" target="_top" aria-label=
    "Secondary action" data-uid="6a44fdda70ea7" data-component="button"><span class="c-button__label"><span class="c-button__label-text">Secondary action</span></span></a>
  </div>
</dialog><!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-panel c-modal--slide-up c-modal--padding-2 c-modal--overlay-light" aria-labelledby="modal__label__modal-l-panel" aria-modal="true" role="dialog" id="modal-l-panel"
data-uid="6a44fdda710fd" data-component="modal">
  <div class="c-modal__header">
    <!-- typography.blade.php   original: h2 -->
    <h2 class="c-typography c-modal__heading c-typography__variant--h2" tabindex="1" id="modal__label__modal-l-panel" data-uid="6a44fdda71149" data-component="typography">
      Example modal with a very long title panel
    </h2><button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" data-close="" type="button" aria-label="Close" data-uid="6a44fdda7119b" data-component=
    "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class="c-button__label-text">Close</span></span></button>
  </div>
  <div class="c-modal__content" tabindex="2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus
    commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
    quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris
    condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna
    mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
    massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce
    dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus
    sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem
    ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo,
    tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis
    risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
    ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel
    eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis
    consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
    amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus
    ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet
    fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum
    dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo,
    tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis
    risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
    ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel
    eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis
    consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
    amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus
    ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  </div>
  <div class="c-modal__footer">
    <a class="c-button c-button__filled c-button__filled--primary c-button--md" href="#" target="_top" aria-label="Action" data-uid="6a44fdda71057" data-component="button"><span class=
    "c-button__label"><span class="c-button__label-text">Action</span></span></a> <a class="c-button c-button__filled c-button__filled--secondary c-button--md" href="#" target="_top" aria-label=
    "Secondary action" data-uid="6a44fdda710aa" data-component="button"><span class="c-button__label"><span class="c-button__label-text">Secondary action</span></span></a>
  </div>
</dialog>

@php
    $modals = [
        'standard' => [
            'isPanel' => false,
            'overlay' => 'light',
            'navigation' => true,
        ],
        'small' => [
            'size' => 'sm',
            'borderRadius' => 'lg',
        ],
        'medium' => [
            'size' => 'md',
            'borderRadius' => 'md',
        ],
        'large' => [
            'size' => 'lg',
            'borderRadius' => 'sm',
        ],
        'panel' => [
            'isPanel' => true,
            'animation' => 'slide-up',
            'padding' => 2,
        ],
    ];
@endphp

<div style="display: grid; gap: 16px; justify-content: start;  grid-template-columns: 1fr 1fr;">
    @foreach ($modals as $key => $modal)
        @button([
            'href' => '',
            'type' => 'filled',
            'text' => 'Open ' . $key . ' modal',
            'icon' => 'favorite',
            'size' => 'md',
            'color' => 'secondary',
            'classList' => ['open-modal', 'u-margin__left--0'],
            'attributeList' => ['data-open' => 'modal-l-' . $key],
        ])
        @endbutton
    @endforeach
</div>


@foreach ($modals as $key => $modal)
    @modal(
        array_merge(
            [
                'closeButtonText' => 'Close',
                'heading' => 'Example modal with a very long title ' . $key,
                'id' => 'modal-l-' . $key
            ],
            (array) $modal
        )
    )
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        @slot('bottom')
            @button([
                'href' => '#',
                'type' => 'filled',
                'text' => 'Action',
                'size' => 'md',
                'color' => 'primary',
            ])
            @endbutton
            @button([
                'href' => '#',
                'type' => 'filled',
                'text' => 'Secondary action',
                'size' => 'md',
                'color' => 'secondary',
            ])
            @endbutton
        @endslot
    @endmodal
@endforeach

Modal with navigation

Click any thumbnail to open the gallery modal. Previous and next arrows cycle through images.

<div style="display: flex; gap: 8px;">
  <!-- image.blade.php -->
  <figure class="c-image" data-open="modal-navigation" data-large-img="https://picsum.photos/id/10/800/600" data-stepping="0" data-caption="Forest path" style="cursor: pointer; width: 150px;"
  data-uid="6a44fdda713ec" data-component="image">
    <div class="c-image__image-wrapper">
      <img loading="lazy" class="c-image__image" src="https://picsum.photos/id/10/400/300" alt="Forest path" />
    </div>
  </figure><!-- image.blade.php -->
  <figure class="c-image" data-open="modal-navigation" data-large-img="https://picsum.photos/id/20/800/600" data-stepping="1" data-caption="Mountain lake" style="cursor: pointer; width: 150px;"
  data-uid="6a44fdda714ef" data-component="image">
    <div class="c-image__image-wrapper">
      <img loading="lazy" class="c-image__image" src="https://picsum.photos/id/20/400/300" alt="Mountain lake" />
    </div>
  </figure><!-- image.blade.php -->
  <figure class="c-image" data-open="modal-navigation" data-large-img="https://picsum.photos/id/30/800/600" data-stepping="2" data-caption="Coastal view" style="cursor: pointer; width: 150px;"
  data-uid="6a44fdda715ad" data-component="image">
    <div class="c-image__image-wrapper">
      <img loading="lazy" class="c-image__image" src="https://picsum.photos/id/30/400/300" alt="Coastal view" />
    </div>
  </figure>
</div><!-- modal.blade.php -->
<dialog class="c-modal c-modal--gallery c-modal--is-modal c-modal--slide-up c-modal--padding-3 c-modal--transparent c-modal--overlay-light" aria-labelledby="modal__label__modal-navigation"
aria-modal="true" role="dialog" id="modal-navigation" data-uid="6a44fdda71757" data-component="modal">
  <div class="c-modal__header">
    <button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" data-close="" type="button" aria-label="Close" data-uid="6a44fdda717ab" data-component=
    "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class="c-button__label-text">Close</span></span></button>
  </div>
  <div class="c-modal__content" tabindex="2">
    <button class="c-button c-modal__prev c-button__basic c-button__basic--default c-button--lg c-button--icon-only" data-prev="" type="button" aria-label="Previous image" data-uid="6a44fdda7185f"
    data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     </span></span></button> <!-- image.blade.php -->
    <figure class="c-image c-image--is-placeholder c-image--is-placeholder" data-uid="6a44fdda71677" data-component="image">
      <div class="c-image__placeholder" aria-label="">
        <!-- icon.blade.php -->
      </div>
    </figure><button class="c-button c-modal__next c-button__basic c-button__basic--default c-button--lg c-button--icon-only" data-next="" type="button" aria-label="Next image" data-uid=
    "6a44fdda7190d" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     </span></span></button>
  </div>
</dialog>

@php
    $navItems = [
        ['thumb' => 'https://picsum.photos/id/10/400/300',  'large' => 'https://picsum.photos/id/10/800/600',  'caption' => 'Forest path'],
        ['thumb' => 'https://picsum.photos/id/20/400/300',  'large' => 'https://picsum.photos/id/20/800/600',  'caption' => 'Mountain lake'],
        ['thumb' => 'https://picsum.photos/id/30/400/300',  'large' => 'https://picsum.photos/id/30/800/600',  'caption' => 'Coastal view'],
    ];
@endphp

<div style="display: flex; gap: 8px;">
    @foreach ($navItems as $i => $item)
        @image([
            'src' => $item['thumb'],
            'alt' => $item['caption'],
            'attributeList' => [
                'data-open'     => 'modal-navigation',
                'data-large-img' => $item['large'],
                'data-stepping' => $i,
                'data-caption'  => $item['caption'],
                'style'         => 'cursor: pointer; width: 150px;',
            ],
        ])
        @endimage
    @endforeach
</div>

@modal([
    'id'              => 'modal-navigation',
    'navigation'      => true,
    'transparent'     => true,
    'closeButtonText' => 'Close',
    'ariaLabels'      => (object) ['prev' => 'Previous image', 'next' => 'Next image'],
    'classList'       => ['c-modal--gallery'],
])
    @image(['src' => ''])
    @endimage
@endmodal

API

Parameter	Default	Description
heading		The title of the modal
slot		The main content of the modal
bottom		Extra slot at the bottom of the modal (below content)
overlay	light	-
isPanel	false	Removes padding, to enable a panel like behaviour. Cover whole page viewport.
id		A unique id which will be used to target the modal to open with the correct data-attr
animation	slide-up	Available animations: slide-up, slide-down, slide-left, slide-right.
navigation	false	Adds navigation arrows, to slide between stuff.
size		Empty as default is set to max width 800px. But you can use sm, md and lg
padding	3	Adds whitespace around the content. Value: 1 - 4
borderRadius	false	Rounded edges. Value: sm, md, lg
transparent	false	Transparent wrapper around the content
closeButtonText		Text for the close button. Default is empty

CSS API

Variable	Default	Type	Values	Description
--c-modal--base	var(--base)	range	-	Main unit that drives radius and spacing scales.
--c-modal--space	var(--space)	range	-	Base spacing unit. Used for padding and margin inside components.
--c-modal--border-width	var(--border-width)	range	-	Size
--c-modal--border-radius	var(--border-radius)	range	-	Border Radius
--c-modal--color--surface	var(--color--surface)	color	-	Surface
--c-modal--color--surface-alt	var(--color--surface-alt)	color	-	Manual companion token for subtle surface backgrounds.
--c-modal--color--alpha	var(--color--alpha)	rgba	-	Used for overlays. Includes opacity — set both color and alpha together.
--c-modal--color--surface-contrast	var(--color--surface-contrast)	color	-	Used for text and icons on surface backgrounds with less contrast.
--c-modal--corner-shape	var(--corner-shape)	select	square, round, squircle, circular, bevel, scoop	Corner Shape
--c-modal--shadow-color	var(--shadow-color)	rgba	-	Shadow Color
--c-modal--shadow-amount	var(--shadow-amount)	range	-	Multiplier for elevation shadows. 0 = none, 1 = default.
--c-modal--color--alpha-contrast	var(--color--alpha-contrast)	color	-	Used for text and icons on alpha overlays.
--c-modal--color--surface-border	var(--color--surface-border)	color	-	Manual companion token for borders on surface elements.
--c-modal--font-size-200	var(--font-size-200)	range	-	One step above base in the type scale. Equivalent to h6/subtitle.

Similar components

Gallery Modal Testimonials Code