Atlas starter

Headers and footers.

10 header styles and 7 footer layouts, each shown in its best setting. Use the tone buttons on any frame to try it light, dark, accent, and more. Pick them on the Header and Footer admin pages; the brand dials color all of them.

Header adminFooter admin

Header styles

Scroll inside a frame to see sticky, transparent, and floating behavior. Frames marked "shown open" load with their menu open.

01ClassicnavStyle: classic

The baseline: logo left, nav right, one call to action. Fits any site.

02MeganavStyle: megaShown open

Full-width menu panels with columns and a featured card. For sites with many pages.

03CenterednavStyle: centered

Logo on its own row, nav centered beneath. Calm and symmetrical.

04Split brandnavStyle: split-brand

Nav balanced on both sides of a larger centered logo. A strong brand moment.

05MinimalnavStyle: minimalShown open

Just the logo, one button, and a menu. Everything else lives behind the menu.

06TransparentnavStyle: transparent

Sits over the first section's photo, then turns solid when you scroll.

07FloatingnavStyle: floating

A detached rounded bar floating over the page with a soft blur.

08Utility barnavStyle: utility

A contrasting top band for an announcement, quick links, and contact, above the main nav.

09StackednavStyle: stacked

An editorial masthead: big wordmark, tagline, and a ruled nav row.

10DrawernavStyle: drawerShown open

A bold Menu button that opens a full-screen menu with large links.

Footer layouts

The same footer content (brand, two menus, newsletter, legal) in every layout.

01ColumnsfooterLayout: columns

The organized directory: brand, even columns, legal row.

02CenteredfooterLayout: centered

Everything centered and calm, with social links up front.

03CTA BannerfooterLayout: cta-banner

A bold accent banner for the newsletter or a call to action, then the directory.

04MegafooterLayout: mega

A huge closing statement and button, then columns, then a giant ghost wordmark.

05MinimalfooterLayout: minimal

One slim row: logo, links, social, copyright. Product-site simple.

06SplitfooterLayout: split

A big brand and newsletter panel on one side, the links on the other.

07EditorialfooterLayout: editorial

Magazine style: small-caps columns and an enormous wordmark across the page.