Logo

Component Blueprint

X: 1280 · Y: 720 · Grid: 8px

Accordion

Composable disclosure primitives for progressive reveal content.

01 Hero Preview

Grid: 8px · Scale: 1:1

02 Usage

TS 

import { FrAccordionModule } from '@frame-ui-ng/components/accordion';

HTML 

<frame-accordion type="single" collapsible [defaultValue]="'item-1'">
  <frame-accordion-item value="item-1">
    <button frameAccordionTrigger type="button">
      <span>Can the trigger include custom content?</span>
      <ng-icon frameAccordionIcon name="tablerChevronDown" size="18"></ng-icon>
    </button>

    <ng-template frameAccordionContent>
      Yes. Triggers can wrap labels, icons, counters, or other inline elements as long as the button stays clear and readable.
    </ng-template>
  </frame-accordion-item>
</frame-accordion>

03 Examples

Basic

A single-select accordion with one expanded section by default.

Component Sheet

Grid: 8px · Scale: 1:1

Use an accordion when related details should stay available on the page without overwhelming the default layout.

Multiple

Allow several related sections to remain expanded for side-by-side scanning.

Component Sheet

Grid: 8px · Scale: 1:1

Let people expand related controls together, like density, label visibility, and surface styling options.

Borders

Toggle the border input to switch between separated rows and a lighter, borderless presentation.

Component Sheet

Grid: 8px · Scale: 1:1

Set border to true when each row should read as a distinct setting or when the accordion sits in a dense configuration panel.

04 Custom Styling

Customize the accordion by scoping design token overrides to a wrapper class. This keeps one-off treatments local while preserving the default component contract everywhere else.

Component Sheet

Grid: 8px · Scale: 1:1

Route urgent issues to chat, send account questions by email, and reserve callbacks for verification-heavy requests.

05 Token Inspector

Hover the highlighted regions to see which accordion tokens control the trigger, content, border, and icon. Click a region to pin it while you inspect the current token values.

Use an accordion when related details should stay available on the page without overwhelming the default layout.

06 Design Tokens

Use these CSS custom properties to tune spacing, typography, borders, motion, and icon behavior without changing the component markup. Override them globally for system-wide defaults or locally on a wrapper class for one-off variants.

SCSS 


  --frame-accordion-radius: var(--frame-radius-md);
  --frame-accordion-item-border: var(--frame-border);
  --frame-accordion-item-radius: 0px;
  --frame-accordion-trigger-min-height: 3.25rem;
  --frame-accordion-trigger-padding-y: 1rem;
  --frame-accordion-trigger-padding-x: 1rem;
  --frame-accordion-trigger-gap: 1rem;
  --frame-accordion-trigger-color: var(--frame-foreground);
  --frame-accordion-trigger-font-size: 0.9375rem;
  --frame-accordion-trigger-font-weight: 500;
  --frame-accordion-trigger-hover-color: var(--frame-foreground);
  --frame-accordion-trigger-disabled-opacity: 0.55;
  --frame-accordion-content-padding-bottom: 1rem;
  --frame-accordion-content-padding-inline: 1rem;
  --frame-accordion-content-color: var(--frame-muted-foreground);
  --frame-accordion-content-font-size: 0.875rem;
  --frame-accordion-content-line-height: 1.6;
  --frame-accordion-content-motion-duration: 220ms;
  --frame-accordion-content-motion-timing: cubic-bezier(0.2, 0, 0, 1);
  --frame-accordion-icon-size: 1rem;
  --frame-accordion-icon-rotation: 180deg;