# `PhiaUi.Components.Watermark`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/media/watermark.ex#L1)

Watermark — repeating text overlay using an inline SVG `<pattern>`.

Inspired by Ant Design `Watermark`. Uses no JavaScript and no external URIs.
Each instance generates a unique pattern ID via `:crypto` to avoid `<pattern>`
ID collisions when multiple watermarks appear on the same page.

## Examples

    <.watermark content="CONFIDENTIAL">
      <img src="/report.png" class="w-full" />
    </.watermark>

    <.watermark content="Draft" opacity="0.08" rotate={-45} font_size="20px">
      <div class="p-8">Document content here</div>
    </.watermark>

# `watermark`

## Attributes

* `content` (`:string`) (required) - Watermark text to repeat across the area.
* `gap` (`:integer`) - Spacing between watermark tiles (px). Defaults to `100`.
* `rotate` (`:integer`) - Rotation angle in degrees. Defaults to `-30`.
* `opacity` (`:string`) - CSS opacity value (0.0–1.0). Defaults to `"0.12"`.
* `font_size` (`:string`) - CSS font size of the watermark text. Defaults to `"16px"`.
* `class` (`:string`) - Additional CSS classes for the root element. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root `<div>`.
## Slots

* `inner_block` (required) - Content to be watermarked.

---

*Consult [api-reference.md](api-reference.md) for complete listing*