Spacing
一貫したレイアウトのためのマージンとパディング値
コンポーネントとレイアウトのためのセマンティックなスペーシングトークン。 一貫した間隔を維持しながら、用途に応じた適切なスペースを提供します。
コンポーネントパディング
コンポーネント内部のパディングに使用するトークン。
| Token | Reference | Preview |
|---|---|---|
spacing.component.padding.xs | {spacing.1} | |
spacing.component.padding.sm | {spacing.2} | |
spacing.component.padding.md | {spacing.3} | |
spacing.component.padding.lg | {spacing.4} | |
spacing.component.padding.xl | {spacing.6} |
コンポーネントギャップ
コンポーネント間のギャップに使用するトークン。
| Token | Reference | Preview |
|---|---|---|
spacing.component.gap.xs | {spacing.1} | |
spacing.component.gap.sm | {spacing.2} | |
spacing.component.gap.md | {spacing.3} | |
spacing.component.gap.lg | {spacing.4} | |
spacing.component.gap.xl | {spacing.6} |
レイアウト
レイアウト用のスペーシングトークン。
| Token | Reference | Description |
|---|---|---|
spacing.layout.gutter | {spacing.4} | コンテンツ間の標準的な余白 |
spacing.layout.section | {spacing.16} | セクション間の大きな余白 |