Layouts

Fourteen proven page structures, each a complete working page. The home page of this template uses Hero Header + CTA; copy any other layout for your own pages.

Single Column

One centred column read from top to bottom. Best for articles, landing pages.

Two Column

Main content with a sidebar beside it. Best for blogs, content pages.

Three Column

Navigation, content and an information column. Best for portals, dashboards.

Sidebar Left

A fixed navigation sidebar on the left. Best for admin panels, erp, crm, web apps.

Sidebar Right

Content first, sidebar on the right. Best for blogs, articles, knowledge bases.

Split Screen

The screen divided into two halves. Best for sign in, sign up, comparisons.

Hero Header + CTA Home page

A big headline with a clear call-to-action. Best for landing and product promotion pages.

F-Pattern

Content arranged along the F-shaped reading path. Best for blogs, news, documentation.

Z-Pattern

Leads the eye left to right, then diagonally down. Best for landing and sales pages.

Card Grid

Information shown as a grid of cards. Best for product lists, portfolios, services.

Masonry

Cards of different heights packed in columns. Best for galleries, inspiration boards.

Bento Grid

Tiles of different sizes in one tidy grid. Best for saas features, product showcases.

Magazine

A lead story with secondary stories around it. Best for news, editorial sites.

Full-screen Sections

Each section fills the screen and snaps into place. Best for agencies, product stories.