Skip to content
fandhe-frontendcore v0.4.3
GitHub

Card

fandhe-frontend-pre-styled-ui の card mod が提供するスタイル済み Card 部品です。

関連情報をひとまとめに表示するレイアウトコンテナです。header/body/footer/title/description/action/cover の 8 パーツを組み合わせて構造化できます（action/cover はイシュー #2046 で shadcn/ui 突合により純追加）。純粋なレイアウト部品のため role/aria-* は付与しません。

variant（elevated/outline/subtle）に加え、size（xs〜xl、既定 md）で padding・角丸・title の文字サイズが連動して変化します（chakra-ui/Radix Themes の Card を参考にした調整）。size sm 相当（shadcn/ui の size="sm"）はこの 5 段の size 軸で包含済みのため別軸を追加していません。header/footer の区切り線は既定では持たず（chakra-ui/Radix Themes 準拠）、padding のみで段を分けます。

header へ data-has-action を付けると grid 化され、action パーツ（shadcn/ui CardAction 相当）が右上へ配置されます。cover パーツへ image::image を子として渡すと、上端の角が root の角丸に沿ってクリップされる cover image 枠になります。header/footer へ data-bordered を付けると、shadcn/ui の Header/Footer with Border 相当の 1px 区切り線が opt-in で表示されます（既定の区切り線なしは変わりません）。

関連 API: fandhe-frontend-pre-styled-ui API

Demo

variant（elevated / outline / subtle）・size（xs〜xl、padding / 角丸 / title の文字サイズが連動）を持つ装飾的コンテナ。イシュー #2046 で action（header 右上スロット）・cover（cover image 枠）・data-bordered（区切り線 opt-in）を shadcn/ui 突合により純追加した。border-beam（イシュー #2531）は card 専用ではなく任意要素へ外側からラップして付与できる opt-in 装飾で、card はその実演例です。

Elevated

card variant のデモです。

header / body / footer / title / description の slot 構成を持つ汎用コンテナです。

Outline

card variant のデモです。

header / body / footer / title / description の slot 構成を持つ汎用コンテナです。

Subtle

card variant のデモです。

header / body / footer / title / description の slot 構成を持つ汎用コンテナです。

Xs

size デモです。

Sm

size デモです。

Md

size デモです。

Lg

size デモです。

Xl

size デモです。

Team plan

action パーツのデモです。

header に data-has-action を付けると action が右上へ配置されます。
cover パーツのデモ画像

Cover image

cover に image::image を子として渡す合成パターンです。

Sign in

data-bordered footer のデモです。

Pro plan

border-beam（イシュー #2531）は任意要素へ外側からラップして付与する opt-in 装飾です。

Features

  • CardVariant（Elevated/Outline/Subtle、crates/pre-styled-ui/src/card.rs:80-106 付近）で見た目を切り替える
  • size（xs〜xl）で padding / 角丸 / title の文字サイズが root の --fandhe-card-* custom property を通じて連動する（イシュー #1557。shadcn/ui の size="default"/"sm" はこの 5 段で包含済みと判断し変更していない、イシュー #2046）
  • header/body/footer/title/description/action/cover の 8 パーツでレイアウトを構造化する（action/cover はイシュー #2046 で shadcn/ui 突合により純追加）
  • header へ data-has-action を渡すと grid 化され、action が右上 2 行にまたがって配置される（shadcn/ui CardAction 相当、イシュー #2046）
  • cover へ image::image を子として渡すと cover image 枠になる（上端 2 角のみ root の角丸に沿ってクリップする、イシュー #2046）
  • header/footer へ data-bordered を渡すと 1px の区切り線が付く opt-in 状態（既定は #1557 のとおり区切り線なし、イシュー #2046）
  • body/footer へ data-subtle を渡すと淡色背景の帯が付く opt-in 状態（既定は帯なし、イシュー #3127）
  • 純粋なレイアウトコンテナのため role/aria-* は付与しない（card.rs 冒頭）

Anatomy

root
  header
    title
    description
  body
  footer
    action
  cover

API Reference

Arguments

NameTypeDefaultDescription
variantCardVariantOutline見た目（#[default] は Outline）。
sizeSizeMdサイズ。padding / 角丸 / title の文字サイズが連動する（root の --fandhe-card-*、イシュー #1557）。

Data Attributes

PartAttributeObserved Values
footerdata-bordered（値なし）
headerdata-has-action（値なし）

CSS Variables

VariableDefault
--fandhe-card-paddingvar(--fandhe-space-4)
--fandhe-card-radiusvar(--fandhe-radius-lg)
--fandhe-card-title-font-sizevar(--fandhe-font-font-size-lg)

Examples

Elevated card

header/body/footer を組み合わせた Elevated variant の例です。

Title

Body
Footer

Card with action

header に data-has-action を付け action（button）を右上へ配置する例です。

Team plan

3 members

Card with cover image

cover パーツへ image::image を子として渡す合成パターンです。

cover image

Cover image

footer に data-bordered を付け 1px の区切り線を出す例です。

Sign in

Email / Password フォームです。

footer に data-subtle を付け淡色背景の帯を出す例です。

Sign in

Email / Password フォームです。

Card with subtle body

body（最後の子）に data-subtle を付け淡色背景の帯を出す例です。

Summary

淡色帯の body です。

Accessibility

WAI-ARIA

AttributeDescription
(該当なし)純粋なレイアウトコンテナであり role/aria-* を付与しない（card.rs 冒頭）。