Accordion

This package provides the Accordion web component.

Installation

Install the component using npm:

npm install @ucalgary-design-system/accordion

Usage

Import the component into your application:

import "@ucalgary-design-system/accordion";

Use the component in your HTML:

<ucds-accordion></ucds-accordion>

💡 Our components automatically load global design tokens when first used. You don’t need to import them manually!

Content Spacing

To ensure consistent layout and spacing across all accordion items, the accordion component resets any default margins and padding on slotted content.

By default, all slotted elements inside an accordion item have their spacing removed:

::slotted(*) {
  margin: 0 !important;
  padding: 0 !important;
}

This guarantees that the accordion’s internal layout and gap value define the visual rhythm, rather than relying on browser or author styles.

Overriding the default spacing

If you need to restore natural or custom spacing on a specific element, apply the .ucds-accordion-override-spacing class to that element. This reverts margins and padding to their normal behavior:

::slotted(.ucds-accordion-override-spacing) {
  margin: revert !important;
  padding: revert !important;
}

Example

<ucds-accordion>
  <p>This paragraph follows the accordion’s spacing rules.</p>
  <p class="ucds-accordion-override-spacing">
    This paragraph restores its default browser spacing.
  </p>
  <ucds-button>Example button</ucds-button>
</ucds-accordion>

In this example:

• The first <p> and <ucds-button> follow the accordion’s spacing system.
• The second <p> restores its native margins using the override class.

Why this approach

Because accordion content can include a mix of text, headings, lists, and components, resetting all margins and padding ensures consistent and predictable spacing. The .ucds-accordion-override-spacing class provides a clear and intentional way to opt out when needed.

Development

Build the component:

npm run build

Alternatively, build from the monorepo root:

npm run build -w @ucalgary-design-system/ucds-accordion

Run storybook from the monorepo root.

Testing

Run the test from this package:

npm run test

Alternatively, run the tests from the monorepo root:

npm run test -w @ucalgary-design-system/ucds-accordion