フレームワークパターン
画像左、テキスト右
画像が概念を説明しているが、コピーが詳細な意味を伝えるセクションで使用します。画像列はデスクトップでは視覚的に固定され、モバイルでは全幅のスタック行になります。
スタイルガイド
Solace AGI ページの共有パターン。 このページは、スプラッシュイメージ、ボタン、カード、コピーブロック、ビジュアルトークンのライブリファレンスです。
スプラッシュイメージ
-hero 画像コンテナ: <section class="splash-image"><picture class="splash-image__asset">...</picture></section>
ホームヒーロー
Software 5.0 ヒーロー
画像左、テキスト右
製品説明セクションの典型的なメディア/テキスト分割。モバイルでは、画像はコピーの上に積み重なり、カードの全幅に拡大します。
公開ページ
価格設定
料金ページ
プランカード、比較表、および公開用の購入枠。
論文
論文ページ
公開リライト、ローカルソースファイル、およびリンク元出典情報。
アナリティクス
アナリティクス ページ
ヘッドライン メトリクス、DataTables バックエンド グリッド、アマーチャーツ ビジュアル.
ボタン
カード
機能カード
コア製品の利点、機能説明、および概念セクションで使用します。
価格カード
$28/月
クラウド ツイン + OAuth3 ヴォールト + Part 11 アーキテクテッド エビデンス。
ハイライト ボックス: TL;DR 法的注意事項、強調表記、およびコンパクトな強調コピーで使用します。
テーブルとチャート
サンプル チャート
サンプル テーブル
| サーフェス | ライブラリ | モード |
|---|---|---|
| アナリティクス | amチャートs | チャート |
| 論文 | DataTables | カタログ |
| 価格設定 | DataTables | 比較 |
タイポグラフィ
内容テキスト は製品及び技術説明の基礎となる長い形式のリーディングスタイルです。
セクションのイントロは、本文よりも存在感は必要だが、見出しより重みは小さい、より広い要約に適しています。
ヒーローのサブタイトルは、メインヘッディングの下にある先折りの価値枠付けに予約されています。
カラートークン
青い
`--sa-blue`
紫色
`--sa-purple`
オレンジ色
`--sa-orange`