Container
主要なコンテンツ幅を管理するためのコンポーネントです。
レイアウト
指定された大きさを保ちながら、左右中央に配置されます。コンテナの大きさよりウィンドウ幅が小さい場合は、パディングを保ちながらコンテナの幅が狭くなります。
コンテナの大きさ
size props を使ってコンテナの大きさを指定できます。デフォルトはDEFAULTです。
| 大きさ | 幅トークン | 値（px） |
|---|---|---|
NARROW | col6 | 880px |
DEFAULT | col8 | 1184px |
WIDE | col9 | 1336px |
FULL | - | width: 100% |
コンテナのパディング
padding props を使ってコンテナのパディングを指定できます。
デフォルトで上下左右2文字ずつのパディングが設定されています。モバイルレイアウトの場合は上下1.5文字、左右1文字ずつのパディングが設定されます。いずれの値も上書きできます。
Props
size
"FULL" "NARROW" "DEFAULT" "WIDE"
padding
0 0.25 0.5 0.75 1 1.25 1.5 2 2.5 3 3.5 4 8 -0.25 -0.5 -0.75 -1 -1.25 -1.5 -2 -2.5 -3 -3.5 -4 -8 "X3S" "XXS" "XS" "S" "M" "L" "XL" "XXL" "X3L" SeparatePadding