Skip to content
Actian Actian Design System

✍️ Collapse-accordion

Updated 2026-05-19

Confidence anatomy low variants medium motion medium a11y high content low

Overview

Section titled “Overview”

Use to hide/show secondary information to reduce vertical clutter. Best for FAQs or detailed settings sections.

Anatomy

  1. 1
    Container
    the bounding surface — frames the data presentation
  2. 2
    Title or heading (optional)
    identifies what the data represents
  3. 3
    Primary content
    the data itself — text, value, chart, table cells, badge label
  4. 4
    Supporting metadata (optional)
    timestamps, units, counts, attribution
  5. 5
    Visual indicator (optional)
    color dot, icon, badge, or status pill
  6. 6
    Action affordance (optional)
    expand, drill-in, dismiss, or copy

Variants

State
Collapsed
Expanede

Motion

Skeleton Loading

Slug: skeleton-loading

rows/cards reveal with skeleton placeholders during load

Staggered Entrance — Lists, Table Rows, Search Cards

Slug: staggered-entrance

lists, tables, search-result-cards enter with staggered fades

Accordion (expand/collapse)

Slug: accordion-expand-collapse

collapsible cards/sections expand at the accordion pace

Resources

Section titled “Resources”