werteでコンテンツを作る際にどのコンポーネントを利用するかのガイドラインです。 コンテンツを作る際に、同じような構成のコンテンツが作る人によって違うコンポーネントを利用してしまうと保守性の低下やバージョンアップ時の思わぬ事故が起こる可能性があります。 また、ガイドラインを守ってコンポーネントを利用することで各コンポーネントの機能拡張を効率的に行うことができます。

幅100%のコンテンツ

画面幅100%のコンテンツを作りたいときにどのコンポーネントを利用するのが適切かのガイドラインです。

画像の上に文字やボタンを載せるコンテンツ

カバーリストを利用します。 文字が見えにくい場合は、画像の透明度や明るさを調整することで解決します。 

ヘッディングに背景色を入れるコンテンツ

セクションと見出しを利用します。 セクションの背景色を設定し、見出しのフォントカラーを白（or特定の色）にすることで実装できます。 高さはセクション上下の余白を調整することで変更することができます。 

注意点 カバーリストでも作ることができますが、画像を背景にしない場合はセクションと見出しで作ってください。

複数のコンテンツを横に並べる場合

タイルリストorタイルリストフルワイドを使います。 カバーリストでも実現可能ですが、画像の上に文字を載せない場合はタイルリストを使ってください。 

画像

画像だけを幅100%で表示したい場合は画像コンポーネントを使います。

最大幅1280pxのなかにコンテンツを入れる場合

セクションコンポーネント内にコンポーネントを作ることで、最大幅1280pxのコンテンツを作ることができます。

ヘッディング

見出しを使います。テキストを使うこともできますが、極力見出しを使うことで運用性が高まります。 

画像の上に文字やボタンを載せるコンテンツ

カバーリストを使います。逆に画像の上に文字を載せないコンテンツにはカバーリストの利用は避けて他のコンポーネントで作るようにしてください。（他のコンポーネントの利便性を高めるため） 

テキスト系コンテンツと画像を横に並べる場合

メディアを使います。 

画像とテキストを縦に並べたカードを作り横に並べる場合

カードリストを使います。