Acceptance

The Acceptance component provides a reusable pattern for acceptance in the interface.

Acceptance: Known provider

Known providers will output a well-formed name if the provider, and include the providers privacy policy. Unknown will just output domain.

This is the title of a known website (Google). You can find their policy here: https://policies.google.com/privacy.

This is the information that is shown describing what accepting means.

<!-- acceptance.blade.php -->
<div class="c-acceptance js-suppressed-content u-level-1 c-acceptance--map js-suppressed-content--none" data-src="["https://google.com"]" style="height:500px" data-uid="69f0d0fa2c94d" data-component="acceptance">
    <div class="c-acceptance__modal js-suppressed-content-prompt">
        <div class="c-acceptance__modal-description js-suppressed-content-description">
                                <!-- typography.blade.php   original: h3 -->
<h2 class="c-typography c-acceptance__modal-title c-typography__variant--h3" data-uid="69f0d0fa2c9eb" data-component="typography">
    This is the title of a known website (Google). You can find their policy here: https://policies.google.com/privacy.
</h2>                    <!-- typography.blade.php   original: p -->
<p class="c-typography c-acceptance__modal-body c-typography__variant--p" data-uid="69f0d0fa2ca30" data-component="typography">
    This is the information that is shown describing what accepting means.
</p>                <div class="c-acceptance__modal-button">
                        <button class="c-button u-margin__y--3 c-button__filled c-button__filled--primary c-button--md" js-suppressed-content-accept="" type="button" aria-label="accept" data-uid="69f0d0fa2ca9f" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <span class="c-button__label-text ">
                accept
            </span>
        
    </span> </button>                </div>
                    </div>
    </div>
	
    <!-- Display after accept -->
    <div class="c-acceptance__content">
        <template>
            Hey! this is the content blocked. Javascript will not run until acceptance is received.
        </template>
    </div>
</div>

@acceptance([
    'labels' => [
		'knownLabels' => [
			'title' => 'This is the title of a known website ({SUPPLIER_WEBSITE}). You can find their policy here: {SUPPLIER_POLICY}.',
			'info' => 'This is the information that is shown describing what accepting means.',
			'button' => 'accept'
		],
		'unknownLabels' => [
			'title' => 'This is the content of a unknown website ({SUPPLIER_WEBSITE}).',
			'info' => 'This is the information that is shown describing what accepting means.',
			'button' => 'accept'
		]
	],
    "height"    => '500',
    "src"       => ['https://google.com'],
])
    Hey! this is the content blocked. Javascript will not run until acceptance is received.
@endacceptance

Acceptance: Video

Acceptance adapts to video URL's automatically to provide a familiar user interface.

<div style="position: relative;">
    <!-- acceptance.blade.php -->
<div class="c-acceptance u-ratio-16-9 js-suppressed-content u-level-1 c-acceptance--video js-suppressed-content--video" data-src="["https://www.youtube.com/watch?v=axiYo61XRRw"]" style="height:500px" data-uid="69f0d0fa2cdfd" data-component="acceptance">
    <div class="c-acceptance__modal js-suppressed-content-prompt">
        <div class="c-acceptance__modal-description js-suppressed-content-description">
                                <button class="c-button c-acceptance__modal-info c-button__basic c-button__basic--default c-button--md c-button--icon-only" data-open="modal-69f0d0fa2cdfd" aria-label="info" type="button" data-uid="69f0d0fa2ce4d" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--info c-icon--material c-icon--material-info material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="info" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d0fa2cfa4" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>
                    <button class="c-button c-acceptance__modal-icon-play c-button__basic c-button__basic--default c-button--xxxl c-button--icon-only" js-suppressed-content-accept="" aria-label="play_circle" type="button" data-uid="69f0d0fa2d004" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--play-circle c-icon--material c-icon--material-play_circle material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-inherit" aria-hidden="false" data-material-symbol="play_circle" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d0fa2d03a" data-component="icon">
                    </span>
            </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-dark" aria-labelledby="modal__label__modal-69f0d0fa2cdfd" aria-modal="true" role="dialog" id="modal-69f0d0fa2cdfd" data-uid="69f0d0fa2d0a9" 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-69f0d0fa2cdfd" data-uid="69f0d0fa2d0e1" data-component="typography">
    This is the title of a known website (YouTube). You can find their policy here: https://policies.google.com/privacy.
</h2>                        <button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg c-button--icon-only" data-close="" aria-label="close" type="button" data-uid="69f0d0fa2d12c" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <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" data-material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d0fa2d166" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>    </div>

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

        
        
        This is the information that is shown describing what accepting means.

        
            </div>

    
    </dialog>
                    </div>
    </div>
	
    <!-- Display after accept -->
    <div class="c-acceptance__content">
        <template>
            Hey! this is the content blocked. Javascript will not run until acceptance is received.
        </template>
    </div>
</div>
</div>

<div style="position: relative;">
@acceptance([
    'labels' => [
		'knownLabels' => [
			'title' => 'This is the title of a known website ({SUPPLIER_WEBSITE}). You can find their policy here: {SUPPLIER_POLICY}.',
			'info' => 'This is the information that is shown describing what accepting means.',
			'button' => 'accept'
		],
		'unknownLabels' => [
			'title' => 'This is the content of a unknown website ({SUPPLIER_WEBSITE}).',
			'info' => 'This is the information that is shown describing what accepting means.',
			'button' => 'accept'
		]
	],
    "modifier"  => 'video',
    "height"    => '500',
    "src"       => ['https://www.youtube.com/watch?v=axiYo61XRRw'],
    "classList" => ['u-ratio-16-9']
])
    Hey! this is the content blocked. Javascript will not run until acceptance is received.
@endacceptance
</div>

Acceptance: Map

Acceptance adapts to map URL's automatically to provide a familiar user interface.

This is the title of a known website (ArcGIS). You can find their policy here: https://www.esri.se/sv-se/integritet/gdpr.

This is the information that is shown describing what accepting means.

<!-- acceptance.blade.php -->
<div class="c-acceptance js-suppressed-content u-level-1 c-acceptance--map js-suppressed-content--none" data-src="["https://helsingborg.maps.arcgis.com/apps/Embed/index.html?webmap=5e2a37ce1fe649f78889205f484caafb&amp;extent=12.7047,56.0333,12.73,56.041&amp;home=true&amp;zoom=true&amp;scale=true&amp;search=true&amp;searchextent=false&amp;basemap_gallery=true&amp;disable_scroll=false&amp;theme=light"]" style="height:500px" data-uid="69f0d0fa2d4c0" data-component="acceptance">
    <div class="c-acceptance__modal js-suppressed-content-prompt">
        <div class="c-acceptance__modal-description js-suppressed-content-description">
                                <!-- typography.blade.php   original: h3 -->
<h3 class="c-typography c-acceptance__modal-title c-typography__variant--h3" data-uid="69f0d0fa2d508" data-component="typography">
    This is the title of a known website (ArcGIS). You can find their policy here: https://www.esri.se/sv-se/integritet/gdpr.
</h3>                    <!-- typography.blade.php   original: p -->
<p class="c-typography c-acceptance__modal-body c-typography__variant--p" data-uid="69f0d0fa2d53d" data-component="typography">
    This is the information that is shown describing what accepting means.
</p>                <div class="c-acceptance__modal-button">
                        <button class="c-button u-margin__y--3 c-button__filled c-button__filled--primary c-button--md" js-suppressed-content-accept="" type="button" aria-label="accept" data-uid="69f0d0fa2d577" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <span class="c-button__label-text ">
                accept
            </span>
        
    </span> </button>                </div>
                    </div>
    </div>
	
    <!-- Display after accept -->
    <div class="c-acceptance__content">
        <template>
            Hey! This should be a map!
        </template>
    </div>
</div>

@acceptance([
    'labels' => [
		'knownLabels' => [
			'title' => 'This is the title of a known website ({SUPPLIER_WEBSITE}). You can find their policy here: {SUPPLIER_POLICY}.',
			'info' => 'This is the information that is shown describing what accepting means.',
			'button' => 'accept'
		],
		'unknownLabels' => [
			'title' => 'This is the content of a unknown website ({SUPPLIER_WEBSITE}).',
			'info' => 'This is the information that is shown describing what accepting means.',
			'button' => 'accept'
		]
	],
    "height"    => '500',
    "src"       => ['https://helsingborg.maps.arcgis.com/apps/Embed/index.html?webmap=5e2a37ce1fe649f78889205f484caafb&amp;extent=12.7047,56.0333,12.73,56.041&amp;home=true&amp;zoom=true&amp;scale=true&amp;search=true&amp;searchextent=false&amp;basemap_gallery=true&amp;disable_scroll=false&amp;theme=light'],
])
    Hey! This should be a map!
@endacceptance

API

Parameter	Default	Description
labels	false	Object or array containing knownLabels and unknownLabels with title, info, and button
height	false	height in number ex 500
src	false	array of urls to hide ex. https://www.youtube.com
policy	false	URL to third party website policy
host	false	host ex. youtube.com
name	false	name of the host
icon	info	Icon name as a string.
cover	false	URL for background image
modifier		Modifier variable ex. video
requiresAccept	true	Whether user-acceptance is required or not

CSS API

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

Similar components

Textarea Accordion Date Badge