Settings Form Pattern

Design Specifications (Figma)

Based on SEMA Data Settings Page design

Form Layout

  • Label width: 250px (right-aligned)
  • Input width: 420px
  • Gap: 20px
  • Vertical gap between rows: 20px

Typography

  • Page title: Open Sans SemiBold 32px
  • Section title: Open Sans SemiBold 24px
  • Labels & text: Open Sans Regular 16px
  • Helper text: Open Sans Regular 12px

Section Spacing

  • Between sections: 40px
  • Title to content: 10px
  • Description margin: 20px

Sticky Footer

  • Shadow: 0px -5px 10px rgba(51,51,51,0.1)
  • Padding: 10px 20px
  • Disabled button: 20% opacity

SEMA-Style Settings Page (Figma)

Complete settings page layout with all form patterns

SEMA Data

Settings
Category Mapping
Data Import

API Credentials

Keep your API Credentials secure and do not share them with other parties.

Enter your SEMA Data credentials, generate a token, and save it. If you don't have these, create an account with SEMA.

Import Options

Currency & Price Conversion

Canadian dollar (CAD) Manage
Only prices in CAD will be imported.

Sticky Save Footer

Fixed bottom bar with save button (disabled at 20% opacity when no changes)

<div class="xcart-sticky-save"> <button class="xcart-btn xcart-btn-primary" disabled>Save Changes</button> </div>

Horizontal Form Row (Figma)

Label (250px, right-aligned) + Input (420px) with 20px gap

Enter your primary email address.
<div class="xcart-hform-row"> <label class="xcart-hform-label">Label text</label> <div class="xcart-hform-field"> <input type="text" class="xcart-input" ...> <span class="xcart-hform-helper">Helper text</span> </div> </div>

Password Input with Toggle

Input with show/hide password button

<div class="xcart-input-password"> <input type="password" class="xcart-input" ...> <button type="button" class="xcart-password-toggle"> <i class="fas fa-eye"></i> </button> </div>

Checkbox Group (Multi-Column)

Multiple checkbox columns for update options

<div class="xcart-checkbox-group"> <div class="xcart-checkbox-column"> <label class="xcart-checkbox-item"> <input type="checkbox" checked> <span>Option 1</span> </label> ... </div> <div class="xcart-checkbox-column"> ... </div> </div>

Static Field with Link

Read-only value with action link

US Dollar (USD) Manage
<div class="xcart-hform-row"> <label class="xcart-hform-label">Store currency</label> <div class="xcart-hform-static"> <span>US Dollar (USD)</span> <a href="#">Manage</a> </div> </div>

Card-Style Settings (Legacy)

Alternative settings layout with card sections

Connection Settings

Configure your ERP connection

Your API endpoint URL

Sync Settings

Configure synchronization behavior

CSS Classes Reference

Figma Settings Form (New)

Class Description
.xcart-settings-page Settings page container (max-width 800px)
.xcart-settings-page-title Page title (32px SemiBold)
.xcart-settings-page-section Section container (40px margin-bottom)
.xcart-settings-page-section-title Section title (24px SemiBold)
.xcart-hform-row Horizontal form row (gap 20px)
.xcart-hform-label Label (250px, right-aligned)
.xcart-hform-field Input container
.xcart-hform-helper Helper text (12px)
.xcart-hform-static Read-only value with link
.xcart-hform-input-with-info Input with info icon inline
.xcart-checkbox-group Multi-column checkbox container
.xcart-checkbox-column Checkbox column
.xcart-checkbox-item Checkbox with label
.xcart-input-password Password input with toggle
.xcart-password-toggle Show/hide password button
.xcart-sticky-save Sticky footer save bar

Card-Style Settings (Legacy)

Class Description
.xcart-settings-section Settings card container
.xcart-settings-header Card header with title
.xcart-settings-body Card body with form rows
.xcart-form-row Form row in card layout
.xcart-settings-actions Action buttons at bottom