Layout
Use form layout to arrange fields within a form using standard spacing. By default it stacks fields vertically but also supports horizontal groups of fields.
Props
No props found for this component, run `yarn gen:docs` to generate component meta first.
Slots
No slots found for this component, run `yarn gen:docs` to generate component meta first.
Best practices
The layout component should:
- Use sections with white backgrounds for primary content and sections with grey backgrounds for secondary content that is less important
- Center cards on the background when there is no secondary card on the page to stop the content from becoming too wide
- Group similar concepts and actions together in cards
- Separate different cards using a full-width divider
- Structure primary/secondary, two-column layouts so the primary ⅔ section is used for main information and the secondary ⅓ section is used for information that might not be used as often but remains helpful for context or secondary tasks
- Use equal-width layouts with two or more columns when each layout section has the same importance
Content guidelines
The content that appears in the layout component comes from cards and annotated sections.
Cards
Content from cards should follow the content guidelines for cards.
Annotated section titles
Annotated section titles should follow the content guidelines for headings and subheadings.
Annotated section descriptions
Annotated section descriptions should:
- Be used if the explanation or purpose of the associated cards isn’t clear
- Provide instructions for any choices merchants need to make, or explain the purpose of the section
- Be short, no more than 1–3 sentences
- Direct merchants to more content in the Help Center with “Learn more” links
- Not repeat the section title
- Use complete sentences and regular punctuation
Related components
- To visually group content in a layout section, use the card component
- To lay out a set of smaller components in a row, use the vertical stack component
- To lay out form fields, use the form layout component