カードを使ってコンテンツの視覚的なコンテナを作成します。カードは柔軟なコンテナで、テキストやアイコン、画像、リンクを含められます。

​
基本のカード

Card title

アイコンとリンク付きのカードの使い方を示します。このカードをクリックすると Columns ページに移動します。
Card example
<Card title="Card title" icon="text" href="/components/columns">
  アイコンとリンク付きのカードの使い方を示します。このカードをクリックすると
  Columns ページに移動します。
</Card>

​
カードのバリエーション

カードは、さまざまなコンテンツのニーズに合わせて、多様なレイアウトやスタイルのオプションに対応しています。

​
水平レイアウト

カードをよりコンパクトな水平レイアウトで表示するには、horizontal プロパティを追加します。

水平カード

これは水平カードの例です。
Horizontal card example
<Card title="Horizontal card" icon="text" horizontal>
  This is an example of a horizontal card.
</Card>

​
画像カード

カード上部に画像を表示するには、img プロパティを追加します。
yosemite

Image card

これは画像付きカードの例です。
Image card example
<Card title="Image card" img="/images/card-with-image.png">
  これは画像付きカードの例です。
</Card>
CTAテキストをカスタマイズし、矢印を表示するかどうかを制御できます。デフォルトでは、矢印は外部リンクにのみ表示されます。

Link card

これはアイコンとリンクを含むカードの例です。このカードをクリックすると、Columnsページに移動します。
Link card example
<Card
  title="Link card"
  icon="link"
  href="/components/columns"
  arrow="true"
  cta="Click here"
>
  これはアイコンとリンクを含むカードの例です。このカードをクリックすると、Columnsページに移動します。
</Card>

​
カードのグルーピング

複数のカードを横並びで整理するには、Columns コンポーネントを使用します。

First card

これは最初のカードです。

Second card

これは2番目のカードです。
Columns example
<Columns cols={2}>
  <Card title="First card" icon="panel-left-close">
    これは最初のカードです。
  </Card>
  <Card title="Second card" icon="panel-right-close">
    これは2番目のカードです。
  </Card>
</Columns>

​
プロパティ

​
title
string
required
カードに表示されるタイトル
​
icon
string
表示するアイコン。オプション:
  • Font Awesome icon の名前
  • Lucide icon の名前
  • 中括弧で囲んだ JSX 互換の SVG コード
  • 外部でホストされているアイコンへの URL
  • プロジェクト内のアイコンファイルへのパス
カスタム SVG アイコンの場合:
  1. SVGR converter を使って SVG を変換します。
  2. SVG コードを SVG の入力フィールドに貼り付けます。
  3. JSX の出力フィールドから完全な <svg>...</svg> 要素をコピーします。
  4. JSX 互換の SVG コードを中括弧で囲みます: icon={<svg ...> ... </svg>}。
  5. 必要に応じて height と width を調整します。
​
iconType
string
Font Awesome のアイコンスタイル。Font Awesome のアイコンでのみ使用されます。オプション: regular, solid, light, thin, sharp-solid, duotone, brands。
​
color
string
アイコンの色（例: #FF6B6B のような16進数コード）
​
href
string
カードをクリックしたときに遷移するURL
​
horizontal
boolean
カードをコンパクトな横向きレイアウトで表示
​
img
string
カード上部に表示する画像へのURLまたはローカルパス
​
cta
string
アクションボタンのカスタムテキスト
​
arrow
boolean
リンクの矢印アイコンを表示するか非表示にする