Watermark

Giant faint word behind a block

The giant, faint word behind a section — NEWS, STAFF — from the source site's look. Pure decoration: it's hidden from screen readers, so never put anything in it that isn't also said in the content.

Basic

NEWS

Episode 3 airs this week

2019.04.18 · 24:00

<script setup lang="ts">
import { BlessText, BlessWatermark } from "blessing-ui";
</script>

<template>
  <div style="position: relative; overflow: hidden; padding: 48px 24px; max-width: 560px">
    <BlessWatermark text="NEWS" />
    <BlessText as="p" weight="bold">Episode 3 airs this week</BlessText>
    <BlessText as="p" size="sm" muted>2019.04.18 · 24:00</BlessText>
  </div>
</template>

• It fills its nearest positioned parent (position: relative); position picks the corner. Section draws one for you with watermark.

Usage

import { BlessWatermark } from "blessing-ui";

API

Props

Name	Type	Default	Description
text*	string	—
position	"top-right" | "top-left" | "bottom-right" | "bottom-left"	"top-right"