Please enable JavaScript.
Coggle requires JavaScript to display documents.
Frontend Patterns to learn - Coggle Diagram
Frontend Patterns to learn
Page Skeleton
Header
Logo
Navigation
Main
Sectioning Pattern
Footer
DASHBOARD PATTERNS
Structure Patterns
Sidebar navigation
Top bar
Main content area
Stats Cards
Data Table
List-detail Pattern Layout
CRUD Pattern
layout patterns
App Shell (Sidebar + Header + Content)
Sidebar Layout (Two-Column Layout)
Top Navigation Layout
Master–Detail (List–Detail)
Dashboard Grid Layout
Card-Based Layout
Table + Toolbar Layout (CRUD Layout)
Form Layout (Single Column / Multi-Step)
Tab-Based Layout
Accordion Layout
Split Screen Layout
Modal Layout (Overlay Pattern)
Off-Canvas Layout
Wizard / Stepper Layout
Infinite Scroll Layout
Hybrid Layout
Sectioned Form
Inline Editable Field
Pattern: Avatar / Profile Block
Pattern: Action Buttons
<button type="submit">Save</button>
<button type="button">Cancel</button>
Pattern: Destructive Actions