プロフィールカード

概要

Avonni プロファイルカードは、洗練され視覚的に魅力的なプロファイルカードを作成するために設計されています。タイトル、サブタイトル、アバター、背景、およびさまざまなスタイリング属性を柔軟に設定できるため、プロファイルカードコンポーネントは、優雅さ、プロフェッショナリズム、視覚的調和を備えたプロファイルカードを作成するための道となります。

チュートリアル

名前
説明

Experience Cloud 上でユーザ情報を表示するように Avonni カードを設定し、パーソナライズを強化します。

スロット

Avonni プロファイルカードコンポーネントは、スロットを通じて幅広い情報を柔軟かつ動的に表示する方法を提供します。これらのスロットはコンポーネント内の指定領域で、さまざまな他のコンポーネントを挿入でき、広範なカスタマイズ性と機能性を可能にします。

スロットの種類

  1. コンテンツスロット:

    • 詳細情報の主要領域。

    • テキスト、リスト、画像、またはカスタムコンポーネントなど、さまざまな要素を追加するのに最適です。

    • 包括的なデータやインタラクティブな要素を表示するために使用できます。

  2. ヘッダースロット:

    • タイトル、見出し、または導入コンテンツに専用。

    • テキストラベル、アバター、アイコン、またはコンテキストを提供する任意のコンポーネントに適しています。

    • プロファイルカードの目的を即座に理解させる効果を高めます。

  3. アクションスロット:

    • ボタンやハイパーリンクなどのインタラクティブ要素に予約されています。

    • プロフィールの編集やナビゲーションなどのアクションを提供し、ユーザ操作を促進します。

    • カードのインタラクティビティとユーザの関与を高めます。

設定

名前
説明
使用法

タイトルとタイトルテキストスタイル

H1、H2、H3、H4、P1、P2 などのさまざまなテキストスタイルから選択して、タイトルとその外観を定義します。

これを利用して、注目を集める目立つスタイライズされた見出しをプロファイルカードに与えます。

サブタイトルとサブタイトルテキストスタイル

サブタイトルを追加してその外観をカスタマイズし、スタイルの選択肢で追加の文脈情報を提供できます。

サブタイトルは、役職や部署などの追加情報を提供してプロファイルカードの包括性を高めるために使用します。

CMS 背景または背景 URL

CMS から画像を選択するか URL を指定して背景をカスタマイズし、視覚的に豊かな背景を作成します。

適切に選ばれた背景画像はプロファイルに深みと文脈を加え、その視覚的魅力を高めることができます。

CMS アバター画像またはアバター画像の URL

CMS から画像を選択するか URL を使用してアバターを定義し、プロファイル表現に個人的なタッチを与えます。

アバターは個人的な要素を加え、プロファイルをより魅力的で親しみやすくします。

アバターのバリアントとサイズ

円形や四角形などのバリアントや x-small から x-large までのサイズから選んで、アバターの形状とサイズをカスタマイズします。

プロファイルカード全体のデザイン美学に合わせてアバターの見た目を調整し、視覚的一貫性と魅力を確保します。

アバターの位置

アバターをカード上の位置(左上、上部中央、右下など)に配置します。

アバターの位置を調整して、プロファイルカード内でバランスの取れた調和のあるレイアウトを実現します。

最終更新

役に立ちましたか?