3 Column Article Grid

Skip Navigation

FOUNDATIONS

RESOURCES

SHOWCASE

XD IN PRACTICE

FOUNDATIONS

Foundations

See the standards we always follow and find additional guidance to help you create cohesive digital experiences that are uniquely MetLife.

Overview

Getting Started

Using the Global Design System

Standards

Logo
Typography
Color
User Interface Elements
Tone of Voice
Experience Principles
Accessibility

Core Guidance

Illustration
Icons
Photography
Layout & Grid
Data Visualization
Graphics
Conversational UI

RESOURCES

Designers

Developers

Designers

Getting Started

Designer Resources Overview

Responsive Web Guidance

Components
Templates
User Flows

Native App Guidance

Components
User Flows

Marketing & Advertising Guidance

Email
Social
Online Ads

Developers

Getting Started

Developer Resources Overview

MetLife Design Components (MLDC)

React Library (Web)

SHOWCASE

Showcase

Explore digital brand expression from MetLife teams around the world to give you the creative reference and inspiration to do more great work.

Overview

Case Study

Post-Purchase Experience

Digital Brand Expression

United States
Mexico
Chile
Japan
South Korea

XD IN PRACTICE

XD in Practice

Get advice, learn best practices, and discover ways to work efficiently and collaboratively, from planning to execution. Accessing this page requires connecting to the MetLife VPN.

Overview

Designing Your Corporate Website

Plan: Start Here
Phase 2: Discovery/Define
Phase 3: Design
Phase 4: Deliver
Phase 5: Improve

Website Design Fundamentals

Technology Enhancements
New Components for Design
Content Authoring Support

Keys to Success

What is Experience Design?
The XD Process: Step by Step
Working with Designers
Understanding Usability

Enter your search here

Auto Complete

0 of 0 Search Results

| Displaying

No Results

Sorry, we couldn't find any results matching

Please:

Check the spelling and try again
Search using fewer terms
Click here for Customer Support

Did you mean ""

Did you mean ?

Sorry, we couldn't find any results matching

Please:

Check the spelling and try again
Search using fewer terms
Click here for Customer Support

Divider

Sub Menu

Back

Components

Content Promo

Content Promo Banner Featured Content Promo Listicle Product Promo Breaker Quote Feature Breaker Report Breaker Single Featured Story Breaker Text Insight Breaker Video Promo Visual Product Card Chaptering Hub Promo

Content Container

Brand Promise Breaker Byline Cliff Notes FAQ Gated Overlay Media Embed Product Info Contact List Product Info Table Pull Quote Embed Table Content WYSIWYG (Rich Text Editor) Tool Panel Value Prop Banner Carousel Divider Content List Grouped Content 3 Column Article Grid Responsive Column Layout Content Feed Email Subscription Headline Breaker Lead Gen Breaker Product Bundle Related Tags Selected Articles Simple List Tabbed Content Team Component Team Hero Product Comparison Table

Data Visualization

Key Insights Data Insight Display Trend Spotting Embed Key Stat Breaker

Interactive Components

Embedded Lead Form Sorting Hat Secondary Navigation Gated Content Form

Content Carousel

Related Content Recirc Variations Recirc with Image

Category Page Header

Category Hero Category Hero with CTA Category Hero with Phone Category Hero with CTA + Phone

Homepage Header

Immersive Brand Navigation - 4 Tabs Immersive Brand Navigation - Single Hero

Detail Page Header

Detail Hero - Text + CTA + Phone# Detail Hero - Image Detail Hero - Text + Phone# Detail Hero - Image + CTA

Report & Topic/Hub Page Header

Report Hero - No Image Report Hero with Extended Content Topic/Hub Hero - Related Content Recirc Topic/Hub Hero - Headline Breaker Report Hero - Image

Article Page Header

Article Hero - Image (Photo) Article Hero - Default with Byline Article Hero - Video Article Hero - Interactive Video Article Hero - Image with Byline

Generic Template Page Header

General Hero - Gray General Hero - Gray with Gradient Bar

Global Elements

Primary Menu Menu Variation Footer Search

Auto Rotating Hero

Auto Rotate Hero - Banner & Secondary Headline Auto Rotate Hero - Banner & Secondary Copy Auto Rotate Hero - Banner

Hero Event

Hero Event - Text: Left & Color: White Hero Event - Text: Center & Color: Black

Multi Topic Hero

Multi Topic Hero - CTA Enable Multi Topic Hero - CTA Disable

Single Topic Hero

Single Topic Hero - CTA Enable Single Topic Hero - CTA Disable

Sub Topic Hero

Sub Topic Hero - Image as Picture Sub Topic Hero - Image as Illustration

Feature Hero

Feature Hero - CTA Enable Feature Hero - CTA Disable

Side By Side Hero

Side By Side Hero Side By Side Hero - CTA Disable

Hero Form

Hero Progressive Form

Article Listing Article Spotlight Testimonials

Sub Menu

WYSIWYG (Rich Text Editor)

COMPONENTS

3 Column Article Grid

Media Embed

Divider

Overview

WYSIWYG (Rich Text Editor)

The 3-Column Article Grid component displays related articles by category/tag, dynamically drawing previously authored pages from the Article Page Template. Optional Filters are available to help sort articles. On a full-screen setting, it can support a maximum of three columns.

Documentation