Section

Titled block with giant skewed word

A titled region of a page — News, Staff, Story — in the system's voice: a small upright label or a hanging headline, and optionally the giant faint word behind it. Use one per top-level part of a page; for a titled box inside a section, Panel.

Basic

News

News

2019.04.04 NEW! Blu-ray Disc BOX 発売決定

watermark defaults to the title, top-right

Staff & Cast

スタッフ・キャスト

原作 丸戸史明

<script setup lang="ts">
import { BlessBadge, BlessDash, BlessSection, BlessSkew, BlessText } from "blessing-ui";
</script>

<template>
  <div class="col" style="max-width: none">
    <BlessSection title="News" class="boxed">
      <BlessText as="p">2019.04.04<BlessDash /><BlessBadge /> Blu-ray Disc BOX 発売決定</BlessText>
      <BlessText as="p" muted size="sm">watermark defaults to the title, top-right</BlessText>
    </BlessSection>
    <BlessSection
      title="スタッフ・キャスト"
      watermark="Staff & Cast"
      watermark-position="bottom-left"
      :heading-level="3"
      class="boxed"
    >
      <BlessText as="p"><BlessSkew color="text" label>原作</BlessSkew> 丸戸史明</BlessText>
    </BlessSection>
  </div>
</template>

Hanging headline

Character登場人物

サークルってさ、辛いことも、
悲しいこともあるけど……
それでも、これからも続けるよ

企画サブディレクターメインヒロイン

加藤 恵

Megumi Kato

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

<template>
  <BlessSection title="Character" subtitle="登場人物" headline="hanging">
    <template #band>
      <!-- the key visual goes here; a gradient stands in -->
      <div class="kv" />
    </template>
    <div class="profile">
      <BlessText as="p" weight="bold" class="quote"
        >サークルってさ、辛いことも、<br />悲しいこともあるけど……<br />それでも、これからも続けるよ</BlessText
      >
      <p class="tags">
        <BlessBadge variant="outline">企画</BlessBadge>
        <BlessBadge variant="outline">サブディレクター</BlessBadge>
        <BlessBadge variant="outline">メインヒロイン</BlessBadge>
      </p>
      <BlessText as="p" size="lg" weight="bold">加藤 恵</BlessText>
      <BlessText as="p" size="xs" muted tracking="wider">Megumi Kato</BlessText>
    </div>
  </BlessSection>
</template>

<style scoped>
.kv {
  height: 100%;
  background: linear-gradient(160deg, #2a4a8a, #6a8ad0 60%, #c9d6f0);
}
.profile {
  max-width: 420px;
  margin-inline-start: auto;
}
.quote {
  font-size: var(--bless-text-lg);
  line-height: 1.7;
  margin-bottom: var(--bless-space-4);
}
.tags {
  display: flex;
  gap: var(--bless-space-2);
  flex-wrap: wrap;
  margin: 0 0 var(--bless-space-4);
}
</style>

Two headline voices. label (default) is the TV site: a small bold uppercase title with the pale skewed watermark behind. headline="hanging" is the film site: one big tracked title hung off the bottom edge of the #band slot — a key visual, a colour, anything 200px tall — with subtitle in tracked muted type under it. Without a band the hanging title simply sits in flow; the watermark is off in this mode.

Usage

import { BlessSection, BlessWatermark } from "blessing-ui";

API

BlessSection

Props

Name	Type	Default	Description
title	string	—
watermark	string	—	watermark text; defaults to title. Pass "" to hide
watermarkPosition	"top-right" | "top-left" | "bottom-right" | "bottom-left"	—
headingLevel	1 | 2 | 3 | 4	2
headline	"label" | "hanging"	"label"	`label` (default): small bold uppercase title + pale skewed watermark — the TV site. `hanging`: one big tracked title hung off the bottom edge of the `#band` slot, with `subtitle` under it — the film site. No watermark.
subtitle	string	—	small tracked line under a hanging headline (e.g. the Japanese reading)

Slots

Name	Scope	Description
band	—
title	—
default	—

BlessWatermark

Props

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