Accordion | Nordsecurity Design

Overview

Accordions allow the user to hide and reveal content by expanding and collapsing sections.

When to use

To reduce visual clutter and improve the ability to scan a section with lots of content.
To guide the focus of the user to only one part of the section at a time

Anatomy

Title
Text / Content
Indicator Icon - A visual indicator that shows wether the section is currently expanded or collapsed.

Variants & States

isExpanded

The accordion has two distinct component states its either default or isExpanded. isExpanded is the technical term we use to describe the state for being open or expanded and the content of the accordion is fully visible.

States

The component has three states: default, hover, active. These states are named after their css pseudo-class.

The default state is the normal state of the accordion. Hover is activated when the user interacts with an element with a pointing device, but does not necessarily activate it. Active state represents a state that is being activated by the user by clicking on it. The focus state is globally defined, no special adjustment is made on this component.

isSingleOpen

The isSingleOpen property can be used to define an accordion group where only one accordion at a time can be expanded. Once another accordion in the same group is expanded by the user all other ones will be automatically collapsed.

Internationalization

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

Properties

Name	Type	Values
title	String	“”
description	String	“”
isExpanded	Boolean	`true` `false`
isSingleOpen	Boolean	`true` `false`

Usage Guidelines

DoKeep the accordion content limited to simple elements like text and links.

Don’tNever nest an accordion inside itself to create a boxed multi layer component or content.

DoOnly use the the accordion to provide supporting information like for example frequently asked questions.

Don’tNever use Accordions for critical or essential information that the user needs to see immediately.

Content Guidelines

We’re using accordions for content that isn’t essential or required for users to view immediately. If content is crucial, we avoid accordions because users might not realize they need to expand the panel to see it, which could lead to a poor user experience.

Voice and tone

We maintain a supportive and informative tone. We’re concise and direct in the titles, and clear and helpful in the expandable content.

Title

The title should be as brief as possible while still being clear and descriptive.

We phrase titles as a question (for FAQs) or a clear, concise statement summarizing the hidden content. We start with a keyword.
We use sentence case.

DoHow does Scam Protection work?

Don’tClick here to learn more about Scam Protection.

Body copy

Content within a section may be divided into paragraphs and include subheaders if necessary.

We ensure that accordion panels do not overload with excessive content, as this can make the component feel overwhelming and challenging to use.
We provide the answer or a detailed explanation in plain language.
We use sentence case.

DoScam Protection blocks ads, trackers, and malicious websites. It also scans downloaded files for malware.

Don’tScam Protection, a feature provided by NordVPN, serves to effectively prevent unwanted advertisements from appearing and tracking mechanisms from following your online activity, while also performing comprehensive scans on any files you may download to ensure they do not contain harmful software.

Scrolling content

When the accordion content is longer than the viewport, the entire accordion should scroll vertically. Content should not scroll inside an individual panel. Content should never scroll horizontally in an accordion.

Accessibility

We ensure the accordion’s structure and state are properly communicated to assistive technologies.
Screen readers must announce the section title, its role (for example, “collapsible header”), and its current state (expanded or collapsed).
On the web, we use appropriate heading levels for accordion titles to help screen reader users understand the page structure and navigate quickly between sections.
Once expanded, the content becomes part of the normal reading order and is reachable via standard navigation on the platform.