NordSecurity.Design

Card

Overview

Cards are surfaces that help us group and display content and actions on a single related topic. They help create an organized visual hierarchy and help the user easily scan sections with multiple subjects.

When to use

  • To display content or actions related to a single subject

When not to use

  • To display long-form content
  • To provide the user with multiple actions in the same card
  • To inform the user of important changes - use Alert

Anatomy

  1. Card
  2. Picture
  3. Tagline
  4. Title
  5. Text
  6. Button

Variants & States

State

The Card states are named after their css pseudo-class.

Hover is activated when the user interacts with an element with a pointing device but does not necessarily activate it. If the Card is clickable ensure that the user always can click the whole card.

Content

Our cards have great flexibility in the content you are able to add to them. Out of the box, we are providing variations including Badge, Tagline, Button and more. While including a picture is optional, in most cases we highly recommend including it to ensure the maximum scalability for the user.

Slot

Our available content slot can be used to generate the maximum flexibility out of this component. A good example of this is inserting an IconLabelList to present multiple features inside the card to the user.

HasModal

The hasModal property adds a modal-triggering button and makes the entire Card interactive.
It lets users explore additional content without cluttering the Card 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 Card.
  • Clicking the button opens a modal window.
  • The entire Card becomes interactive—users can click anywhere on the Card to trigger the modal.
  • On hover, the image scales up by 5%, along with the modal button.

Internationalization

For RTL (right-to-left) languages, there are no custom adjustments made.

Properties

Name Type Values Description
padding String none
sm
md
lg		 Controls the padding of the card (default = md)

Usage Guidelines

DoKeep the content clear, relevant and short.
Don’tDon't overload the card with excessive content or visuals taht may distract from the main information.
DoOnly use the provided styles for the card.
Don’tDon't change the default stylings for color, text or borders to create a new look.
DoKeep the card content strucutre simple and relevant.
Don’tDon't nest cards inside of cards.
DoOnly provide one main action per card to the user.
Don’tDon't have multiple actions to multiple different subjects inside of a card.
DoIf cards in a row are varying in content length make sure that they are still always share the same height.
Don’tDon't use varying heights in a row of cards.

Content Guidelines

We’re using cards to group and display content and actions related to a single topic. They help create an organized visual hierarchy, allowing users to scan sections with multiple subjects easily.

Voice and tone

We aim for an encouraging and action-oriented tone.

Copy

  • We clearly state the main topic or feature of the card.
  • We use a concise, descriptive phrase.
  • We use sentence case.
  • We use plain language.
  • We avoid excessive text; if more details are needed, we link to them.
  • Including a picture is optional, but we highly recommend adding it.
DoScam Protection
Don’tAll about Scam Protection, our comprehensive security feature.
DoBlock ads, trackers, and malicious websites. Scan downloaded files for malware.
Don’tThis section will provide an overview of the various functionalities and advantages associated with our advanced security feature known as Scam Protection.

Accessibility

  • All interactive elements inside the card should be focusable and properly announced.
  • We ensure the interactive elements and content within the card follow a logical and intuitive reading order. The reading order is usually top-to-bottom and left-to-right, except in right-to-left languages.
  • We skip alt text for decorative images in a card if they don’t add any new information.
  • On the web, we use appropriate heading elements within the card to establish a clear and logical content hierarchy for screen reader navigation.