NordSecurity.Design

Display Tile

Overview

The DisplayTile component is a component designed to display content or information in an attractive and visually engaging way. DisplayTiles are often used to highlight featured or important content in a more prominent and eye-catching manner.

When to use

  • To display content and information in a featured and visually engaging way.

When not to use

  • To display long-form content
  • To provide the user with multiple actions in the same DisplayTile
  • To show a large number of features and information in a small space

Anatomy

  1. DisplayTile
  2. Badge
  3. Heading
  4. Subheading
  5. Button
  6. Asset

Variants & States

Sizes

The DisplayTile comes in three different size variants lg, md & sm. These also dictate how many DisplayTiles are in one row. While lg can always only have one DisplayTile in one row, sm can have up to three in one row. Sizes also define how the asset is placed inside the DisplayTile.

Variant sm icon

For our DisplayTile variant sm, we exclusively use icons as a visual aid. To ensure design balance and great readability, this icon needs to be 48x48 and use the regular style.

Slots

Our available content slot can be used to generate the maximum flexibility out of this component. A good example of this is inserting our supported platforms icons to present the user where NordVPN is available. Its best to be mindful of what is inserted in the slot and ensure the content still looks good even on smaller breakpoints.

darkMode

DisplayTile provides a darkMode property that changes the content colors if a dark or accent background is used.

Currently the backgrounds available are:

  • bg-primary
  • bg-secondary
  • bg-tertiary
  • bg-accent
  • bg-accent-subtle
  • bg-dark

assetPadding

As we have both cases where we want the provided asset to reach all the way to the edge of the DisplayTile as well as cases where the asset should be just in the center and not touch the edge we provide a property to control for these situations.

We offer the property to adjust asset padding in two scenarios:

  1. When the asset should extend to the edge.
  2. When the asset should stay centered without touching the edge.

Layout of multiple DisplayTiles

We wanted to keep laying out a combination of DisplayTiles as easy and simply as possible, that’s why we decided to nest them in our already-existing Stack and Grid components. Below is an example how a full Section of DisplayTiles might be created.

  1. Stack vertical with gap-8 (32px)
  2. Grid (cols-1 [1-1-1-1-1]
  3. Grid (cols-2 [2-2-2-1-1]
  4. Grid (cols-3 [3-3-3-1-1]

HasModal

The hasModal property adds a modal-triggering button and makes the entire DisplayTile interactive.
It lets users explore additional content without cluttering the DisplayTile and adds a subtle image scale effect on hover for medium and large sizes.

When hasModal: true is set:

  • A plus button is displayed in the bottom-right corner of the DisplayTile.
  • Clicking the button opens a modal window.
  • The entire DisplayTile becomes interactive—users can click anywhere on the tile to trigger the modal.
  • On hover, the image scales up by 5%, along with the modal button.
  • The hover effect is applied only to DisplayTile components in medium and large sizes.

The hasModal button supports both light and dark mode.

Internationalization

For RTL (right-to-left) languages, there are no custom adjustments made. The asset side is automatically switched to the opposite side of the DisplayTile.

Properties

Name Type Values Description
variant String lg
md
sm		 Controls the size variant of the DisplayTile
backgroundColor String "" Specifies the background color of the whole DisplayTile
reverse Boolean true
false		 Adjusts on which side of the DisplayTile the asset is placed.
darkMode Boolean true
false		 If set to true automatically adjusts the content text colors.
assetPadding Boolean true
false		 Sets an automatic padding around the asset if true.

Usage Guidelines

DoIt is recommended only to have a small amount of DisplayTiles per page
DoTry to use bullet points instead of paragraphs for easier scanning
DoAligned titles make it easier to scan the provided information
DoParagraphs - 1-2 lines maximum
DoUse less abstract assets + align them with the copy
DoTry to use one style for the DisplayTile layout - either illustrations or photos, don't mix them
DoHave interactive elements, such as buttons or links, easily distinguishable from the background
Don’tUse less contrast colors for the backgroundColor
Don’tDon't overcrowd the DisplayTile with too much content and text
Don’tWhen hasModal is enabled don't add other buttons inside the tile. The modal trigger button should be the only call-to-action.
Don’tTo display content and information in a featured and visually engaging way.
Don’tTo display long-form content
Don’tTo provide the user with multiple actions in the same DisplayTile
Don’tTo show a large number of features and information in a small space
Don’tbg-primary
Don’tbg-secondary
Don’tbg-tertiary
Don’tbg-accent
Don’tbg-accent-subtle
Don’tbg-dark
Don’tA plus button is displayed in the bottom-right corner of the DisplayTile.
Don’tClicking the button opens a modal window.
Don’tThe entire DisplayTile becomes interactive—users can click anywhere on the tile to trigger the modal.
Don’tOn hover, the image scales up by 5%, along with the modal button.
Don’tThe hover effect is applied only to DisplayTile components in medium and large sizes.

Content Guidelines

We use DisplayTitle to highlight featured content in an engaging way. You can find this approach in designs for marketing or mixed purposes.

Voice and tone

Informative while being oriented towards perks, hacks, and benefits overall.

Copy

  • Title
    • Usually 1-2 lines.
    • Sentences are formed naturally without dropping articles.
  • Body
    • Clear guidance towards an action.
    • We keep text short, specific, and easy to scan.
    • If the text seems too long, consider adding interactive components like buttons with feature controls and links to ease its scanning.
DoGet Dark Web Monitor Pro Data leaks don’t stop at your email address. Expand your protection by monitoring your phone numbers, credit cards, and national IDs. Select plan
Don’tExpand your protection With Dark Web Monitor Pro, you can monitor your phone numbers, credit cards, and national ID. Get Dark Web Monitor Pro

Accessibility

  • Make sure that there’s enough context to understand what exactly the buttons or links do. Use clear and descriptive alt texts for buttons and interactive elements when the context is loose. Clarify by repeating parts of the previous text if needed.
  • Add alt text to images and icons only when they add meaning. Skip decorative elements from narration entirely.
Do🖼️ Keep your data private with Incogni [narrator] Keep your data private with Incogni.
Don’t🖼️ Keep your data private with Incogni. [narrator] Incogni, image. Keep your data private with Incogni.