With subtitle

1import {
2  Accordion,
3  AccordionContent,
4  AccordionItem,
5  AccordionTrigger,
6} from '@/components/ui/accordion'
7 
8const items = [
9  {
10    value: 'starter',
11    title: 'Starter',
12    subtitle: 'For individuals getting started',
13    body: 'Includes 1 project, community support, and 1 GB of storage.',
14  },
15  {
16    value: 'pro',
17    title: 'Pro',
18    subtitle: 'For growing teams',
19    body: 'Unlimited projects, priority support, and 100 GB of storage.',
20  },
21  {
22    value: 'enterprise',
23    title: 'Enterprise',
24    subtitle: 'Advanced security and control',
25    body: 'SSO, audit logs, a dedicated success manager, and a custom SLA.',
26  },
27]
28 
29export function Accordion16() {
30  return (
31    <Accordion className="w-full max-w-md">
32      {items.map((item) => (
33        <AccordionItem key={item.value} value={item.value}>
34          <AccordionTrigger className="items-center">
35            <span className="flex flex-col gap-0.5">
36              <span>{item.title}</span>
37              <span className="text-muted-foreground text-xs font-normal">
38                {item.subtitle}
39              </span>
40            </span>
41          </AccordionTrigger>
42          <AccordionContent className="text-muted-foreground">
43            {item.body}
44          </AccordionContent>
45        </AccordionItem>
46      ))}
47    </Accordion>
48  )
49}