Item

Media + title + description + actions

One row of a list: something on the left (#media — an icon, an avatar, a cover), a title with an optional description and free content, and #actions on the right. Three surfaces: plain, outline, surface; size="sm" for dense lists.

Three kinds of row. Static (default) — content only. Link (href) — the whole row is an <a> (or your router's link), so #actions must stay non-interactive: an arrow, a badge, a date; a button inside a link is invalid and unreachable. Button (button) — the whole row is a <button>: the selectable-row pattern of an inbox or a picker, with Enter and Space for free; the Inbox block is this. Need real buttons on a static row? Put the link on the title with #title instead of href.

The date — title news row is ListItem inside a BlessList; a box with media above is Card.

Basic

▶第1話 — 冴えないヒロインの育てかた24:00 · 2019.04.04

📀Blu-ray BOXPre-order open→

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

<template>
  <div class="col" style="max-width: 480px">
    <BlessItem title="第1話 — 冴えないヒロインの育てかた" description="24:00 · 2019.04.04">
      <template #media>▶</template>
      <template #actions><BlessButton size="sm" variant="outline">Play</BlessButton></template>
    </BlessItem>
    <BlessItem variant="outline" title="Blu-ray BOX" description="Pre-order open" href="#">
      <template #media>📀</template>
      <template #actions>→</template>
    </BlessItem>
    <BlessItem
      variant="surface"
      size="sm"
      button
      title="Staff"
      description="Original: 丸戸史明 · open the credits"
    />
  </div>
</template>

Usage

import { BlessItem } from "blessing-ui";

API

Props

Name	Type	Default	Description
title	string	—
description	string	—
href	string	—	renders <a> when set — then keep #actions non-interactive
button	boolean	—	the whole row is a <button>: a selectable row (an inbox, a picker)
variant	"surface" | "outline" | "plain"	"plain"
size	"md" | "sm"	"md"

Slots

Name	Scope	Description
media	—
title	—
description	—
default	—
actions	—