> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-card.md).

# AX - カード

## 概要

**AX - カード** は、Experience Sites ページ上で、コンテンツをまとまった視覚的に構造化された形式で表示する Experience Cloud コンポーネントです。

製品詳細、ユーザープロフィール、記事、リソース、または視覚的な区分けが有効なあらゆるコンテンツのように、整理されたブロックで情報を提示するために使用します。カード内には任意の Experience Cloud コンポーネントをドラッグ＆ドロップしてコンテンツを作成し、Experience Builder でスタイル、ヘッダー、フッターを設定できます。

製品カタログ、リソースライブラリ、チームメンバープロフィール、記事のプレビュー、またはポータルコンテンツに明確な視覚的整理と区切りが必要なあらゆる場面に最適です。

{% hint style="danger" %}
このコンポーネントは [スロットを活用し](/experience-cloud/experience-cloud-ja/hajimeni/learning-the-basics.md#understanding-slots) 高度なカスタマイズが可能で、LWR サイトに最適です。Aura サイトでは、このレベルのカスタマイズはサポートされていません。
{% endhint %}

<figure><img src="/files/8a1b56e7af45a537ec5dc2cd6efaddbdaa6cc720" alt="" width="563"><figcaption></figcaption></figure>

## Avonni Card の設定

### カードタイトルを追加

Avonni Card に分かりやすく情報量のあるタイトルを付けて、ユーザーが内容をすばやく識別できるようにします。手順は次のとおりです。

* **「Card Title」属性を探します：** この設定は、Experience Cloud サイトビルダー内の Avonni Card コンポーネントの設定オプションにあります。
* **タイトルを入力します：** タイトルとして表示したいテキストを入力します。簡潔で説明的にしてください。
* **配置：** タイトルは自動的に Avonni Card の左側に表示され、視覚的な基準点になります。

**例：**

Avonni Card に製品情報を表示する場合、カードタイトルとして「場所」を使用できます。

### ヘッダーを表示

「Show Header」属性を有効にすると、Avonni Card の右上に汎用的なコンテナを追加できます。これにより、次のことが可能になります。

* **カードの内容をカスタマイズ：** ボタン、アイコン、追加テキストなどの他のコンポーネントを、ヘッダー内に直接ドラッグ＆ドロップできます。
* **柔軟なレイアウトを作成：** ヘッダー内の要素を配置して、カードの見た目と機能を理想的に仕上げられます。

**例：** 顧客アカウントページに「新規ケースを作成」ボタンを追加します。このボタンをクリックすると、フローのダイアログが起動し、新しいサポートケースの送信と必要な情報の収集をユーザーに案内します。

### フッターを表示

このオプションを有効にすると、Avonni Card の下部にフッターセクションが追加されます。提供されているフッタースロットを使用して、リンク、ボタン、追加テキストなどを配置できます。

### コンテンツの内側余白

カード内のコンテンツ周辺の間隔を調整します。この設定を使って、コンテンツを枠にぴったり寄せたより詰まったレイアウトにしたり、余白を広めに取ったりできます。

## チュートリアル

| 名前                                                                                                                      | 説明                                                       |
| ----------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
| [**MapCard ショーケースの作成**](/experience-cloud/experience-cloud-ja/chtoriaru/components/card/creating-a-mapcard-showcase.md) | Avonni Card と Map コンポーネントを使って MapCard ショーケースを作成する方法を学びます |

## 外観

### **サイズ**

* **幅：** カードの横幅を制御します。固定幅（ピクセル、パーセンテージ）を使用することも、コンテンツやコンテナのサイズに合わせてカードを自動調整することもできます。
* **高さ：** カードの縦の高さを制御します。幅と同様に、固定または柔軟な高さ設定を使用できます。
* **オーバーフロー：** カードの寸法を超えるコンテンツをどのように扱うかを決定します。オプションには次のようなものがあります：
  * **表示：** コンテンツがカードの境界の外に流れ出ます。
  * **非表示：** コンテンツはカードの端で切り取られます。
  * **スクロール：** コンテンツがあふれた場合、カードにスクロールバーを追加します。

### **ヘッダー**

* **背景色：** カードのヘッダー領域の背景色を設定します。
* **文字色：** ヘッダー内のすべてのテキスト要素の色を設定します。
* **フォントサイズ：** ヘッダーのテキストサイズを制御します。
* **フォントの太さ：** ヘッダーテキストの太さを設定します（例：通常、太字、細字）。
* **フォントファミリー：** ヘッダーテキストに使用する書体を指定します。
* **下罫線サイズ：** ヘッダーとメインのカードコンテンツを区切る下罫線の太さを設定します。
* **下罫線色：** ヘッダーの下罫線の色を設定します。

### **メディア**

* **幅：** カードのメディアセクションの幅を制御します（画像や動画向け）。
* **高さ：** カードのメディアセクションの高さを制御します。
* **オブジェクトのフィット：** 画像や動画をコンテナ内に収めるためにどのようにサイズ変更するかを決定します。オプションには次のものがあります：
  * **フィル：** コンテンツを空間いっぱいに引き伸ばし、縦横比が崩れる可能性があります。
  * **コンテイン：** コンテンツを空間内に完全に収まるように拡大縮小し、空白が残る場合があります。
  * **カバー：** コンテンツを空間全体を覆うように拡大縮小し、切り取られる場合があります。
  * **なし：** コンテンツを元のサイズで表示します。
  * **縮小：** コンテンツがコンテナの寸法を超える場合は縮小し、それ以外の場合は元のサイズで表示します。
* **ボーダーサイズ：** メディア要素の周囲の枠線の太さを制御します。
* **ボーダー色：** メディア要素の周囲の枠線の色を設定します。

### **ボーダー**

* **サイズ：** カード全体を囲む枠線の全体的な太さを設定します。
* **半径：** カードの角の丸みを制御します。
* **色：** カードの枠線の色を設定します


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-card.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.