Accordion — Norbielink Design System

What is a design system? expand_more

A design system is a collection of reusable components, patterns, and guidelines that teams use to build products consistently at scale.

How do I use the components? expand_more

Each component page contains usage guidelines, variants, specs, and copy-ready code examples.

Is dark mode supported? expand_more

Yes — toggle dark mode with the moon icon in the nav rail. All components have fully specified dark mode tokens.

<div class="acc-wrap">
  <div class="acc-item open">
    <div class="acc-header" onclick="toggleAcc(this)">
      What is a design system?
      <span class="material-icons-round">expand_more</span>
    </div>
    <div class="acc-body">
      A design system is a collection of reusable components...
    </div>
  </div>

  <div class="acc-item">
    <div class="acc-header" onclick="toggleAcc(this)">
      How do I use the components?
      <span class="material-icons-round">expand_more</span>
    </div>
    <div class="acc-body">Each component page contains usage guidelines...</div>
  </div>
</div>

Installation

The Accordion is built with pure HTML and CSS. No additional packages required — just include ds-shared.css and the component styles.

pnpm add @norbielink/ds

Or copy the component CSS directly from the source and include <link rel="stylesheet" href="ds-shared.css"> in your HTML.

Usage

Import

import '@norbielink/ds/accordion.css';
// or link directly in HTML:
<link rel="stylesheet" href="ds-shared.css">

Basic structure

<!-- Wrap all items -->
<div class="acc-wrap">

  <!-- Single item (add "open" class to expand by default) -->
  <div class="acc-item">
    <div class="acc-header" onclick="toggleAcc(this)">
      Trigger label
      <span class="material-icons-round">expand_more</span>
    </div>
    <div class="acc-body">Content goes here.</div>
  </div>

</div>

<!-- JS toggle function -->
<script>
function toggleAcc(header) {
  const item = header.closest('.acc-item');
  item.classList.toggle('open');
}
</script>

Examples

Bordered (default)

Can I customize the tokens?expand_more

Yes — all design tokens are defined as CSS custom properties in ds-shared.css. Override them in your own stylesheet.

What fonts are used?expand_more

All typography uses Montserrat from Google Fonts, across weights 300–800.

Is there a Figma kit?expand_more

Yes, the Norbielink Figma library is available. Connect via the MCP Figma integration.

<div class="acc-wrap">
  <div class="acc-item open">
    <div class="acc-header" onclick="toggleAcc(this)">
      Can I customize the tokens?
      <span class="material-icons-round">expand_more</span>
    </div>
    <div class="acc-body">Yes — all design tokens are CSS custom properties.</div>
  </div>
</div>

Flush (no outer border)

Accordion Item 1 (open) expand_less

This is the flush variant — no outer border-radius or container border.

Accordion Item 2 expand_more

<!-- Flush: use border-top on wrapper, border-bottom per item -->
<div style="border-top:1px solid #E5E7EB">
  <div style="border-bottom:1px solid #E5E7EB">
    <div class="acc-header" style="padding:16px 20px">
      Label
      <span class="material-icons-round">expand_more</span>
    </div>
    <div>Content</div>
  </div>
</div>

API Reference

.acc-wrap

Property	Value	Notes
`border-radius`	12px	Outer container radius
`border`	1px solid #E5E7EB	Container border
`background`	#fff	Card background

.acc-item

Class / State	Effect
acc-item	Single accordion row, collapsed by default
acc-item.open	Expands `.acc-body` and shows purple icon
acc-header	Clickable trigger row — pass `onclick="toggleAcc(this)"`
acc-body	Hidden content area, shown when parent has `open`

Dark variant: .acc-wrap-dark

Property	Value
Background	#191D35
Border	1px solid rgba(255,255,255,0.08)
Header color	rgba(255,255,255,0.85)
Body color	rgba(255,255,255,0.5)
Active icon color	#C084FC
Active bg	rgba(92,46,212,0.08)