Watermark

---
import { Watermark } from '@santi020k/lumen-astro'
---

<Watermark content="Draft">
  <div style="height: 200px; background: var(--ui-surface);">Protected content</div>
</Watermark>

import type { CSSProperties } from 'react'
import { Watermark } from '@santi020k/lumen-react'

const exampleStyle0: CSSProperties & Record<`--${string}`, string | number> = { "height": "200px", "background": "var(--ui-surface)" }

export const Example = () => (
  <>
    <Watermark content="Draft">
      <div style={exampleStyle0}>Protected content</div>
    </Watermark>
  </>
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<lumen-watermark content="Draft">
  <div style="height: 200px; background: var(--ui-surface);">Protected content</div>
</lumen-watermark>