BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon
MetLife Design System 2.0

Layout

This section illustrates content hierarchy of the basic layout elements (header, body and footer) and how the patterns differ from Marketing to Non-Marketing sites. Body content will vary by use case.

Structure

Basic website structure

Marketing

 

Corporate template (responsive)

Centered MetLife logo

Corporate responsive layout, centered logo

Corporate template (desktop)

Left-aligned MetLife logo

Corporate responsive layout, left-aligned logo

Co-branded simple microsite

Left/Right. MetLife logo is left aligned.

Co-branded simple microsite

Co-branded advanced microsite

Left/Right. MetLife logo is left aligned.

Co-branded advanced microsite

Non-Marketing

 

Service Template

Left Aligned MetLife Logo

Corporate responsive layout, centered logo

Service Template Co-branded

Left Aligned lock-up, Side-by-Side

Corporate responsive layout, left-aligned logo

Downloads

Download Details: PDF