This skill provides common UI layout patterns using fundamental-styles components. Use this to build complete, production-ready interfaces by combining multiple components correctly.
When to Use This Skill
Use this skill when:
The user asks "How do I build a [pattern name]?"
The user needs to combine multiple components
The user wants a complete working example
The user asks about common UI patterns (login, dashboard, master-detail, etc.)
Pattern 1: Login Form
A complete login form with email/password fields, validation, and action buttons.
Components used:
fd-form-item - Form field containers
fd-form-label - Field labels
fd-input - Text inputs
fd-button - Action buttons
fd-message-strip - Error feedback
When to use:
Authentication pages
Sign-in forms
User credential entry
Complete example:
<divstyle="max-width: 400px; margin: 2rem auto;"><!-- Error message (hidden by default) --><divclass="fd-message-strip fd-message-strip--error"role="alert"style="display: none;"id="login-error"><pclass="fd-message-strip__text">Invalid email or password. Please try again.</p></div><form><!-- Email field --><divclass="fd-form-item"><labelclass="fd-form-label fd-form-label--required"for="email"> Email </label><inputclass="fd-input"type="email"id="email"placeholder="name@example.com"requiredaria-required="true"
/></div><!-- Password field --><divclass="fd-form-item"><labelclass="fd-form-label fd-form-label--required"for="password"> Password </label><inputclass="fd-input"type="password"id="password"placeholder="Enter your password"requiredaria-required="true"
/></div><!-- Action buttons --><divclass="fd-form-item"><buttonclass="fd-button fd-button--emphasized"type="submit"style="width: 100%;">Sign In</button></div><divclass="fd-form-item"style="text-align: center;"><ahref="#"class="fd-link">Forgot password?</a></div></form></div>
Key points:
Use fd-form-label--required for required fields
Add aria-required="true" for accessibility
Use fd-button--emphasized for the primary action
Hide error message by default, show with JavaScript on validation failure
Use semantic HTML5 input types (email, password)
Pattern 2: Master-Detail Layout
A two-column layout with a master list on the left and detail panel on the right. Clicking an item in the master list shows its details.
Components used:
fd-list - Master list (left)
fd-panel - Detail panel (right)
fd-toolbar - Actions bar
fd-button - Action buttons
When to use:
Email clients (inbox + message detail)
File browsers (folders + file preview)
Settings pages (categories + options)
Any list-detail relationship
Complete example:
<divstyle="display: flex; gap: 1rem; height: 600px;"><!-- Master (List) --><divstyle="flex: 0 0 300px; overflow-y: auto; border-right: 1px solid var(--sapGroup_ContentBorderColor);"><ulclass="fd-list"role="listbox"><liclass="fd-list__item is-selected"role="option"tabindex="0"><divclass="fd-list__content"><divclass="fd-list__title">Item 1</div><divclass="fd-list__byline">Last updated 2 hours ago</div></div></li><liclass="fd-list__item"role="option"tabindex="-1"><divclass="fd-list__content"><div =>Item 2
Last updated 5 hours ago
Item 3
Last updated yesterday
Edit
Delete
Share
Item 1 Details
View and manage item information
Name
Item 1
Status
Active
Description
This is a detailed description of Item 1. It contains information about the item's properties,
history, and current state.
Key points:
Use flexbox for the two-column layout
Set fixed width for master (e.g., 300px)
Use is-selected class on active list item
Add overflow-y: auto for scrollable panels
Use fd-toolbar for detail panel actions
Implement keyboard navigation (arrow keys) for list items
Pattern 3: Data Table with Actions
A table with selectable rows, bulk actions toolbar, and per-row action buttons.
Components used:
fd-table - Data grid
fd-checkbox - Row selection
fd-toolbar - Bulk actions
fd-button - Action buttons
When to use:
User management tables
Product catalogs
Order lists
Any data that needs bulk operations
Complete example:
<!-- Toolbar with bulk actions (shown when rows are selected) --><divclass="fd-toolbar"><divclass="fd-toolbar__group"><spanclass="fd-toolbar__label">2 items selected</span></div><divclass="fd-toolbar__group"><buttonclass="fd-button fd-button--transparent fd-button--compact"><iclass="sap-icon--delete"role="presentation"aria-hidden="true"></i><spanclass="fd-button__text">Delete Selected</span></button><buttonclass="fd-button fd-button--transparent fd-button--compact"><iclass="sap-icon--email"role="presentation"aria-hidden="true"></i>< =>Send Email
Name
Email
Status
Actions
John Doe
john.doe@example.com
Active
Jane Smith
jane.smith@example.com
Inactive
Bob Johnson
bob.johnson@example.com
Active
Key points:
Use fd-checkbox in first column for row selection
Add is-selected class to selected rows
Show/hide toolbar based on selection state
Use fd-button--compact for in-table actions
Add descriptive aria-label for icon-only buttons
Use fd-object-status for semantic status indicators
Pattern 4: Multi-Step Wizard
A step-by-step wizard for complex forms or processes.
Components used:
fd-wizard - Stepper navigation
fd-form-item - Form fields
fd-input - Input fields
fd-button - Navigation buttons
When to use:
Multi-step forms (signup, checkout, configuration)
Guided workflows
Setup wizards
Complex data entry processes
Complete example:
<divstyle="max-width: 800px; margin: 2rem auto;"><!-- Wizard navigation --><divclass="fd-wizard"><navclass="fd-wizard__navigation"><ulclass="fd-wizard__steps"><liclass="fd-wizard__step fd-wizard__step--completed"><divclass="fd-wizard__step-wrapper"><spanclass="fd-wizard__step-indicator"><iclass="sap-icon--accept"></i></span><divclass="fd-wizard__step-content"><spanclass="fd-wizard__label">Personal Info</span></div></div></li><liclass=>
2
Contact Details
3
Review
Step 2: Contact Details
Please provide your contact information.
Phone Number
Email
Address
Previous
Next
A complete form with field validation, error messages, and proper accessibility.
Components used:
fd-form-item - Form field containers
fd-form-label - Labels
fd-input - Text inputs
fd-select - Dropdowns
fd-form-message - Validation messages
fd-button - Submit button
When to use:
User registration forms
Profile editing
Data entry forms
Any form requiring validation
Complete example:
<formstyle="max-width: 600px;"><!-- Valid field --><divclass="fd-form-item"><labelclass="fd-form-label fd-form-label--required"for="username"> Username </label><inputclass="fd-input is-success"type="text"id="username"value="john.doe"aria-invalid="false" /><spanclass="fd-form-message fd-form-message--success"> Username is available </span></div><!-- Invalid field --><divclass="fd-form-item"><labelclass="fd-form-label fd-form-label--required"for="email-form"> Email </label><inputclass="fd-input is-error"type="email"id="email-form"
=
=
=
/>
Please enter a valid email address
Password
Password is weak. Consider using a stronger password.
Bio
Tell us a bit about yourself (optional, max 500 characters)
Country
Select a country
United States
United Kingdom
Canada
Save Changes
Cancel
Key points:
Use state classes: is-error, is-success, is-warning, is-information
Pair states with matching fd-form-message components
Link messages to inputs with aria-describedby
Set aria-invalid="true" for error states
Mark required fields with fd-form-label--required
Validate on blur, not on every keystroke (better UX)
Disable submit button until form is valid
Pattern 6: Dialog with Form
A modal dialog containing a form for focused data entry.
Components used:
fd-dialog - Modal container
fd-bar - Header and footer
fd-form-item - Form fields
fd-button - Actions
When to use:
Quick data entry without leaving current page
Edit existing records
Create new records in context
Focused user input
Complete example:
<divclass="fd-dialog fd-dialog--active"role="dialog"aria-modal="true"aria-labelledby="dialog-form-title"><divclass="fd-dialog__content"style="width: 500px;"><!-- Header --><headerclass="fd-dialog__header fd-bar fd-bar--header"><divclass="fd-bar__left"><divclass="fd-bar__element"><h3class="fd-title fd-title--h5"id="dialog-form-title">Create New User</h3></div></div><divclass="fd-bar__right"><divclass="fd-bar__element"><buttonclass="fd-button fd-button--transparent"aria-label="Close"><i =>
Full Name
Email
Role
User
Administrator
Editor
Create User
Cancel
Key points:
Set explicit width on fd-dialog__content (e.g., 500px)
Use form element with unique id
Link submit button to form with form attribute
Place primary action (Create) on the right
Place secondary action (Cancel) next to primary
Close dialog on Cancel or X button click
Close and refresh on successful submit
Pattern 7: Dashboard with Cards
A dashboard layout with multiple cards showing key metrics and information.
Components used:
fd-card - Information cards
fd-button - Card actions
CSS Grid - Layout
When to use:
Application dashboards
Analytics pages
Overview screens
KPI displays
Complete example:
<divstyle="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; padding: 1rem;"><!-- Card 1: Metric --><divclass="fd-card"><divclass="fd-card__header"><divclass="fd-card__header-text"><h3class="fd-card__title-area">Total Users</h3></div></div><divclass="fd-card__content"><divstyle="text-align: center; padding: 2rem 0;"><divstyle="font-size: 3rem; font-weight: bold; color: var(--sapPositiveColor);">1,234</div><divstyle="color: var(--sapContent_LabelColor); margin-top: 0.5rem;"><iclass="sap-icon--arrow-top"style="color: var(--sapPositiveColor);"></i>
+12% from last month
</div>
Recent Activity
View All
User registered
2 minutes ago
Order completed
15 minutes ago
Payment processed
1 hour ago
System Status
API Server
Online
Database
Connected
Background Jobs
2 Pending
Key points:
Use CSS Grid with auto-fit and minmax for responsive layout
Set minimum card width (e.g., 300px)
Use fd-card__header-toolbar for card actions
Remove padding from fd-card__content when using lists
Use fd-object-status for status indicators
Keep card content focused and concise
General Pattern Tips
Layout Best Practices
Use CSS Grid for card/tile layouts
Use Flexbox for single-axis layouts (toolbars, button groups)
Set max-width on forms and content areas (e.g., 600-800px)
Add spacing between components (1rem is a good default)
Make layouts responsive with media queries or auto-fit grids
