Updated accordion markup and related CSS

What components does this change affect?

This change affects all implementations of the accordions component.

HTML structure changes:

The previous accordion implementation reused CSS classes associated with the card component, such as "card" and "card-body". This created a dependency between the styling of accordions and cards, meaning changes made to one component could potentially affect the other.

updated class="accordion" to class="ds_accordion"
updated class="card-body" to class="ds_accordion-content"
removed class="card"
removed the <div class="mb-0"> wrapper around the accordion heading and its associated closing div
updated the related CSS to target the new accordion-specific classes

Before

<div class="accordion ">
  <div class="card ">
    <div id="headingaccOneitem1" class="card-header">
      <div class="mb-0">
        <button ...>
          Accordion item title one
        </button>
      </div>
    </div>
    <div id="collapseaccOneitem1" class="collapse " ...>
      <div class="card-body">
        ...
      </div>
    </div>
  </div>
</div>

After

<div class="ds_accordion">
  ...
  <div class="ds_accordion-content">
    ...
  </div>
</div>

Why this change was made

This change separates the accordion's markup and styling from the Card component.

The previous accordion implementation reused generic card and card-body classes. This created a dependency between the styling of accordions and cards, meaning changes made to one component could potentially affect the other.

Using accordion-specific classes makes the component more self-contained and reduces this dependency, making the Design System easier to maintain and evolve.

Benefits include:

improved maintainability – accordion styles can be maintained independently from the Card component
reduced unintended styling changes – updates to Card styles are less likely to affect accordions
clearer component structure – accordion-specific classes make it clearer which styles belong to the accordion component

Recommended checks for consuming teams

After updating your Design System packages, we recommend reviewing accordion usage in your application.

Areas worth checking:

accordions display correctly
accordions expand and collapse as expected
existing accordion styling remains consistent
no application-specific styling or JavaScript relies on the previous accordion classes

Summary

This change updates the accordion markup and related CSS to use accordion-specific classes, separating the component from the styling used by Cards.

No changes to the expected accordion functionality are intended, but consuming applications with custom CSS or JavaScript targeting the previous accordion classes should review their implementation.

Internal reference

Design System internal reference: 103823

Updated accordions markup and related CSS