Card

Flat surface

One item in a set of similar items — an episode, a product, a person — laid out as a box with an optional label, media and footer. For a single block of content use a Panel or a Section.

Basic

Blu-ray

Blu-ray Disc BOX

2019.09.25 発売

Episode

第1話 冴えない竹馬の友の口説きかた

2019.04.04 · 24:00

Staff

原作 丸戸史明 · キャラクター原案 深崎暮人

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

<template>
  <div class="row" style="align-items: flex-start; padding-top: 12px">
    <BlessCard label="Blu-ray" style="width: 240px">
      <template #media
        ><div style="height: 100px; background: var(--bless-color-surface-2)"
      /></template>
      <BlessText as="p" weight="bold">Blu-ray Disc BOX</BlessText>
      <BlessText as="p" size="sm" muted>2019.09.25 発売</BlessText>
      <template #footer><BlessButton size="sm">詳細</BlessButton></template>
    </BlessCard>
    <BlessCard label="Episode" href="#card" style="width: 240px">
      <BlessText as="p" weight="bold">第1話 冴えない竹馬の友の口説きかた</BlessText>
      <BlessText as="p" size="sm" muted>2019.04.04 · 24:00</BlessText>
    </BlessCard>
    <BlessCard surface="surface" :bordered="false" style="width: 240px">
      <BlessText as="p" weight="bold">Staff</BlessText>
      <BlessText as="p" size="sm" muted>原作 丸戸史明 · キャラクター原案 深崎暮人</BlessText>
    </BlessCard>
  </div>
</template>

• href makes the whole card one link, and everything in it becomes the link's name. So keep it short, and don't put buttons or other links inside a linked card; they can't be reached properly inside another link. If the card needs actions, leave href off and link the title instead.
• label is the tag on top — ink by default, and it leans with a linked card on hover; keep labelColor="accent" for a card that is chosen; surface and bordered set the box.

Usage

import { BlessCard } from "blessing-ui";

API

Props

Name	Type	Default	Description
as	string	"div"
label	string	—	skewed header label
labelColor	"text" | "accent" | "danger" | "surface"	"text"
surface	"surface" | "bg"	"bg"
bordered	boolean	true
href	string	—	whole card is a link

Slots

Name	Scope	Description
label	—
media	—
default	—
footer	—