x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<div class="max-w-md"> <div class="w-full" data-controller="ui--accordion" data-ui--accordion-type-value="single" data-ui--accordion-values-value="["item-1"]" id="ui-accordion-a6ef7ce4"> <div class="border-b last:border-b-0" data-ui--accordion-target="item" data-value="item-1" data-state="closed"> <h3 class="contents"><button id="ui-accordion-trigger-c6d927ac" class="group flex w-full items-center gap-3 py-2 text-sm font-medium hover:underline text-left text-primary rounded disabled:pointer-events-none disabled:opacity-50 transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background" type="button" aria-expanded="false" aria-controls="ui-accordion-content-c19c39373d93" data-ui--accordion-target="trigger" data-action="click->ui--accordion#toggle keydown->ui--accordion#keydown"><i data-lucide="chevron-right" class="inline-block w-4 h-4 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90" aria-hidden="true"></i> What is a workspace?</button></h3> <div id="ui-accordion-content-04c40775" role="region" class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-200 data-[state=open]:grid-rows-[1fr]" aria-labelledby="ui-accordion-trigger-c19c39373d93" data-ui--accordion-target="content" data-state="closed"> <div class="overflow-hidden min-h-0"> <div class="pl-8 pb-4 text-sm"> <p class="text-muted-foreground">A workspace holds your team, projects and billing in one place. Everyone you invite sees the same projects.</p> </div> </div> </div> </div> <div class="border-b last:border-b-0" data-ui--accordion-target="item" data-value="item-2" data-state="closed"> <h3 class="contents"><button id="ui-accordion-trigger-4c3f4f27" class="group flex w-full items-center gap-3 py-2 text-sm font-medium hover:underline text-left text-primary rounded disabled:pointer-events-none disabled:opacity-50 transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background" type="button" aria-expanded="false" aria-controls="ui-accordion-content-33e64bba03b2" data-ui--accordion-target="trigger" data-action="click->ui--accordion#toggle keydown->ui--accordion#keydown"><i data-lucide="chevron-right" class="inline-block w-4 h-4 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90" aria-hidden="true"></i> How do I get started?</button></h3> <div id="ui-accordion-content-b531632a" role="region" class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-200 data-[state=open]:grid-rows-[1fr]" aria-labelledby="ui-accordion-trigger-33e64bba03b2" data-ui--accordion-target="content" data-state="closed"> <div class="overflow-hidden min-h-0"> <div class="pl-8 pb-4 text-sm"> <p class="text-muted-foreground">Create an account, name your workspace and invite your team. A short setup guide walks you through each step.</p> </div> </div> </div> </div> <div class="border-b last:border-b-0" data-ui--accordion-target="item" data-value="item-3" data-state="closed"> <h3 class="contents"><button id="ui-accordion-trigger-b21920c8" class="group flex w-full items-center gap-3 py-2 text-sm font-medium hover:underline text-left text-primary rounded disabled:pointer-events-none disabled:opacity-50 transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background" type="button" aria-expanded="false" aria-controls="ui-accordion-content-53cfa1bb48b0" data-ui--accordion-target="trigger" data-action="click->ui--accordion#toggle keydown->ui--accordion#keydown"><i data-lucide="chevron-right" class="inline-block w-4 h-4 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90" aria-hidden="true"></i> Is my data secure?</button></h3> <div id="ui-accordion-content-d8e9ebfc" role="region" class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-200 data-[state=open]:grid-rows-[1fr]" aria-labelledby="ui-accordion-trigger-53cfa1bb48b0" data-ui--accordion-target="content" data-state="closed"> <div class="overflow-hidden min-h-0"> <div class="pl-8 pb-4 text-sm"> <p class="text-muted-foreground">Yes. We use industry-standard encryption and follow GDPR to ensure your data is protected.</p> </div> </div> </div> </div> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="max-w-md"> <%= render(UI::Accordion.new(type: :single, default_value: "item-1")) do |accordion| %> <% accordion.with_item(value: "item-1") do |item| %> <% item.with_trigger { "What is a workspace?" } %> <% item.with_content do %> <p class="text-muted-foreground">A workspace holds your team, projects and billing in one place. Everyone you invite sees the same projects.</p> <% end %> <% end %> <% accordion.with_item(value: "item-2") do |item| %> <% item.with_trigger { "How do I get started?" } %> <% item.with_content do %> <p class="text-muted-foreground">Create an account, name your workspace and invite your team. A short setup guide walks you through each step.</p> <% end %> <% end %> <% accordion.with_item(value: "item-3") do |item| %> <% item.with_trigger { "Is my data secure?" } %> <% item.with_content do %> <p class="text-muted-foreground">Yes. We use industry-standard encryption and follow GDPR to ensure your data is protected.</p> <% end %> <% end %> <% end %></div>No notes provided.
No params configured.