Modal

Popup for important content and notifications.

Modal

Warning: The parameter "reverseIcon" is not recognized in the component "button" in /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php on line 231

Warning: The parameter "reverseIcon" is not recognized in the component "button" in /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php on line 231

Warning: The parameter "reverseIcon" is not recognized in the component "button" in /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php on line 231

Warning: The parameter "reverseIcon" is not recognized in the component "button" in /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php on line 231

Warning: The parameter "reverseIcon" is not recognized in the component "button" in /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php on line 231

<br />
<b>Warning</b>:  The parameter <b>"reverseIcon"</b> is not recognized in the component <b>"button"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>231</b><br />
<button class="c-button open-modal c-button__filled c-button__filled--secondary c-button--md" target="_top" data-open="modal-standard" type="filled" aria-label="Open standard modal" data-uid="673ed2b30b4a3">   
     <span class="c-button__label">         
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--favorite c-icon--material c-icon--material-favorite material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="favorite" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673ed2b30b565">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Open standard modal
            </span>
        
    </span> </button>
        <!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-modal c-modal--slide-up c-modal--padding-3 c-modal--overlay-light" aria-modal="true" aria-labelledby="modal__label__modal-standard" id="modal-standard" data-uid="673ed2b30b5ea">

    <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="673ed2b30b635">
    Example modal standard
</h2>                        <button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" target="_top" data-close="" type="button" aria-label="Close" data-uid="673ed2b30b66d">   
     <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 material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673ed2b30b6a1">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Close
            </span>
        
    </span> </button>    </div>

    <section class="c-modal__content" tabindex="2">

        
                        <br />
<b>Warning</b>:  Undefined variable $ariaLabels in <b>/tmp/blade-cache/42645fbe44200357ba1604629a45fa732c18cfd6.php</b> on line <b>38</b><br />
<br />
<b>Warning</b>:  Attempt to read property "prev" on null in <b>/tmp/blade-cache/42645fbe44200357ba1604629a45fa732c18cfd6.php</b> on line <b>38</b><br />
<br />
<b>Warning</b>:  The parameter <b>"label"</b> is not recognized in the component <b>"button"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>231</b><br />
<button class="c-button c-modal__prev c-button__basic c-button__basic--default c-button--lg c-button--icon-only" target="_top" data-prev="" aria-label="chevron_left" type="button" data-uid="673ed2b30b73d">   
     <span class="c-button__label">         
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--chevron-left c-icon--material c-icon--material-chevron_left material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" material-symbol="chevron_left" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673ed2b30b776">
                    </span>
            </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.

        
                        <br />
<b>Warning</b>:  Undefined variable $ariaLabels in <b>/tmp/blade-cache/42645fbe44200357ba1604629a45fa732c18cfd6.php</b> on line <b>57</b><br />
<br />
<b>Warning</b>:  Attempt to read property "next" on null in <b>/tmp/blade-cache/42645fbe44200357ba1604629a45fa732c18cfd6.php</b> on line <b>57</b><br />
<br />
<b>Warning</b>:  The parameter <b>"label"</b> is not recognized in the component <b>"button"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>231</b><br />
<button class="c-button c-modal__next c-button__basic c-button__basic--default c-button--lg c-button--icon-only" target="_top" data-next="" aria-label="chevron_right" type="button" data-uid="673ed2b30b7ef">   
     <span class="c-button__label">         
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--chevron-right c-icon--material c-icon--material-chevron_right material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" material-symbol="chevron_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673ed2b30b823">
                    </span>
            </span>
        
        
    </span> </button>            </section>

            <div class="c-modal__footer">
            [Bottom slot]
        </div>
    
                <!-- steppers.blade.php -->
<div class="c-steppers c-steppers--type-dots" data-uid="673ed2b30b875">
    
</div>    </dialog>
        <br />
<b>Warning</b>:  The parameter <b>"reverseIcon"</b> is not recognized in the component <b>"button"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>231</b><br />
<button class="c-button open-modal c-button__filled c-button__filled--secondary c-button--md" target="_top" data-open="modal-small" type="filled" aria-label="Open small modal" data-uid="673ed2b30b8c9">   
     <span class="c-button__label">         
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--favorite c-icon--material c-icon--material-favorite material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="favorite" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673ed2b30b8fe">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Open small modal
            </span>
        
    </span> </button>
        <!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-modal c-modal--slide-up c-modal--size-sm c-modal--padding-2 c-modal--border-radius-lg c-modal--overlay-light" aria-modal="true" aria-labelledby="modal__label__modal-small" id="modal-small" data-uid="673ed2b30b93d">

    <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="673ed2b30b969">
    Example modal small
</h2>                        <button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" target="_top" data-close="" type="button" aria-label="Close" data-uid="673ed2b30b998">   
     <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 material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673ed2b30b9c5">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Close
            </span>
        
    </span> </button>    </div>

    <section 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.

        
            </section>

            <div class="c-modal__footer">
            [Bottom slot]
        </div>
    
    </dialog>
        <br />
<b>Warning</b>:  The parameter <b>"reverseIcon"</b> is not recognized in the component <b>"button"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>231</b><br />
<button class="c-button open-modal c-button__filled c-button__filled--secondary c-button--md" target="_top" data-open="modal-medium" type="filled" aria-label="Open medium modal" data-uid="673ed2b30ba20">   
     <span class="c-button__label">         
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--favorite c-icon--material c-icon--material-favorite material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="favorite" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673ed2b30ba52">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Open medium modal
            </span>
        
    </span> </button>
        <!-- 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-modal="true" aria-labelledby="modal__label__modal-medium" id="modal-medium" data-uid="673ed2b30ba8f">

    <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="673ed2b30bab8">
    Example modal medium
</h2>                        <button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" target="_top" data-close="" type="button" aria-label="Close" data-uid="673ed2b30bb03">   
     <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 material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673ed2b30bb35">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Close
            </span>
        
    </span> </button>    </div>

    <section 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.

        
            </section>

            <div class="c-modal__footer">
            [Bottom slot]
        </div>
    
    </dialog>
        <br />
<b>Warning</b>:  The parameter <b>"reverseIcon"</b> is not recognized in the component <b>"button"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>231</b><br />
<button class="c-button open-modal c-button__filled c-button__filled--secondary c-button--md" target="_top" data-open="modal-large" type="filled" aria-label="Open large modal" data-uid="673ed2b30bb90">   
     <span class="c-button__label">         
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--favorite c-icon--material c-icon--material-favorite material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="favorite" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673ed2b30bbc1">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Open large modal
            </span>
        
    </span> </button>
        <!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-modal c-modal--slide-up c-modal--size-lg c-modal--padding-4 c-modal--border-radius-sm c-modal--overlay-light" aria-modal="true" aria-labelledby="modal__label__modal-large" id="modal-large" data-uid="673ed2b30bbfb">

    <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="673ed2b30bc24">
    Example modal large
</h2>                        <button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" target="_top" data-close="" type="button" aria-label="Close" data-uid="673ed2b30bc51">   
     <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 material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673ed2b30bc7d">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Close
            </span>
        
    </span> </button>    </div>

    <section 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.

        
            </section>

            <div class="c-modal__footer">
            [Bottom slot]
        </div>
    
    </dialog>
        <br />
<b>Warning</b>:  The parameter <b>"reverseIcon"</b> is not recognized in the component <b>"button"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>231</b><br />
<button class="c-button open-modal c-button__filled c-button__filled--secondary c-button--md" target="_top" data-open="modal-panel" type="filled" aria-label="Open panel modal" data-uid="673ed2b30bcd4">   
     <span class="c-button__label">         
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--favorite c-icon--material c-icon--material-favorite material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="favorite" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673ed2b30bd05">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Open panel modal
            </span>
        
    </span> </button>
        <!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-panel c-modal--slide-up c-modal--overlay-light" aria-modal="true" aria-labelledby="modal__label__modal-panel" id="modal-panel" data-uid="673ed2b30bd3e">

    <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="673ed2b30bd65">
    Example modal panel
</h2>                        <button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" target="_top" data-close="" type="button" aria-label="Close" data-uid="673ed2b30bda8">   
     <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 material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673ed2b30bdd8">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Close
            </span>
        
    </span> </button>    </div>

    <section 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.

        
            </section>

            <div class="c-modal__footer">
            [Bottom slot]
        </div>
    
    </dialog>

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

@foreach ($modals as $key => $modal)
    @button([
        'href' => '',
        'type' => 'filled',
        'text' => 'Open ' . $key . ' modal',
        'icon' => 'favorite',
        'size' => 'md',
        'color' => 'secondary',
        'reverseIcon' => true,
        'classList' => ['open-modal'],
        'attributeList' => ['data-open' => 'modal-' . $key],
    ])
    @endbutton

    @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('top')
            [Top slot]
        @endslot

        @slot('bottom')
            [Bottom slot]
        @endslot
    @endmodal
@endforeach

Blade component parameters

Key	Default value	Type	Available values	Description
heading		string	-	The title of the modal
slot		string	-	The main content of the modal
bottom		string	-	Extra slot at the bottom of the modal (below content)
overlay	light	string	-	-
isPanel	false	boolean	-	Removes padding, to enable a panel like behaviour. Cover whole page viewport.
id		string	-	A unique id which will be used to target the modal to open with the correct data-attr
animation	slide-up	string	-	Available animations: slide-up, slide-down, slide-left, slide-right.
navigation	false	boolean	-	Adds navigation arrows, to slide between stuff.
size		string	-	Empty as default is set to max width 800px. But you can use sm, md and lg
padding	3	integer	-	Adds whitespace around the content. Value: 1 - 4
borderRadius	false	boolean	-	Rounded edges. Value: sm, md, lg
transparent	false	boolean	-	Transparent wrapper around the content
closeButtonText		string	-	Text for the close button. Default is empty
id		string	-	The DOM id of the component.
classList	[]	array	-	Array containing wrapping classes array
attributeList	[]	array	-	Array containing keys and values rendered as attributes
containerAware	false	boolean	true/false	Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.

Settings location: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Modal/modal.json