> 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="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-893ee94322abb8bcc88a428e7e5a59f2290fbb1d%2F2024-04-14_09-26-27.png?alt=media" alt="" width="563"><figcaption></figcaption></figure>

## 設定

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

Avonni Card に、ユーザーが内容をすばやく識別できる明確でわかりやすいタイトルを付けましょう。方法は次のとおりです。

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

**例:**

Avonni Card に商品情報を表示する場合は、「Location」のようなタイトルを使用できます。

**タイトルのテキストスタイル** は、そのタイトルのタイポグラフィを設定します。フォントファミリー、サイズ、太さ、色です。

### ヘッダーを表示

「Show Header」はデフォルトでオンです。Avonni Card の上部に 2 つのドロップゾーンが表示されます。 **アクション** は右上にあり、「Show Header」がオンの間は常に利用可能で、 **タイトル** は左上にあり、 **タイトル** 属性が空の場合のみ利用できます。タイトルがその領域を独自のテキストで埋めるためです。これにより、次のことができます。

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

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

### フッターを表示

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

### コンテンツのパディング調整

カード内コンテンツ周辺の余白を調整します。この設定を使うと、コンテンツを境界線にぴったり寄せたより引き締まったレイアウトにしたり、余白を増やしてゆとりを持たせたりできます。Card ではデフォルトでオフになっているため、オンにするまでコンテンツにはパディングが維持されます。

### アイコンとメディア

**アイコン名** カードのヘッダーに Lightning Design System のアイコンを表示します。

**CMS 画像** と **画像 URL または式** カードのメディア画像を CMS アセットまたは URL から設定します。 **画像の位置** コンテンツに対する配置を指定します。 `上`, `下`, `左`, `右`, `中央`, `背景`、または `オーバーレイ`.

## ユースケース

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

## スタイル

{% tabs %}
{% tab title="サイズ" %}

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

{% tab title="ヘッダー" %}

* **背景色:** カードのヘッダー領域の背景色を設定します。
* **テキスト色:** ヘッダー内のテキスト要素の色を設定します。
* **フォントサイズ:** ヘッダーテキストのサイズを制御します。
* **フォントの太さ:** ヘッダーテキストの太さを設定します（例: 標準、太字、細字）。
* **フォントファミリー:** ヘッダーテキストに使用する書体を指定します。
* **下線のサイズ:** ヘッダーとメインのカードコンテンツを区切る下側の境界線の太さを設定します。
* **下線の色:** ヘッダー内の下側境界線の色を設定します。
  {% endtab %}

{% tab title="メディア" %}

* **幅:** カードのメディアセクションの幅を制御します（主に画像や動画用）。
* **高さ:** カードのメディアセクションの高さを制御します。
* **オブジェクトのフィット:** 画像または動画をコンテナ内に収めるために、どのようにサイズ変更するかを決定します。オプションには次のものがあります。
  * **塗りつぶし:** コンテンツを引き伸ばして空間を埋めるため、縦横比が崩れる可能性があります。
  * **含める:** コンテンツを空間内に完全に収まるように拡大縮小するため、空白領域が残る可能性があります。
  * **カバー:** コンテンツを空間全体を覆うように拡大縮小するため、切り抜かれる可能性があります。
  * **なし:** コンテンツを元のサイズで表示します。
  * **縮小:** コンテンツがコンテナの寸法を超える場合は縮小し、それ以外は元のサイズで表示します。
* **境界線のサイズ:** メディア要素の周囲の境界線の太さを制御します。
* **境界線の色:** メディア要素の周囲の境界線の色を設定します。
  {% endtab %}

{% tab title="境界線" %}

* **サイズ:** カード全体を囲む境界線の全体的な太さを設定します。
* **半径:** カードの角の丸みを制御します。
* **色:** カードの境界線の色を設定します
  {% endtab %}
  {% endtabs %}


---

# 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.