Modal
Popup for important content and notifications.
Modal
<button id="61efa265a4bd74.31608185" class="c-button c-button__filled c-button__filled--secondary c-button--md ripple ripple--before" href="" target="_top" data-open="modal-standard" type="filled" aria-pressed="false" data-uid="61efa265a4bf6">
<span class="c-button__label">
<span class="c-button__label-text">
Open standard modal
</span>
<span class="c-button__label-icon">
<!-- icon.blade.php -->
<i id="61efa265a4cc3" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa265a4cbe">
favorite
</i>
</span>
</span>
</button>
<!-- modal.blade.php -->
<div id="modal-standard" class="c-modal__bg c-modal__bg__animation--slide-down" role="dialog" aria-modal="true" aria-labelledby="modal__label__modal-standard">
<div class="c-modal c-modal--is-modal c-modal--padding-3 c-modal--overlay-light" data-uid="61efa265a4daa">
<div class="c-modal__top">
[Top slot]
</div>
<header class="c-modal__header">
<!-- typography.blade.php -->
<h2 id="modal__label__modal-standard" class="c-typography c-typography__variant--h2" data-uid="61efa265a4e3d">
Example modal standard
</h2>
<button id="61efa265a4e966.63810257" class="c-button c-modal__close c-button__basic c-button__basic--default c-button__icon-size--xl ripple ripple--before c-button--icon-only" href="" target="_top" data-close="" type="button" aria-pressed="false" data-uid="61efa265a4eab">
<span class="c-button__label">
<!-- icon.blade.php -->
<i id="61efa265a4f0a" class="c-icon c-icon--size-xl material-icons" translate="no" role="img" alt="" data-uid="61efa265a4f06">
close
</i>
</span>
</button> </header>
<section class="c-modal__content">
<button id="61efa265a4f501.58584801" class="c-button c-modal__prev c-button__basic c-button__basic--default c-button__icon-size--lg ripple ripple--before c-button--icon-only" href="" target="_top" data-prev="" type="button" aria-pressed="false" data-uid="61efa265a4f62">
<span class="c-button__label">
<!-- icon.blade.php -->
<i id="61efa265a4fb1" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efa265a4fae">
chevron_left
</i>
</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 id="61efa265a50031.16916819" class="c-button c-modal__next c-button__basic c-button__basic--default c-button__icon-size--lg ripple ripple--before c-button--icon-only" href="" target="_top" data-next="" type="button" aria-pressed="false" data-uid="61efa265a5010">
<span class="c-button__label">
<!-- icon.blade.php -->
<i id="61efa265a5058" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efa265a5055">
chevron_right
</i>
</span>
</button> </section>
<footer class="c-modal__footer">
[Bottom slot]
</footer>
<!-- card.blade.php -->
<div id="61efa265a52fa" class="c-steppers c-steppers--type-dots" data-uid="61efa265a52f5">
</div>
</div>
</div>
<button id="61efa265a552c5.66333136" class="c-button c-button__filled c-button__filled--secondary c-button--md ripple ripple--before" href="" target="_top" data-open="modal-small" type="filled" aria-pressed="false" data-uid="61efa265a553b">
<span class="c-button__label">
<span class="c-button__label-text">
Open small modal
</span>
<span class="c-button__label-icon">
<!-- icon.blade.php -->
<i id="61efa265a558f" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa265a558b">
favorite
</i>
</span>
</span>
</button>
<!-- modal.blade.php -->
<div id="modal-small" class="c-modal__bg c-modal__bg__animation--slide-down" role="dialog" aria-modal="true" aria-labelledby="modal__label__modal-small">
<div class="c-modal c-modal--is-modal c-modal--size-sm c-modal--padding-2 c-modal--border-radius-lg c-modal--overlay-light" data-uid="61efa265a5601">
<div class="c-modal__top">
[Top slot]
</div>
<header class="c-modal__header">
<!-- typography.blade.php -->
<h2 id="modal__label__modal-small" class="c-typography c-typography__variant--h2" data-uid="61efa265a564a">
Example modal small
</h2>
<button id="61efa265a568c6.81287183" class="c-button c-modal__close c-button__basic c-button__basic--default c-button__icon-size--xl ripple ripple--before c-button--icon-only" href="" target="_top" data-close="" type="button" aria-pressed="false" data-uid="61efa265a569a">
<span class="c-button__label">
<!-- icon.blade.php -->
<i id="61efa265a56e4" class="c-icon c-icon--size-xl material-icons" translate="no" role="img" alt="" data-uid="61efa265a56e1">
close
</i>
</span>
</button> </header>
<section class="c-modal__content">
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>
<footer class="c-modal__footer">
[Bottom slot]
</footer>
</div>
</div>
<button id="61efa265a57305.58690091" class="c-button c-button__filled c-button__filled--secondary c-button--md ripple ripple--before" href="" target="_top" data-open="modal-medium" type="filled" aria-pressed="false" data-uid="61efa265a573c">
<span class="c-button__label">
<span class="c-button__label-text">
Open medium modal
</span>
<span class="c-button__label-icon">
<!-- icon.blade.php -->
<i id="61efa265a5786" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa265a5783">
favorite
</i>
</span>
</span>
</button>
<!-- modal.blade.php -->
<div id="modal-medium" class="c-modal__bg c-modal__bg__animation--slide-down" role="dialog" aria-modal="true" aria-labelledby="modal__label__modal-medium">
<div class="c-modal c-modal--is-modal c-modal--size-md c-modal--padding-3 c-modal--border-radius-md c-modal--overlay-light" data-uid="61efa265a57d6">
<div class="c-modal__top">
[Top slot]
</div>
<header class="c-modal__header">
<!-- typography.blade.php -->
<h2 id="modal__label__modal-medium" class="c-typography c-typography__variant--h2" data-uid="61efa265a581a">
Example modal medium
</h2>
<button id="61efa265a58594.70561143" class="c-button c-modal__close c-button__basic c-button__basic--default c-button__icon-size--xl ripple ripple--before c-button--icon-only" href="" target="_top" data-close="" type="button" aria-pressed="false" data-uid="61efa265a5866">
<span class="c-button__label">
<!-- icon.blade.php -->
<i id="61efa265a58ae" class="c-icon c-icon--size-xl material-icons" translate="no" role="img" alt="" data-uid="61efa265a58ab">
close
</i>
</span>
</button> </header>
<section class="c-modal__content">
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>
<footer class="c-modal__footer">
[Bottom slot]
</footer>
</div>
</div>
<button id="61efa265a58f85.27867282" class="c-button c-button__filled c-button__filled--secondary c-button--md ripple ripple--before" href="" target="_top" data-open="modal-large" type="filled" aria-pressed="false" data-uid="61efa265a5904">
<span class="c-button__label">
<span class="c-button__label-text">
Open large modal
</span>
<span class="c-button__label-icon">
<!-- icon.blade.php -->
<i id="61efa265a594e" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa265a594b">
favorite
</i>
</span>
</span>
</button>
<!-- modal.blade.php -->
<div id="modal-large" class="c-modal__bg c-modal__bg__animation--slide-down" role="dialog" aria-modal="true" aria-labelledby="modal__label__modal-large">
<div class="c-modal c-modal--is-modal c-modal--size-lg c-modal--padding-4 c-modal--border-radius-sm c-modal--overlay-light" data-uid="61efa265a599e">
<div class="c-modal__top">
[Top slot]
</div>
<header class="c-modal__header">
<!-- typography.blade.php -->
<h2 id="modal__label__modal-large" class="c-typography c-typography__variant--h2" data-uid="61efa265a59e2">
Example modal large
</h2>
<button id="61efa265a5a1f2.31808739" class="c-button c-modal__close c-button__basic c-button__basic--default c-button__icon-size--xl ripple ripple--before c-button--icon-only" href="" target="_top" data-close="" type="button" aria-pressed="false" data-uid="61efa265a5a2c">
<span class="c-button__label">
<!-- icon.blade.php -->
<i id="61efa265a5a74" class="c-icon c-icon--size-xl material-icons" translate="no" role="img" alt="" data-uid="61efa265a5a70">
close
</i>
</span>
</button> </header>
<section class="c-modal__content">
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>
<footer class="c-modal__footer">
[Bottom slot]
</footer>
</div>
</div>
<button id="61efa265a5abc8.90830230" class="c-button c-button__filled c-button__filled--secondary c-button--md ripple ripple--before" href="" target="_top" data-open="modal-panel" type="filled" aria-pressed="false" data-uid="61efa265a5ac8">
<span class="c-button__label">
<span class="c-button__label-text">
Open panel modal
</span>
<span class="c-button__label-icon">
<!-- icon.blade.php -->
<i id="61efa265a5b11" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa265a5b0d">
favorite
</i>
</span>
</span>
</button>
<!-- modal.blade.php -->
<div id="modal-panel" class="c-modal__bg c-modal__bg__animation--slide-up" role="dialog" aria-modal="true" aria-labelledby="modal__label__modal-panel">
<div class="c-modal c-modal--is-panel c-modal--overlay-light" data-uid="61efa265a5b62">
<div class="c-modal__top">
[Top slot]
</div>
<header class="c-modal__header">
<!-- typography.blade.php -->
<h2 id="modal__label__modal-panel" class="c-typography c-typography__variant--h2" data-uid="61efa265a5ba8">
Example modal panel
</h2>
<button id="61efa265a5be58.84112585" class="c-button c-modal__close c-button__basic c-button__basic--default c-button__icon-size--xl ripple ripple--before c-button--icon-only" href="" target="_top" data-close="" type="button" aria-pressed="false" data-uid="61efa265a5bf2">
<span class="c-button__label">
<!-- icon.blade.php -->
<i id="61efa265a5c39" class="c-icon c-icon--size-xl material-icons" translate="no" role="img" alt="" data-uid="61efa265a5c36">
close
</i>
</span>
</button> </header>
<section class="c-modal__content">
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>
<footer class="c-modal__footer">
[Bottom slot]
</footer>
</div>
</div>@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,
'attributeList' => ['data-open' => 'modal-' . $key]
]
)
@endbutton
@modal(array_merge([
'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
@endforeachBlade component parameters
| Key | Default value | Type | Available values | Description |
| heading | string | - | The title of the modal | |
| slot | string | - | The main content of the modal | |
| top | string | - | Extra slot at the top of the modal (above title) | |
| 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 | string | - | Which animation to use when opening and closing the modal. | |
| 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 |
| 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. |