Gate

Demos

Gate is a consent overlay that blocks embedded content until the user takes an action; it renders an optional heading, content and action.

Default

Fullscreen
import { CtaButton, Gate } from 'marketing-ui'

function Demo() {
  return (
    <Gate
      heading={
        <span className='copy'>
          <strong>Content blocked</strong>
        </span>
      }
      content={
        <span className='small'>
          Please accept marketing cookies to view this content.
        </span>
      }
      action={
        <CtaButton size='tiny' href='#js-consent-open'>
          Accept
        </CtaButton>
      }
    />
  )
}

export default Demo

Props