# AX - カード

## 概要

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

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

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

{% hint style="danger" %}
このコンポーネントは [スロットを活用します](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/hajimeni/wobu#understanding-slots) 高度なカスタマイズのため、LWR サイトに最適です。Aura サイトはこのレベルのカスタマイズをサポートしていません。
{% endhint %}

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F0f257G1XMI09QkzNbDfL%2F2024-04-14_09-26-27.png?alt=media&#x26;token=d2307dd6-7841-49ea-a7cd-b58834c4c3fb" alt="" width="563"><figcaption></figcaption></figure>

## Avonni カードの設定

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

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

* **「カードタイトル」属性を見つける:** この設定は、Experience Cloud サイトビルダー内の Avonni カードコンポーネントの構成オプションにあります。
* **タイトルを入力:** 表示したいタイトルのテキストを入力します。簡潔で説明的にしてください。
* **配置:** タイトルは自動的に Avonni カードの左側に表示され、視覚的なアンカーポイントを提供します。

**例:**

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

### ヘッダーを表示

「ヘッダーを表示」属性を有効にすると、Avonni カードの右上に多目的のコンテナが追加されます。これにより以下が可能になります：

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

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

### フッターを表示

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

### コンテンツ プル パディング

カード内のコンテンツ周りの間隔を調整します。この設定を使用して、コンテンツを境界にぴったり合わせた引き締まったレイアウトを作るか、余白を増やしてゆとりを持たせることができます。&#x20;

## チュートリアル

| 名前                                                                                                                                   | 説明                                                     |
| ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ |
| [**MapCard ショーケースの作成**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/chtoriaru/ysuksu/mapcard-shksuwosuru) | Avonni カードと Map コンポーネントを使って MapCard ショーケースを作成する方法を学びます |

## 外観

### **サイズ**

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

### **ヘッダー**

* **背景色:** カードのヘッダー領域の背景色を設定します。
* **テキスト色:** ヘッダー内の任意のテキスト要素の色を設定します。
* **フォントサイズ:** ヘッダーテキストのサイズを制御します。
* **フォントの太さ:** ヘッダーテキストの太さを設定します（例：通常、太字、細字）。
* **フォントファミリー:** ヘッダーテキストに使用される書体を指定します。
* **下部ボーダーのサイズ:** ヘッダーとカード本体のコンテンツを分ける下部ボーダーの厚さを設定します。
* **下部ボーダーの色:** ヘッダーの下部ボーダーの色を設定します。

### **メディア**

* **幅:** カードのメディアセクション（画像やビデオ向け）の幅を制御します。
* **高さ:** カードのメディアセクションの高さを制御します。
* **オブジェクトフィット:** 画像やビデオをコンテナ内に収めるためのリサイズ方法を決定します。オプションには次のものがあります：
  * **フィル:** コンテンツをスペースに合わせて引き伸ばし、アスペクト比が歪む可能性があります。
  * **コンテイン:** コンテンツをスペース内に完全に収まるようにスケーリングし、空白が残ることがあります。
  * **カバー:** コンテンツをスペース全体を覆うようにスケーリングし、トリミングされる可能性があります。
  * **なし:** コンテンツを元のサイズで表示します。
  * **縮小:** コンテナの寸法を超える場合にコンテンツを縮小し、それ以外は元のサイズで表示します。
* **ボーダーのサイズ:** メディア要素の周りのボーダーの厚さを制御します。
* **ボーダーの色:** メディア要素の周りのボーダーの色を設定します。

### **ボーダー**

* **サイズ:** カード全体を囲むボーダーの全体的な厚さを設定します。
* **半径:** カードの角がどれだけ丸くなるかを制御します。
* **色:** カードのボーダーの色を設定します