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.

<div class="c-acceptance js-suppressed-content u-level-1 c-acceptance--map js-suppressed-content--none" data-src="[&quot;https://google.com&quot;]" style="height:500px" 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-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-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-component=
        "button"><span class="c-button__label"><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="[&quot;https://www.youtube.com/watch?v=axiYo61XRRw&quot;]" style=
  "height:500px" 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-6aaefbc0ab0cd" aria-label="info" type="button"
        data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
         </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-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
         </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-6aaefbc0ab0cd" aria-modal="true" role="dialog" id=
        "modal-6aaefbc0ab0cd" 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-6aaefbc0ab0cd" 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-component=
            "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
             </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.

<div class="c-acceptance js-suppressed-content u-level-1 c-acceptance--map js-suppressed-content--none" data-src=
"[&quot;https://helsingborg.maps.arcgis.com/apps/Embed/index.html?webmap=5e2a37ce1fe649f78889205f484caafb&amp;amp;extent=12.7047,56.0333,12.73,56.041&amp;amp;home=true&amp;amp;zoom=true&amp;amp;scale=true&amp;amp;search=true&amp;amp;searchextent=false&amp;amp;basemap_gallery=true&amp;amp;disable_scroll=false&amp;amp;theme=light&quot;]"
style="height:500px" 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-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-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-component=
        "button"><span class="c-button__label"><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	Type	Description
labels	false	object\|array\|boolean	-
height	false	string\|boolean	-
src	false	array\|boolean	-
policy	false	string\|boolean	-
host	false	string\|boolean	-
name	false	string\|boolean	-
icon	info	string	-
cover	false	string\|boolean	-
modifier		string	-
requiresAccept	true	boolean	-

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