NordSecurity.Design

Picture

Overview

Component that can be used to display images in a consistent and structured way.

When to use

  • Use images to enhance content on the website and help sell a story.

When to use

  • Don’t use images as the primary content.

Anatomy

  1. Picture

Variants & States

Accessibility

Each instance of <img> should include an alt attribute. If the picture is purely decorative, the alt attribute can be left blank. Otherwise, the alt attribute should contain a text value that explains the nature of the picture for users of Assistive Technology.

This alt decision tree can help you decide whether and how to provide alternative text.

Make sure any text in pictures of text is at least 14 points and has good contrast with the background.

Internationalization

For RTL (right-to-left) languages, adjust some component images and all background images to fit the RTL layout.

Accessibility

Accessibility

Each instance of <img> should include an alt attribute. If the picture is purely decorative, the alt attribute can be left blank. Otherwise, the alt attribute should contain a text value that explains the nature of the picture for users of Assistive Technology.

This alt decision tree can help you decide whether and how to provide alternative text.

Make sure any text in pictures of text is at least 14 points and has good contrast with the background.

Properties

Name Type Values Description
isFullWidth boolean true
false		 Determines if the picture should take up the full width.
flipOnRTL boolean true
false		 Indicates if the picture should be mirrored on RTL locales

Usage Guidelines

DoProvide images in the correct aspect ratio to prevent distortion.
DoEnsure that the images are properly localized to match the user's language and region.
DoConsider the responsive behavior of the image to ensure it looks good on all devices and screen sizes.
DoIf the image is just decorative or repeats information from nearby text, set alt="" to let assistive technology users know they can skip it.
DoUse images hosted in Bynder.
DoProvide pictures in PNG and SVG formats.
DoOptimize SVG images to improve load times and performance.
Don’tUse images as the primary content.
Don’tDon't use images that aren't aligned with our brand's style.
Don’tPut an extensive amount of text inside the image.
Don’tUse media type or undescriptive text as alt text such as "an image".
Don’tUse images to enhance content on the website and help sell a story.
Don’tDon't use images as the primary content.

Content Guidelines

We use images to support content or illustrate information.

Voice and tone

  • If an image contains text that is not available elsewhere, we write it in NordVPN’s voice — simple, human, and credible, like a knowledgeable friend — and adjust the tone to fit the situation.
  • If an image has alt text, we use a factual tone that helps users understand the content.

Accessibility

We provide alt text when an image has meaning or function and skip alt text for decorative images.

  • We focus on the purpose of the image, not its appearance.
  • For icons, we state the function.
  • For images used as links or buttons, we describe the action or destination.
  • For graphics, we give a simple description that conveys the meaning.
  • We do not repeat information already present in nearby text.
  • We skip articles in alt text unless they’re necessary for clarity.
DoGo to settings. Button
Don’tGear icon. Go to settings. Button