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
<div class="card flex flex-col gap"> <div class="flex flex-col"> <h3 class="font-medium leading-none mbe-1">Subscription & Billing</h3> <p class="text-sm text-subtle">Common questions about your account, plans, payments and cancellations.</p> </div> <div class="accordion"> <details name="my_accordion"> <summary>What subscription plans do you offer?</summary> <p class="pbe-4"> We offer three subscription tiers: Starter ($9/month), Professional ($29/month), and Enterprise ($99/month). Each plan includes increasing storage limits, API access, priority support, and team collaboration features. </p> </details> <details name="my_accordion"> <summary>How does billing work?</summary> <p class="pbe-4"> Billing occurs automatically at the start of each billing cycle. We accept all major credit cards, PayPal, and ACH transfers for enterprise customers. You'll receive an invoice via email after each payment. </p> </details> <details name="my_accordion"> <summary>How do I cancel my subscription?</summary> <p class="pbe-4"> You can cancel your subscription anytime from your account settings. There are no cancellation fees or penalties. Your access will continue until the end of your current billing period. </p> </details> </div></div>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
<div class="card flex flex-col gap"> <div class="flex flex-col"> <h3 class="font-medium leading-none mbe-1">Subscription & Billing</h3> <p class="text-sm text-subtle">Common questions about your account, plans, payments and cancellations.</p> </div> <div class="accordion"> <details name="my_accordion"> <summary>What subscription plans do you offer?</summary> <p class="pbe-4"> We offer three subscription tiers: Starter ($9/month), Professional ($29/month), and Enterprise ($99/month). Each plan includes increasing storage limits, API access, priority support, and team collaboration features. </p> </details> <details name="my_accordion"> <summary>How does billing work?</summary> <p class="pbe-4"> Billing occurs automatically at the start of each billing cycle. We accept all major credit cards, PayPal, and ACH transfers for enterprise customers. You'll receive an invoice via email after each payment. </p> </details> <details name="my_accordion"> <summary>How do I cancel my subscription?</summary> <p class="pbe-4"> You can cancel your subscription anytime from your account settings. There are no cancellation fees or penalties. Your access will continue until the end of your current billing period. </p> </details> </div></div>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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
:where(.accordion) { details { font-size: var(--text-sm); &:not(:last-child) { border-block-end-width: var(--border); } &::details-content { block-size: 0; opacity: 0; overflow: hidden; transition-behavior: allow-discrete; transition-duration: var(--time-200); transition-property: content-visibility, block-size, opacity; transition-timing-function: var(--ease-out-3); } &[open]::details-content { block-size: auto; opacity: 1; } } summary { align-items: flex-start; cursor: default; display: flex; font-weight: var(--font-medium); padding-block: var(--size-2_5); &:hover { text-decoration: underline; } &:focus-visible { outline: var(--border-2) solid var(--color-selected-dark); } &[aria-disabled="true"] { opacity: var(--opacity-50); pointer-events: none; } &::after { background-color: currentColor; block-size: var(--size-4); color: var(--color-text-subtle); content: ""; inline-size: var(--size-4); margin-inline-start: auto; mask-image: url("chevron-down.svg"); mask-size: cover; transition-duration: var(--time-200); transition-property: transform; transition-timing-function: var(--ease-out-3); } details[open] > &::after { transform: var(--rotate-180); } }}
Java Script is not required or multiple files are needed, check the notes.
No notes provided.