UI PATTERNS
Toggle panel variations
Eight accordion and toggle layouts. FAQ sections, feature reveals, spec lists, and more. All functional.
FAQ
Frequently asked questions
What is included in the free plan?
The simplest toggle pattern. Horizontal lines separate each item. A plus icon rotates to an X when open. Clean, universal, works for any content type.
How does billing work?
Monthly or annual billing. Annual saves 20%. You can switch plans or cancel anytime from your account settings. No hidden fees.
Can I cancel anytime?
Yes. No lock-in, no penalties. Cancel from your dashboard and your subscription ends at the current billing period.
Do you offer a refund?
Full refund within 14 days of any charge. No questions asked. Just reach out to support.
Is there an API?
Yes. RESTful API with comprehensive documentation. Available on Pro plans and above.
HELP
Common questions
How do I get started?
Each item is its own card with a border and rounded corners. When open, the content slides down inside the card. Chevron rotates as indicator.
What integrations do you support?
Slack, GitHub, Figma, Jira, Linear, Notion, and 50+ more through Zapier. Custom webhooks available on Pro.
Is my data secure?
AES-256 encryption at rest. TLS 1.3 in transit. SOC 2 Type II certified. Regular third-party penetration testing.
Can I export my data?
Full data export anytime in CSV or JSON. Automated backups available on all paid plans.
FAQ
Have questions?
If you can't find what you're looking for, reach out to our support team.
What makes this different from competitors?
Heading and CTA on the left, accordion on the right. The split layout gives the FAQ context and a fallback action if the answer isn't in the list.
How long does setup take?
Under 5 minutes for basic setup. Full configuration with integrations typically takes under an hour.
Do you offer onboarding support?
Free onboarding call included with every paid plan. Enterprise gets a dedicated onboarding specialist.
What's your uptime guarantee?
99.9% uptime SLA on all paid plans. Status page available at status.example.com with real-time incident tracking.
Can I use it for client projects?
Yes. Agency and team plans support multiple workspaces with separate billing per client.
DETAILS
Everything you need to know
What technologies do you use?
Same card pattern on a dark background. The subtle border and translucent fill create depth without competing with the text.
How do you handle scaling?
Auto-scaling infrastructure on AWS. Traffic spikes are handled automatically with zero downtime.
Where is data stored?
US-East and EU-West regions available. Choose your region during onboarding. Data residency guaranteed.
What's your backup policy?
Continuous backups with 30-day retention. Point-in-time recovery available on Enterprise plans.
PROCESS
How it works, step by step
1
Create your account
Numbers create a sequential feel. This pattern works great for process explanations, how-it-works sections, or step-by-step guides where order matters.
2
Connect your tools
One-click integrations with your existing stack. Slack, GitHub, Figma, and 50+ more through our marketplace.
3
Configure your workspace
Set up teams, permissions, and workflows. The guided setup wizard handles most of the configuration automatically.
4
Go live
One click and you're live. Monitor everything from your dashboard. The whole process takes under 10 minutes.
5
Scale and optimize
Use built-in analytics to find bottlenecks. Automated suggestions help you improve over time.
FAQ
Two columns of questions
How do I get started?
Two columns let you fit more questions above the fold. Good for pages where the FAQ list is long but individual answers are short.
What's the pricing?
Free plan available. Pro starts at $29/month. Enterprise pricing is custom. All plans include core features.
Is there a free trial?
14-day free trial on all paid plans. No credit card required. Full access to every feature.
Do you offer support?
Email support on all plans. Live chat on Pro. Dedicated account manager on Enterprise.
Can I import my data?
CSV, JSON, and direct API imports supported. Migration guides available for all major platforms.
Is there a mobile app?
iOS and Android apps available. Full feature parity with the web version. Offline mode included.
FEATURES
Expand for details
Analytics dashboard
Icon prefix gives each panel a visual identity. Works well for feature lists where each item has a distinct category or function.
Automation engine
Build workflows visually. Drag triggers and actions together. Conditional branching, loops, and error handling built in.
Team management
Invite members, set roles, and manage permissions. Activity feeds and audit logs track every action.
API & webhooks
RESTful API with OpenAPI spec. Real-time webhooks for every event. SDKs for Python, Node, Ruby, and Go.
SUPPORT
Quick answers
What payment methods do you accept?
This panel gets a white background fill when it opens. The color transition signals the state change and draws attention to the open panel's content.
How fast is your support?
Average response time under 4 hours. Pro users get live chat with under 5 minute response times during business hours.
Can I change plans later?
Upgrade or downgrade anytime. Changes take effect at the next billing cycle. Prorated credits applied automatically.
Do you offer team discounts?
Yes. Volume discounts kick in at 10+ seats. Contact sales for custom pricing on larger teams.
Where can I find documentation?
docs.example.com has guides, API references, and video tutorials. Updated weekly with new content.