CMS API Page Structure
Layout patterns and component structure for CMS API integration pages
Style Guide
Layout Sections
5
Main sections
UI Components
12
Component types
Tab Sections
4
Content tabs
Grid Columns
4
Responsive grid
CMS API Page Layout Structure
Standard layout pattern used across all CMS API integration pages
1. Header Section
• Page title with icon (Building, Heart, etc.)
• Description text
• Status badge (Connected, Error, Loading)
2. Quick Stats Grid
• 4-column responsive grid (md:grid-cols-4)
• Card components with header and content
• Icons, numbers, and descriptions
3. Tabbed Content Area
• Results/Search tab with data table
• Data Sync tab with sync controls
• Datasets tab showing available data
• Configuration tab with settings
4. Error Handling
• Connection error alerts
• Fallback UI for failed states
• Loading states with skeletons
5. Interactive Elements
• Sync buttons with loading states
• Search and filter controls
• Data tables with pagination