Sanlorenzo
DIGITAL PRESENCE

LAYOUT & TEMPLATE

Structure content with clarity and balance using Sanlorenzo's layout system and page templates. Learn how grids, spacing, and predefined templates work together to create elegant, scalable, and consistent digital experiences.

Layout

Grid system
12-column responsive grid on desktop (80px margins · ~24px gutters) and 2-column grid on mobile (20px margins · 20px gutters). The container is fully responsive and scales fluidly across viewport sizes.
bleed-1-layout-template

Breakpoints

bleed-2-layout-template

Container & Sections

Three layout patterns. Full Bleed for images/video. Contained for standard content. Narrow for long-form text.

bleed-3-layout-template

Template

Sanlorenzo Landing page

View on Figma

Primary brand page hosted within the dealer's site. Includes a brand hero banner, 
a model overview organized by New and Pre-Owned collections, a Manifesto section, a dedicated editorial news area, an Enquire form, and the footer.

bleed-4-layout-template

List page

View on Figma

Filterable catalogue of Sanlorenzo models available at the dealer. Filters by line, length, year. Yacht card grid in 3 columns. Pagination with progressive loading.

bleed-5-layout-template

Model detail page

View on Figma

Filterable catalogue of Sanlorenzo models available at the dealer. Filters by line, length, year. Yacht card grid in 3 columns. Pagination with progressive loading.

bleed-6-layout-template