Website sections
All sections have Breakpoint variants Desktop (1440), Tablet (768) and Mobile (375); spacing and type follow the variable modes.
| Section | Variants | Description |
|---|---|---|
| Header navigation | Type:Default,Mobile menu open · Breakpoint:Desktop,Tablet,Mobile | Website header; Tablet/Mobile collapse to a menu button. |
| Footer | Style:Light,Dark · Breakpoint:Desktop,Tablet,Mobile | Footer with brand, 4 link columns and bottom bar; Dark flips all tokens. |
| Hero section | Type:Centered,Split image,Email capture · Breakpoint:Desktop,Tablet,Mobile | Centered, Split image or Email capture hero. |
| Features section | Breakpoint:Desktop,Tablet,Mobile | Icon grid: 6 features, 3 / 2 / 1 columns. |
| Feature split section | Type:Image right,Image left · Breakpoint:Desktop,Tablet,Mobile | Text + checklist next to an image. |
| Bento section | Breakpoint:Desktop,Tablet,Mobile | Bento grid of feature cards. |
| Logo cloud | Breakpoint:Desktop,Tablet,Mobile | Customer logos row. |
| Testimonial | Breakpoint:Desktop,Tablet,Mobile | Single large quote with rating and author. |
| Testimonials grid | Breakpoint:Desktop,Tablet,Mobile | Testimonial cards: 3 / 2 / 1 columns. |
| Metrics section | Breakpoint:Desktop,Tablet,Mobile | Key numbers on a brand background. |
| Pricing card | Plan:T · Price:T · Description:T · CTA label:T · Highlighted:False,True | Pricing tier; Highlighted = recommended plan. |
| Pricing section | Breakpoint:Desktop,Tablet,Mobile | Billing toggle and 3 pricing cards. |
| FAQ item | Question:T · Answer:T · State:Closed,Open | Accordion row. |
| FAQ section | Breakpoint:Desktop,Tablet,Mobile | Heading + 6 FAQ items. |
| CTA section | Type:Brand band,Card with image · Breakpoint:Desktop,Tablet,Mobile | Closing call-to-action: brand band or card with image. |
| Newsletter section | Breakpoint:Desktop,Tablet,Mobile | Newsletter sign-up. |
| Blog card | Title:T · Excerpt:T | Blog post preview card. |
| Blog section | Breakpoint:Desktop,Tablet,Mobile | Latest posts: 3 / 2 / 1 cards. |
| Team member | Name:T · Role:T · Bio:T | Team member card. |
| Team section | Breakpoint:Desktop,Tablet,Mobile | Team grid: 4 / 2 / 1. |
| Contact section | Breakpoint:Desktop,Tablet,Mobile | Contact form + contact info cards. |
| Careers section | Breakpoint:Desktop,Tablet,Mobile | Open roles with department filter and job cards. |
| Comparison table section | Breakpoint:Desktop,Tablet,Mobile | Plan comparison table. |
| Integrations section | Breakpoint:Desktop,Tablet,Mobile | Integration cards: 3 / 2 / 1 columns. |
| 404 section | Breakpoint:Desktop,Tablet,Mobile | Not-found page body with search. |
| Blog post content | Breakpoint:Desktop,Tablet,Mobile | Article layout with rich-text body. |
| Content section | Breakpoint:Desktop,Tablet,Mobile | Long-form content with image. |
| Press mentions | Breakpoint:Desktop,Tablet,Mobile | Media logos with press quotes. |
| Legal content | Breakpoint:Desktop,Tablet,Mobile | Privacy / terms layout with table of contents. |
| Auth section | Type:Log in,Sign up,Forgot password,Verification · Breakpoint:Desktop,Mobile | Log in, Sign up, Forgot password, Verification. |
Example pages
Section titled “Example pages”Home, Pricing, Blog, Blog post, About, Team, FAQ, Contact, Integrations, Legal, 404, Log in, Sign up — each at Desktop and Mobile, built only from section instances.
Recipe: Header navigation → hero → 2–4 content sections → CTA section → Footer.