BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon

Links

Links let users navigate to a new page. Links change appearance as users interact with them, but are always compliant with accessibility guidelines.

Primary

Primary text links are used as a call to action. Generally, buttons will be used on the most important actions on the page, while links are used for less important ones.

UX Best Practice: This color and style are used exclusively for links. For MetLife primary link color is "#007abc".

On Load

View More

Rollover

View More

On Focus

View More
HideShow CSS
                         
        .ml-link
        {
        	text-decoration: underline;
        	color: #007abc;
        	font-weight: bold;
        	display: inline-block;
        }
        
        .ml-link:hover,
        .ml-link:focus,
        .hover.ml-link,
        {
        	text-decoration: none;
        }
        
        .ml-link:focus,
        {
        	outline-color: #333;
        	text-decoration: none;
        }
        .focus.ml-link,
        {
        	box-shadow: 0 0 4px #333, 0 0 10px #333;
        }
                        
                            
HideShow HTML
                                                <a href="#" class="ml-link">View More</a>
                                                
                    

Dark background use should be limited to informative page callout or promotionals.

On Load

View More

Rollover

View More

On Focus

View More
HideShow CSS
                         
        .ml-link-dark 
        {
        	text-decoration: underline;
        	color: #fff;
        	font-weight: bold;
        	display: inline-block;
        }
        
        .ml-link-dark:hover,
        .ml-link-dark:focus,
        .hover.ml-link-dark {
        	text-decoration: none;
        }
        
        .ml-link-dark:focus {
        	outline-color: #333;
        	text-decoration: none;
        }
        .focus.ml-link-dark {
        	box-shadow: 0 0 4px #333, 0 0 10px #333;
        }
        
                        
                            
HideShow HTML
                                                <a href="#" class="ml-link-dark">View More</a>
                                                
                    

Accessibility

Buttons are #007ABC and text links are #007ABC when they appear on white, #0061A0 when they appear on gray #f2f2f2 (or another light background of similar value).

To meet accessibility standards, users must be able to use their keyboard to tab between links. Pressing 'Enter' on their keyboard should activate the link. Users must be able to identify these elements as links without relying on color alone.

Visit our Accessibility page for additional considerations.