HERO SECTION
中央配置のキャッチコピー×フルスクリーン背景。
青みがかった分子ネットワークの背景を全画面に敷き、中央に大型タイポグラフィと2つのアクションボタンを配置したヒーロー領域の解説です。
GET STARTED
DOCUMENTATION
青みがかった分子ネットワークの背景を全画面に敷き、中央に大型タイポグラフィと2つのアクションボタンを配置したヒーロー領域の解説です。
ビューポート高さいっぱいを使い、左に見出しと説明文、右に画像を配置したスプリットスクリーンの解説です。スクロールに応じて右側の画像がテキストよりゆっくり動くパララックス効果を添えています。
Learn More
上部にアイコン、中央にタイトルと説明文を配置した縦積みカードの解説です。
Detailsホバー時にカード全体が浮き上がるシャドウ変化のマイクロインタラクションの解説です。
Details3列均等のグリッドで反復させ、複数の要素を並列に比較しやすくした構成です。
Details完了状態の進捗バーを添えたステップの解説です。
進行中の状態を部分的に塗りつぶした進捗バーの解説です。
未着手状態を空のまま示す進捗バーの解説です。
マイナスアイコンで展開中であることを示し、見出しの下に本文を表示する開閉式レイアウトの解説です。回答エリアは高さのアニメーションで滑らかに開きます。
プラスアイコンで折りたたみ中であることを示すクローズ状態の解説です。クリックでアイコンが切り替わり、本文が展開します。