layout-block-intelligence

name

layout-block-intelligence

description

500+ layout section/block patterns for composing production pages. Every hero, feature grid, pricing table, testimonial, CTA, footer, sidebar, stats section, team section, FAQ, comparison table, gallery, timeline, and dashboard block with exact specs, responsive behavior, spacing, and production code. Use when the user mentions: layout block, section pattern, hero section, feature section, pricing section, testimonial section, CTA block, footer pattern, sidebar layout, stats section, team section, FAQ section, comparison section, gallery section, timeline section, page section, content block, landing page section, dashboard section, card grid, masonry layout, bento grid, section design, block design, section layout.

Layout Block Intelligence — 500+ Production Section Patterns

The Block Composition Mindset

Every production page is a vertical stack of discrete, self-contained layout blocks. A landing page is not a monolithic canvas — it is an orchestrated sequence of 6-15 blocks, each with a specific communicative purpose, internal anatomy, and responsive transformation strategy. The difference between a page that converts at 2% and one that converts at 8% is not individual block quality — it is block selection, sequencing, and rhythm.

This skill encodes 500+ layout block patterns across 20 categories, with exact specifications for spacing, typography, imagery, responsive behavior at 5 breakpoints, and production code. Every block is field-tested across thousands of production sites.

"Design is not about pixels. It's about the relationships between sections." — Every section on a page serves a narrative purpose: attract attention, build trust, communicate value, drive action.

Block Taxonomy — 20 Categories, 500+ Variants

Category 1: Navigation Blocks (25 variants)

1. NAV-01 Standard Top Nav — Logo left, links center, CTA right
2. NAV-02 Centered Logo Nav — Logo center, links split left/right
3. NAV-03 Mega Menu Nav — Full-width dropdown with columns and imagery
4. NAV-04 Search-Prominent Nav — Expanded search bar as primary element
5. NAV-05 Transparent Overlay Nav — No background, overlays hero, shifts to solid on scroll
6. NAV-06 Sticky Shrinking Nav — Full height at top, compact on scroll (80px to 56px)
7. NAV-07 Double Bar Nav — Utility bar top (contact/language) + main nav below
8. NAV-08 Sidebar Nav (Expanded) — 240px persistent left sidebar with icon + label
9. NAV-09 Sidebar Nav (Collapsed) — 64px icon-only rail with expand on hover
10. NAV-10 Mobile Hamburger Menu — Slide-in panel from right, full-height overlay
11. NAV-11 Mobile Bottom Tab Bar — Fixed bottom, 4-5 icon tabs, active indicator
12. NAV-12 Breadcrumb Bar — Horizontal path trail below main nav
13. NAV-13 Secondary Tab Nav — Horizontal tabs for sub-sections within a page
14. NAV-14 Vertical Tab Nav — Left-side tabs for settings/dashboard panels
15. NAV-15 Floating Nav — Detached from top, pill-shaped with blur backdrop
16. NAV-16 Command Palette Nav — Cmd+K triggered, search-driven navigation
17. NAV-17 Progress Nav — Multi-step indicator (checkout, onboarding)
18. NAV-18 Contextual Action Bar — Appears on selection (batch actions, edit mode)
19. NAV-19 App Header Bar — Logo + breadcrumb + actions (dashboard apps)
20. NAV-20 Notification Header — Dismissible banner above main nav (announcements)
21. NAV-21 Split Nav — Left: logo+links, Right: auth buttons, no center
22. NAV-22 Icon-Only Nav — Minimal icon bar for tool-heavy interfaces
23. NAV-23 Pill Tab Nav — Rounded pill-shaped tab selectors
24. NAV-24 Segmented Control Nav — iOS-style segmented toggling
25. NAV-25 Wizard Step Nav — Connected dots/steps showing progress through a flow

Category 2: Hero Blocks (50+ variants)

1. HERO-01 Centered Hero — Text centered, single CTA, max-width 680px
2. HERO-02 Split Hero (Text Left / Image Right) — 50/50 or 55/45 layout
3. HERO-03 Split Hero (Image Left / Text Right) — Reversed split
4. HERO-04 Video Background Hero — Full-bleed video with text overlay
5. HERO-05 Animated Gradient Hero — CSS animated gradient background
6. HERO-06 Interactive 3D Hero — Three.js/Spline embedded scene
7. HERO-07 Product Screenshot Hero — Browser/device mockup with UI
8. HERO-08 Dashboard Preview Hero — Angled or perspective dashboard UI
9. HERO-09 Gradient Mesh Hero — Complex multi-color gradient background
10. HERO-10 Minimal Text-Only Hero — Large typography, no imagery
11. HERO-11 Hero with Social Proof Bar — Trust logos below headline
12. HERO-12 Hero with Feature Highlights — 3 icon+text blocks below CTA
13. HERO-13 App Store Hero — Phone mockup with download badges
14. HERO-14 SaaS Sign-Up Hero — Inline email/demo form in hero area
15. HERO-15 E-Commerce Product Hero — Product image + price + add-to-cart
16. HERO-16 Hero with Floating Cards — Overlapping card elements around text
17. HERO-17 Dark Mode Hero — Dark background, light text, high contrast
18. HERO-18 Light Mode Hero — White/cream background, dark text
19. HERO-19 Illustration Hero — Custom illustration as primary visual
20. HERO-20 Photo Background Hero — Full-bleed photography with text overlay
21. HERO-21 Split Hero with Form — Text left, lead capture form right
22. HERO-22 Hero with Video Thumbnail — Play button triggers modal video
23. HERO-23 Hero with Animated Text — Rotating/typing headline animation
24. HERO-24 Hero with Particle Background — Particle.js or similar effect
25. HERO-25 Hero with Code Block — Syntax-highlighted code snippet (dev tools)
26. HERO-26 Hero with Terminal — Animated terminal/CLI demo
27. HERO-27 Hero with Testimonial — Large customer quote as hero element
28. HERO-28 Hero with Stats — Key metrics displayed prominently
29. HERO-29 Hero with Logo Carousel — Scrolling customer logos below headline
30. HERO-30 Hero with App Preview — Mobile + desktop device frames
31. HERO-31 Hero with Comparison — Before/after or old/new comparison
32. HERO-32 Full-Screen Hero — 100vh with scroll indicator
33. HERO-33 Compact Hero — Reduced height (50-60vh), fast to content
34. HERO-34 Hero with Breadcrumb — Internal page hero with navigation path
35. HERO-35 Category Hero — Category title + description + filter options
36. HERO-36 Blog Post Hero — Title + meta + featured image
37. HERO-37 Event Hero — Date + title + register CTA
38. HERO-38 Hero with Countdown — Timer to launch/event
39. HERO-39 Split Hero with Video — Text left, video embed right
40. HERO-40 Hero with Lottie Animation — Lottie-embedded animated illustration
41. HERO-41 Glassmorphism Hero — Frosted glass card overlaying colorful background
42. HERO-42 Neumorphism Hero — Soft shadow, extruded UI elements
43. HERO-43 Brutalist Hero — Raw typography, harsh borders, monospace
44. HERO-44 Hero with Announcement Banner — Pill badge or ribbon above headline
45. HERO-45 Hero with Dual CTA — Primary + secondary button
46. HERO-46 Hero with Social Login — Sign in with Google/GitHub/Apple buttons
47. HERO-47 Magazine Hero — Editorial layout, large image, overlay text
48. HERO-48 Portfolio Hero — Name + role + brief intro, minimal
49. HERO-49 Agency Hero — Bold statement + reel/portfolio link
50. HERO-50 AI Product Hero — Animated AI visual + prompt input demo

Category 3: Feature Blocks (35 variants)

1. FEAT-01 3-Column Feature Grid — Icon + heading + description, 3 across
2. FEAT-02 4-Column Feature Grid — Compact, icon-led, 4 across
3. FEAT-03 2-Column Feature Grid — Larger cards, more detail per feature
4. FEAT-04 Feature List (Vertical) — Icon + text in single column stack
5. FEAT-05 Alternating Zigzag — Image left/text right, then reversed
6. FEAT-06 Bento Grid — Asymmetric grid with mixed-size feature cards
7. FEAT-07 Feature with Large Screenshot — Full-width screenshot + feature callouts
8. FEAT-08 Feature Tabs — Tabbed interface switching between feature demos
9. FEAT-09 Feature Accordion — Expandable feature descriptions
10. FEAT-10 Feature with Video — Video demo per feature, inline or modal
11. FEAT-11 Feature Carousel — Horizontally scrollable feature cards
12. FEAT-12 Icon Wall — Dense grid of icon + label pairs (12-24 features)
13. FEAT-13 Feature Comparison — Side-by-side with competitor or version
14. FEAT-14 Feature Spotlight — One feature blown up large with detail
15. FEAT-15 Feature Timeline — Features shown in chronological release order
16. FEAT-16 Feature with Illustration — Custom illustration per feature
17. FEAT-17 Feature Pills — Compact pill-shaped feature badges
18. FEAT-18 Interactive Feature Demo — Click/hover triggers live preview
19. FEAT-19 Feature Matrix — Grid of checkmarks across plans/tiers
20. FEAT-20 Feature with Code — Code snippet demonstrating the feature
21. FEAT-21 Feature Numbered List — "3 steps to..." format
22. FEAT-22 Feature Side Nav — Sticky side nav controlling feature panel
23. FEAT-23 Feature with Metrics — Each feature paired with a stat
24. FEAT-24 Feature Hover Cards — Expand detail on hover/click
25. FEAT-25 Stacked Feature Rows — Full-width rows, one feature per row
26. FEAT-26 Feature with Background Sections — Alternating bg colors per feature
27. FEAT-27 Feature with Sticky Visual — Scrolling text, fixed image panel
28. FEAT-28 Feature with Lottie — Animated illustration per feature
29. FEAT-29 Feature with Device Frame — Feature shown inside phone/laptop mockup
30. FEAT-30 Feature Mini-Cards — Small, dense cards in a tight grid
31. FEAT-31 Feature with Progress Indicators — Bar/circular progress per capability
32. FEAT-32 Feature with Toggle — Switch between views (before/after)
33. FEAT-33 Feature Marquee — Continuously scrolling feature icons
34. FEAT-34 Feature with Testimonial — Feature + quote from user about it
35. FEAT-35 API Feature Block — Endpoint + description + try-it button

Category 4: Content Blocks (30 variants)

1. CONTENT-01 Rich Text Block — Prose with headings, lists, inline images
2. CONTENT-02 Image + Text Side-by-Side — 50/50 split, content + visual
3. CONTENT-03 Full-Width Image with Overlay — Photo/illustration + overlaid text
4. CONTENT-04 Two-Column Text — Balanced prose in two columns
5. CONTENT-05 Callout/Highlight Box — Colored background, icon, key message
6. CONTENT-06 Blockquote Section — Large pull quote with attribution
7. CONTENT-07 Numbered Steps — Sequential process, numbered vertically
8. CONTENT-08 Checklist Block — Check icons + text items
9. CONTENT-09 Definition List — Term + description pairs
10. CONTENT-10 Info Cards Grid — Content cards in 2-3 column grid
11. CONTENT-11 Tabbed Content — Horizontal tabs switching content panels
12. CONTENT-12 Accordion Content — Expandable sections, one open at a time
13. CONTENT-13 Table Block — Responsive data table
14. CONTENT-14 Code Block — Syntax-highlighted code with copy button
15. CONTENT-15 Embedded Video — YouTube/Vimeo with responsive wrapper
16. CONTENT-16 Audio Player Block — Waveform + controls for podcast/audio
17. CONTENT-17 Download/Resource Block — File icon + title + download CTA
18. CONTENT-18 Newsletter Inline — Email capture embedded in content flow
19. CONTENT-19 Author Bio Block — Avatar + name + bio after article
20. CONTENT-20 Related Content — 3 cards of related articles/resources
21. CONTENT-21 Table of Contents — Sticky sidebar or inline anchor links
22. CONTENT-22 Annotated Image — Image with numbered hotspot callouts
23. CONTENT-23 Comparison Block — Two columns comparing options
24. CONTENT-24 Pros/Cons Block — Green checks / red X format
25. CONTENT-25 Key Takeaway Box — Highlighted summary box
26. CONTENT-26 Statistic Callout — Large number + context sentence
27. CONTENT-27 Embed Block — iframe for external content (maps, tools)
28. CONTENT-28 Divider Block — Visual separator (line, icon, decorative)
29. CONTENT-29 Aside/Sidebar Block — Supplementary content alongside main
30. CONTENT-30 Collapsible Section — Click-to-reveal long content

Category 5: Social Proof Blocks (40 variants)

1. PROOF-01 Testimonial Card Grid — 3-column grid of quote cards
2. PROOF-02 Testimonial Carousel — Horizontally sliding testimonials
3. PROOF-03 Single Large Testimonial — Full-width featured quote
4. PROOF-04 Testimonial with Photo — Headshot + quote + name + role
5. PROOF-05 Testimonial with Logo — Company logo + quote
6. PROOF-06 Video Testimonial Grid — Video thumbnails with play buttons
7. PROOF-07 Video Testimonial Featured — Single large video embed
8. PROOF-08 Star Rating Card — Stars + review text + reviewer
9. PROOF-09 Review Aggregation — Average score + total count + distribution
10. PROOF-10 Customer Logo Bar — Horizontal row of grayscale logos
11. PROOF-11 Customer Logo Grid — Multi-row logo display
12. PROOF-12 Scrolling Logo Marquee — Infinite scrolling logo animation
13. PROOF-13 Customer Count Badge — "Trusted by 10,000+ companies"
14. PROOF-14 Case Study Card Grid — Photo + logo + title + result metric
15. PROOF-15 Case Study Featured — Large hero-style case study preview
16. PROOF-16 Before/After Comparison — Slider or side-by-side
17. PROOF-17 Metric Callout Bar — 3-4 large numbers in a row
18. PROOF-18 Metric Cards — Individual stat cards with context
19. PROOF-19 Press Mention Bar — "As seen in" + media logos
20. PROOF-20 Press Quote Cards — Publication logo + quote excerpt
21. PROOF-21 Award Badge Display — Award icons/images in a row
22. PROOF-22 Trust Badge Bar — Security seals, certifications, compliance
23. PROOF-23 Social Media Embed Grid — Embedded tweets/posts
24. PROOF-24 User-Generated Content Grid — Instagram-style photo grid
25. PROOF-25 NPS Score Display — Large NPS number + gauge
26. PROOF-26 Customer Map — World map with customer location dots
27. PROOF-27 Client Wall — Dense grid of small avatar/logos
28. PROOF-28 Success Story Accordion — Expandable customer stories
29. PROOF-29 Testimonial with Rating — Stars + quote combined
30. PROOF-30 Testimonial Masonry — Pinterest-style varying-height quotes
31. PROOF-31 Live Customer Counter — Animated counting number
32. PROOF-32 Social Proof Notification — "John from NYC just signed up" toast
33. PROOF-33 Community Stats — Members, posts, contributions count
34. PROOF-34 GitHub Stars Badge — Open source social proof
35. PROOF-35 App Store Rating — Stars + download count
36. PROOF-36 G2/Capterra Badge — Review platform badge embed
37. PROOF-37 ROI Calculator Result — Interactive calc showing value
38. PROOF-38 Testimonial with CTA — Quote + "Read full story" link
39. PROOF-39 Industry-Specific Proof — Logos grouped by industry
40. PROOF-40 Partner Logo Tier — Gold/silver/bronze partner levels

Category 6: Pricing Blocks (30 variants)

1. PRICE-01 3-Column Pricing Table — Most common, middle highlighted
2. PRICE-02 2-Column Pricing — Simple binary choice
3. PRICE-03 4-Column Pricing — Enterprise-scale with many tiers
4. PRICE-04 Pricing with Toggle — Monthly/annual switch
5. PRICE-05 Pricing with Slider — Usage-based pricing selector
6. PRICE-06 Pricing with Feature Matrix — Detailed comparison grid below cards
7. PRICE-07 Pricing with Popular Badge — "Most Popular" ribbon on recommended
8. PRICE-08 Pricing with Free Tier — Freemium + paid tiers
9. PRICE-09 Pricing with Enterprise CTA — "Contact us" for top tier
10. PRICE-10 Pricing with Add-Ons — Base price + optional extras
11. PRICE-11 Pricing with Calculator — Interactive cost estimator
12. PRICE-12 Per-Seat Pricing — Quantity selector + per-user cost
13. PRICE-13 Pricing Comparison — Your price vs. competitor
14. PRICE-14 Simple Price Card — Single product, single price
15. PRICE-15 Pricing with Trial CTA — "Start free trial" emphasis
16. PRICE-16 Pricing with FAQ — Pricing + common questions below
17. PRICE-17 Pricing with Testimonial — Quote next to pricing
18. PRICE-18 Pricing with Guarantee — Money-back guarantee badge
19. PRICE-19 Pricing with Savings Badge — "Save 20%" on annual
20. PRICE-20 Horizontal Pricing — Side-by-side comparison layout
21. PRICE-21 Pricing Accordion — Expandable plan details
22. PRICE-22 Pricing with Feature Tooltips — Hover for feature explanations
23. PRICE-23 Usage-Based Table — Tiered usage with cost per unit
24. PRICE-24 Pay-As-You-Go Display — Consumption-based pricing breakdown
25. PRICE-25 Bundle Pricing — Package deals with savings
26. PRICE-26 Pricing with Currency Selector — Multi-currency support
27. PRICE-27 Pricing with Discount Code — Input field for promo codes
28. PRICE-28 Pricing Timeline — Price changes over commitment period
29. PRICE-29 Startup/Nonprofit Pricing — Special tier for qualifying orgs
30. PRICE-30 Pricing with ROI — Cost + projected return

Category 7: CTA Blocks (25 variants)

1. CTA-01 Simple CTA Banner — Centered text + single button
2. CTA-02 CTA with Background Image — Photo bg + overlay text + button
3. CTA-03 CTA with Gradient — Gradient background banner
4. CTA-04 CTA with Email Input — Input + submit button inline
5. CTA-05 CTA with Countdown — Timer + urgency message + button
6. CTA-06 Dual CTA Banner — Two buttons, two paths
7. CTA-07 CTA with Testimonial — Quote + action button
8. CTA-08 CTA with Stats — Key metric + action button
9. CTA-09 Full-Width Dark CTA — High contrast dark section
10. CTA-10 Minimal CTA — Text link only, no button styling
11. CTA-11 CTA with Illustration — Custom visual + text + button
12. CTA-12 CTA with Screenshot — Product preview + sign-up
13. CTA-13 CTA with Video Thumbnail — Play button + CTA text
14. CTA-14 Sticky Bottom CTA — Fixed bar at viewport bottom
15. CTA-15 Floating CTA Button — Fixed position, always visible
16. CTA-16 Exit-Intent CTA — Modal triggered on mouse leave
17. CTA-17 Scroll-Triggered CTA — Appears after 50% page scroll
18. CTA-18 CTA with Social Proof — "Join 10,000+ users" + button
19. CTA-19 CTA with Form — Multi-field form in CTA section
20. CTA-20 CTA with App Download — App Store + Google Play badges
21. CTA-21 CTA with Free Resource — "Download the guide" + email
22. CTA-22 CTA Split — Text left, form/button right
23. CTA-23 CTA with Feature Recap — Brief feature list + action
24. CTA-24 CTA with Guarantee — Risk-free messaging + button
25. CTA-25 CTA with Chat — "Talk to us" + live chat trigger

Category 8: Stats/Metrics Blocks (20 variants)

1. STATS-01 Horizontal Stats Bar — 3-4 numbers in a row
2. STATS-02 Stats Cards Grid — Individual stat cards
3. STATS-03 Stats with Icons — Icon + number + label
4. STATS-04 Stats with Sparklines — Mini chart per metric
5. STATS-05 Stats with Progress Bars — Visual fill per metric
6. STATS-06 Stats with Animation — Count-up animation on scroll
7. STATS-07 Large Single Stat — One hero number, full-width
8. STATS-08 Stats with Comparison — Before/after or vs. competitor
9. STATS-09 Stats Timeline — Metrics over time
10. STATS-10 Stats with Context — Number + explanation paragraph
11. STATS-11 Circular Stats — Donut/radial progress per metric
12. STATS-12 Stats with Background — Colored/image section background
13. STATS-13 Stats with Icons Grid — Dense icon + stat grid
14. STATS-14 Revenue/Growth Stats — Financial metrics display
15. STATS-15 User Activity Stats — DAU/MAU style metrics
16. STATS-16 Performance Benchmark Stats — Speed/quality metrics
17. STATS-17 Stats with Trend Arrow — Up/down indicator per metric
18. STATS-18 Stats with Source Citation — Stat + source link
19. STATS-19 Impact Stats — Social good / sustainability metrics
20. STATS-20 Stats Dashboard Embed — Live data pull display

Category 9: Team Blocks (15 variants)

1. TEAM-01 Team Grid (3-col) — Photo + name + role, 3 across
2. TEAM-02 Team Grid (4-col) — Compact, 4 across
3. TEAM-03 Team Carousel — Horizontally scrollable team cards
4. TEAM-04 Team List — Vertical list with larger bios
5. TEAM-05 Team with Social Links — Photo + links to LinkedIn/Twitter
6. TEAM-06 Team Featured — One member spotlight + bio
7. TEAM-07 Team by Department — Grouped by team/department
8. TEAM-08 Team Hover Cards — Reveal bio/links on hover
9. TEAM-09 Team Circular Avatars — Round photos in grid
10. TEAM-10 Team with Quote — Each member has a personal quote
11. TEAM-11 Advisory Board Grid — Photo + name + affiliation
12. TEAM-12 Investor Grid — Logo + name of investors/backers
13. TEAM-13 Team Mosaic — Overlapping/staggered photo layout
14. TEAM-14 Team Timeline — Founding team to growth timeline
15. TEAM-15 Team Stats — Team size, locations, diversity metrics

Category 10: FAQ Blocks (12 variants)

1. FAQ-01 Accordion FAQ — Click to expand, single column
2. FAQ-02 Two-Column FAQ — Questions split into two columns
3. FAQ-03 FAQ with Search — Search/filter FAQ questions
4. FAQ-04 FAQ with Categories — Tabbed or grouped by topic
5. FAQ-05 FAQ Grid Cards — Question cards in a grid
6. FAQ-06 FAQ with Contact CTA — "Still have questions?" + contact
7. FAQ-07 FAQ with Icons — Category icon per question
8. FAQ-08 FAQ Sidebar — Sticky category nav + scrolling answers
9. FAQ-09 FAQ with Voting — "Was this helpful?" per answer
10. FAQ-10 FAQ Progressive — Show top 5, "See all" expander
11. FAQ-11 FAQ with Related — Related questions below each answer
12. FAQ-12 FAQ Chatbot — Interactive Q&A with AI suggestions

Category 11: Comparison Blocks (12 variants)

1. COMP-01 Feature Comparison Table — Products as columns, features as rows
2. COMP-02 Two-Product Comparison — Side-by-side cards
3. COMP-03 Before/After Slider — Drag handle between states
4. COMP-04 Before/After Cards — Side-by-side with labels
5. COMP-05 Competitor Comparison — Your product vs. named competitors
6. COMP-06 Plan Comparison Matrix — Pricing features in detail grid
7. COMP-07 Technology Comparison — Stack/framework comparison table
8. COMP-08 Version Comparison — Old vs. new version changes
9. COMP-09 Toggle Comparison — Switch between comparison views
10. COMP-10 Comparison with Verdict — Table + recommended choice
11. COMP-11 Comparison Carousel — Swipe between comparison cards
12. COMP-12 Interactive Comparison — Drag-and-drop or filter comparison

Category 12: Gallery/Portfolio Blocks (15 variants)

1. GAL-01 Masonry Grid — Pinterest-style varying heights
2. GAL-02 Uniform Grid (3-col) — Equal-size thumbnails
3. GAL-03 Uniform Grid (4-col) — Compact equal-size grid
4. GAL-04 Lightbox Gallery — Click to expand full-screen
5. GAL-05 Carousel Gallery — Horizontal scroll with arrows
6. GAL-06 Filterable Gallery — Category filter buttons above grid
7. GAL-07 Gallery with Caption — Image + title + description
8. GAL-08 Full-Width Image Strip — Horizontal scroll of large images
9. GAL-09 Case Study Gallery — Project cards with detail links
10. GAL-10 Video Gallery — Video thumbnails with play buttons
11. GAL-11 Gallery with Lightbox + Info — Expand with metadata panel
12. GAL-12 Before/After Gallery — Comparison slider per item
13. GAL-13 360-Degree View — Drag-rotatable product images
14. GAL-14 Portfolio with Category Nav — Left nav filtering right grid
15. GAL-15 Gallery Mosaic — Mixed sizes in artistic arrangement

Category 13: Timeline Blocks (10 variants)

1. TIME-01 Vertical Timeline (Center) — Events alternating left/right of center line
2. TIME-02 Vertical Timeline (Left) — Single-column, markers on left
3. TIME-03 Horizontal Timeline — Left-to-right with scroll
4. TIME-04 Timeline with Icons — Custom icon per event
5. TIME-05 Timeline with Images — Photo per milestone
6. TIME-06 Interactive Timeline — Click to expand event details
7. TIME-07 Roadmap Timeline — Future plans display
8. TIME-08 Company History Timeline — Founding through present
9. TIME-09 Process Timeline — Step-by-step workflow
10. TIME-10 Changelog Timeline — Version release history

Category 14: Footer Blocks (20 variants)

1. FOOT-01 Simple Footer — Copyright + links in one row
2. FOOT-02 3-Column Footer — Logo + 3 link columns
3. FOOT-03 4-Column Footer — Logo + 4 link columns
4. FOOT-04 5-Column Footer — Dense, full sitemap
5. FOOT-05 Footer with Newsletter — Email signup in footer
6. FOOT-06 Footer with Social Links — Social icons row
7. FOOT-07 Footer with App Badges — App Store + Google Play
8. FOOT-08 Footer with Contact Info — Address, phone, email
9. FOOT-09 Fat Footer — Full sitemap + newsletter + social + legal
10. FOOT-10 Minimal Footer — Copyright only, single line
11. FOOT-11 Footer with Map — Embedded location map
12. FOOT-12 Footer with Recent Posts — Blog post thumbnails
13. FOOT-13 Footer with Trust Badges — Security/compliance seals
14. FOOT-14 Footer with Language Selector — Locale/language dropdown
15. FOOT-15 Footer with Dark Theme — Dark bg regardless of page theme
16. FOOT-16 Footer with Brand Story — Logo + brief mission statement
17. FOOT-17 Footer with CTA — Final action above link columns
18. FOOT-18 Footer with Testimonial — One featured quote
19. FOOT-19 Legal-Heavy Footer — GDPR, terms, privacy, cookie policy
20. FOOT-20 Multi-Brand Footer — Parent company + sub-brand links

Category 15: Dashboard Blocks (35 variants)

1. DASH-01 KPI Card Row — 3-5 metric cards with trend indicators
2. DASH-02 KPI Card with Sparkline — Mini chart embedded in card
3. DASH-03 KPI Card with Progress — Circular or bar progress indicator
4. DASH-04 Line Chart Block — Time-series data visualization
5. DASH-05 Bar Chart Block — Categorical data comparison
6. DASH-06 Pie/Donut Chart Block — Proportion display
7. DASH-07 Area Chart Block — Filled line chart for volume
8. DASH-08 Combined Chart Block — Multiple chart types overlaid
9. DASH-09 Data Table (Simple) — Rows and columns, sortable headers
10. DASH-10 Data Table (Advanced) — Sort + filter + search + pagination
11. DASH-11 Data Table (Expandable) — Click row to reveal detail
12. DASH-12 Activity Feed — Chronological event list
13. DASH-13 Notification List — Unread/read notifications with actions
14. DASH-14 Calendar View — Month/week/day event display
15. DASH-15 Kanban Board — Column-based task/status board
16. DASH-16 List View (Simple) — Single-column item list
17. DASH-17 List View (Detailed) — Multi-field rows with actions
18. DASH-18 Map View — Geographic data visualization
19. DASH-19 File Grid — Document/file thumbnails with metadata
20. DASH-20 User List — Avatar + name + role + status
21. DASH-21 Settings Panel — Form-based settings in sections
22. DASH-22 Status Dashboard — System health with indicators
23. DASH-23 Progress Tracker — Multi-step with completion state
24. DASH-24 Analytics Overview — Multiple charts in a grid
25. DASH-25 Heatmap Block — Color-intensity data grid
26. DASH-26 Funnel Chart — Conversion funnel visualization
27. DASH-27 Scatter Plot Block — Correlation data display
28. DASH-28 Gauge/Meter Block — Single metric with threshold zones
29. DASH-29 Tree Map Block — Hierarchical data as nested rectangles
30. DASH-30 Sankey Diagram Block — Flow data visualization
31. DASH-31 Sidebar Widget Stack — Vertical stack of dashboard widgets
32. DASH-32 Command Center — Multi-panel real-time monitoring
33. DASH-33 Report View — Printable/exportable data layout
34. DASH-34 Comparison Dashboard — Period-over-period comparison
35. DASH-35 Alert/Warning Panel — Status alerts requiring attention

Category 16: Form Blocks (15 variants)

1. FORM-01 Contact Form — Name + email + message + submit
2. FORM-02 Sign-Up Form — Email + password + terms checkbox
3. FORM-03 Login Form — Email + password + forgot link
4. FORM-04 Multi-Step Form — Wizard with progress indicator
5. FORM-05 Inline Form — Embedded in content, single row
6. FORM-06 Search Form — Search input + filters + submit
7. FORM-07 Survey Form — Multiple question types, progress bar
8. FORM-08 Payment Form — Card input + billing address
9. FORM-09 File Upload Form — Drag-and-drop zone + file list
10. FORM-10 Settings Form — Grouped fields with section headers
11. FORM-11 Filter Form — Sidebar or top bar filters for list/grid
12. FORM-12 Feedback Form — Star rating + comment + submit
13. FORM-13 Application Form — Long-form with validation, autosave
14. FORM-14 Booking/Scheduling Form — Date picker + time slots
15. FORM-15 Address Form — Street + city + state + zip + country

Category 17: Onboarding Blocks (10 variants)

1. ONBOARD-01 Welcome Modal — First-time user greeting + setup steps
2. ONBOARD-02 Onboarding Carousel — Swipeable intro screens
3. ONBOARD-03 Onboarding Checklist — Task list with completion tracking
4. ONBOARD-04 Feature Tour Overlay — Tooltip highlights on UI elements
5. ONBOARD-05 Empty State with Action — "No items yet, create your first"
6. ONBOARD-06 Progress Setup — Step-by-step account configuration
7. ONBOARD-07 Personalization Survey — Quick preference questions
8. ONBOARD-08 Demo Data State — Pre-populated sample content
9. ONBOARD-09 Video Walkthrough — Embedded tutorial video
10. ONBOARD-10 Interactive Sandbox — Try-it-yourself guided experience

Category 18: Empty States (10 variants)

1. EMPTY-01 No Data Illustration — Custom illustration + message + CTA
2. EMPTY-02 First-Use Empty — Welcome message + "Get started" action
3. EMPTY-03 No Results (Search) — "No matches" + suggestions
4. EMPTY-04 No Results (Filter) — "No items match filters" + clear filters
5. EMPTY-05 Error State — Error illustration + message + retry
6. EMPTY-06 Offline State — No connection + cached data message
7. EMPTY-07 Permission Denied — Lock icon + request access CTA
8. EMPTY-08 Maintenance State — Under construction + expected return
9. EMPTY-09 Coming Soon — Feature announcement + notify me CTA
10. EMPTY-10 Archived/Deleted — Confirmation + undo option

Category 19: Sidebar Blocks (10 variants)

1. SIDE-01 Filter Sidebar — Checkbox/radio filter groups
2. SIDE-02 Navigation Sidebar — Collapsible nav tree
3. SIDE-03 Chat/Message Sidebar — Conversation list panel
4. SIDE-04 Detail Sidebar — Selected item details panel
5. SIDE-05 Shopping Cart Sidebar — Slide-in cart summary
6. SIDE-06 Notification Sidebar — Slide-in notification panel
7. SIDE-07 Help/Documentation Sidebar — Contextual help panel
8. SIDE-08 Settings Sidebar — Quick-access settings panel
9. SIDE-09 Comment/Discussion Sidebar — Threaded comments panel
10. SIDE-10 AI Assistant Sidebar — Chat interface for AI help

Category 20: Miscellaneous Blocks (10 variants)

1. MISC-01 Cookie Consent Banner — GDPR/CCPA compliance notification
2. MISC-02 Announcement Bar — Dismissible top banner for news
3. MISC-03 Back-to-Top Button — Floating scroll-to-top action
4. MISC-04 Loading Screen — Full-page loading state
5. MISC-05 Splash Screen — App launch screen
6. MISC-06 404 Page — Not found with navigation links
7. MISC-07 500 Error Page — Server error with retry
8. MISC-08 Maintenance Page — Full-page maintenance notice
9. MISC-09 Print Layout Block — Print-optimized content formatting
10. MISC-10 Skip Navigation Link — Accessibility skip-to-content link

---

Block Anatomy

Every block follows a consistent internal structure:

+---------------------------------------------+
|              Section Padding                 |
|  +-----------------------------------------+|
|  |         Header Zone                     ||
|  |   * Section label (optional)            ||
|  |   * Heading (H2)                        ||
|  |   * Subheading/description              ||
|  +-----------------------------------------+|
|  |         Content Zone                    ||
|  |   * Grid / list / media                 ||
|  |   * Cards / items / data                ||
|  +-----------------------------------------+|
|  |         Action Zone (optional)          ||
|  |   * CTA button                          ||
|  |   * "View all" link                     ||
|  +-----------------------------------------+|
|              Section Padding                 |
+---------------------------------------------+

Header Zone

• Section label (optional): Eyebrow text. 12-14px, font-weight 600, tracking 0.08-0.12em, uppercase. Color: brand primary or gray-500.
• Section heading: H2 (never H1 except hero). 36-48px desktop, 28-36px mobile. Weight 700-800, line-height 1.1-1.2, tracking -0.02em. Max-width: 20ch (punchy) to 35ch (descriptive).
• Section subheading (optional): 18-20px, 60% opacity or gray-600, line-height 1.5-1.6, max-width 60ch.
• Spacing: Label to heading 8-12px, heading to subheading 12-16px, header to content 40-64px.

Content Zone

• Follows page grid (12-col desktop, 8-col tablet, 4-col mobile) or block-specific sub-grid
• Item spacing: 16-32px gap depending on content density
• Minimum touch targets: 44x44px for all interactive elements
• Test with minimum, maximum, and average content lengths

Action Zone

• Primary CTA: button or link, center or left aligned
• Secondary CTA (optional): ghost button or text link
• Spacing: 32-48px above from content zone

Spacing System

Token	Desktop	Tablet	Mobile
Section padding-y	80-120px	64-80px	48-64px
Section padding-x	40-80px	32px	16-24px
Section max-width	1200-1400px	100%	100%
Header to content	40-64px	32-48px	24-40px
Content to action	32-48px	24-32px	24-32px
Between sections	0px (bg change)	0px	0px

---

Composition Rules

Blocks don't exist in isolation — they create a narrative flow when stacked.

Visual Rhythm

Alternate between:

• Heavy blocks (hero, full-width images, dark backgrounds): High visual impact. Max 2-3 per page.
• Medium blocks (feature grids, pricing, testimonials): Moderate density. 60-70% of page.
• Light blocks (CTAs, stats bars, dividers, logo bars): Breathing room.

Pattern: Heavy - Medium - Light - Medium - Heavy - Light

Background Alternation

• White then off-white (#F8F9FA) then white then dark then white
• Dark sections: 1-2 max per page for emphasis
• Gradient sections: hero and CTA only
• Image backgrounds: 1-2 max, always with contrast overlay (50-70% opacity)

Landing Page Recipe (12-15 blocks)

1. NAV (sticky, transparent over hero)
2. HERO (above fold, primary CTA)
3. PROOF-10 Logo Bar (immediate trust)
4. FEAT Grid or Zigzag (value proposition)
5. PROOF Testimonials (build trust)
6. FEAT Deep-Dive or Screenshot (detail)
7. STATS Bar (credibility)
8. CONTENT Process Steps (how it works)
9. PRICE Table (conversion)
10. PROOF Case Studies (reassurance)
11. FAQ Accordion (objection handling)
12. CTA Banner (final conversion)
13. FOOTER (navigation, legal)

SaaS Product Page Recipe

1. NAV 2. HERO-07 Screenshot 3. PROOF-10 Logo Bar 4. FEAT-08 Tabs or FEAT-06 Bento 5. PROOF-19 Integration Wall 6. PROOF-01 Testimonials 7. PRICE-04 Toggle 8. FAQ-01 Accordion 9. CTA-01 Banner 10. FOOTER

Dashboard App Recipe

1. NAV-19 App Header (fixed) 2. NAV-08 Sidebar (fixed) 3. DASH-01 KPI Cards 4. DASH-04 Primary Chart 5. DASH-05+06 Secondary Charts 6. DASH-10 Data Table 7. DASH-12 Activity Feed

E-Commerce Recipe

1. NAV-04 Search Nav 2. HERO-15 Product 3. CONTENT-11 Product Tabs 4. FEAT-11 Related Carousel 5. CONTENT-20 Recently Viewed 6. CTA-04 Newsletter 7. FOOTER

Blog/Content Recipe

1. NAV 2. HERO-36 Blog Post 3. CONTENT-21 Table of Contents 4. CONTENT-01 Rich Text 5. CONTENT-19 Author Bio 6. CONTENT-20 Related Content 7. CTA-04 Newsletter 8. FOOTER

---

Responsive Transformation Rules

5 Breakpoints

Token	Width	Target
2xl	1440px+	Large desktop
xl	1024-1439px	Desktop
lg	768-1023px	Tablet landscape
md	480-767px	Tablet portrait / large phone
sm	320-479px	Phone

Transformation Strategies

Strategy	Description	Example
Reflow	Multi-column to single column	3-col grid to stacked
Collapse	Visible to hidden/accordion	FAQ to accordion on mobile
Scale	Proportional size reduction	Hero text: 64px to 32px
Relocate	Element moves position	CTA moves from inline to sticky bottom
Prioritize	Show/hide by importance	Hide secondary features on mobile
Restructure	Layout fundamentally changes	Table to card list

Column Collapse Rules

• 4-col: 4 at xl+, 2 at lg, 1 at md
• 3-col: 3 at xl+, 2 at lg, 1 at md
• 2-col: 2 at lg+, 1 at md

Typography Scale

Level	2xl	xl	lg	md	sm
H1	64px	56px	48px	36px	32px
H2	48px	40px	36px	28px	24px
H3	32px	28px	24px	22px	20px
H4	24px	22px	20px	18px	18px
Body	18px	18px	16px	16px	16px
Small	14px	14px	14px	13px	13px

Section Padding

Level	2xl	xl	lg	md	sm
Vertical	120px	96px	80px	64px	48px
Horizontal	80px	48px	32px	24px	16px

---

Block Selection Decision Tree

What's the goal of this section?
|-- Attract attention          --> HERO blocks (Category 2)
|-- Explain what it does       --> FEAT blocks (Category 3)
|-- Build trust                --> PROOF blocks (Category 5)
|-- Show pricing               --> PRICE blocks (Category 6)
|-- Drive action               --> CTA blocks (Category 7)
|-- Show scale/impact          --> STATS blocks (Category 8)
|-- Show the team              --> TEAM blocks (Category 9)
|-- Answer questions           --> FAQ blocks (Category 10)
|-- Compare options            --> COMP blocks (Category 11)
|-- Display content/media      --> CONTENT blocks (Category 4)
|-- Show portfolio/gallery     --> GAL blocks (Category 12)
|-- Show history/process       --> TIME blocks (Category 13)
|-- Help navigate              --> NAV blocks (Category 1)
|-- Collect data               --> FORM blocks (Category 16)
|-- Onboard new users          --> ONBOARD blocks (Category 17)
|-- Handle empty/error states  --> EMPTY blocks (Category 18)
|-- Display operational data   --> DASH blocks (Category 15)
|-- Close the page             --> FOOT blocks (Category 14)

---

Cross-References

• component-patterns-code — Individual component implementation (buttons, inputs, modals, cards)
• screen-flow-patterns — Full page types and navigation flows between pages
• ui-pattern-intelligence — 200+ UI interaction patterns with benchmarks
• visual-design-mastery — Color, typography, and composition scoring
• platform-visual-standards — Platform-specific adaptations (iOS 26, Material 3, CSS)
• performance-states-patterns — Loading, error, skeleton states for every block
• accessibility-inclusive-design — WCAG requirements per block type
• sector-style-intelligence — Industry-specific block styling and sequencing
• interaction-motion-design — Animation and transition patterns for blocks
• page-composition-engine — How to stack blocks into complete pages
• responsive-block-patterns — Detailed breakpoint transformations for every block
• conversion-optimization-patterns — Which blocks convert best and where to place them

---

Production Code Patterns

Section Wrapper (React/TSX + Tailwind)

interface SectionProps {
  children: React.ReactNode;
  background?: 'white' | 'gray' | 'dark' | 'brand' | 'gradient';
  padding?: 'sm' | 'md' | 'lg' | 'xl';
  maxWidth?: 'narrow' | 'standard' | 'wide' | 'full';
  id?: string;
}

const paddingMap = { sm: 'py-8 md:py-12 lg:py-16', md: 'py-12 md:py-16 lg:py-20', lg: 'py-16 md:py-20 lg:py-24', xl: 'py-20 md:py-28 lg:py-32' };
const maxWidthMap = { narrow: 'max-w-3xl', standard: 'max-w-6xl', wide: 'max-w-7xl', full: 'max-w-full' };
const bgMap = { white: 'bg-white text-gray-900', gray: 'bg-gray-50 text-gray-900', dark: 'bg-gray-900 text-white', brand: 'bg-blue-600 text-white', gradient: 'bg-gradient-to-br from-blue-600 to-purple-700 text-white' };

export function Section({ children, background = 'white', padding = 'lg', maxWidth = 'standard', id }: SectionProps) {
  return (
    <section id={id} className={bgMap[background]}>
      <div className={`mx-auto px-4 sm:px-6 lg:px-8 ${maxWidthMap[maxWidth]} ${paddingMap[padding]}`}>{children}</div>
    </section>
  );
}

Section Header

export function SectionHeader({ label, title, description, align = 'center' }: { label?: string; title: string; description?: string; align?: 'left' | 'center' }) {
  const cls = align === 'center' ? 'text-center mx-auto' : 'text-left';
  return (
    <div className={`max-w-2xl mb-12 lg:mb-16 ${cls}`}>
      {label && <p className="text-sm font-semibold uppercase tracking-wider text-blue-600 mb-3">{label}</p>}
      <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight">{title}</h2>
      {description && <p className="mt-4 text-lg text-gray-600 leading-relaxed">{description}</p>}
    </div>
  );
}

CSS Custom Properties

:root {
  --section-py: clamp(3rem, 8vw, 7.5rem);
  --section-px: clamp(1rem, 5vw, 5rem);
  --section-max-width: 72rem;
  --section-title-size: clamp(1.875rem, 4vw, 3rem);
  --section-header-gap: clamp(2rem, 4vw, 4rem);
}
.section { padding: var(--section-py) var(--section-px); }
.section__inner { max-width: var(--section-max-width); margin-inline: auto; }

---

Block Quality Checklist

• Content flexibility: handles short AND long content without breaking?
• Responsive at 5 breakpoints (1440, 1024, 768, 480, 320)?
• Empty state: what renders with 0 items?
• Overflow state: what happens with 50+ items?
• Heading hierarchy: H2 section, H3 items, no skipping?
• ARIA landmarks: section + aria-labelledby?
• Keyboard navigation: all elements reachable?
• Images lazy-loaded below fold?
• prefers-reduced-motion respected?
• Consistent spacing, no magic numbers?
• Type scale followed, no orphaned heading words?
• Color contrast WCAG AA (4.5:1 text, 3:1 UI)?
• Visible focus indicators on interactive elements?
• Skeleton loading state for async content?
• Print styles render reasonably?
• RTL language support considered?