UI PATTERNS
Accordion variations
Five accordion layouts. FAQ sections, feature reveals, and step guides. All functional.
FAQ
Frequently asked questions
What is included in the free plan?
The simplest toggle pattern. A horizontal line separates each item and a plus icon rotates into an X when opened.
How does billing work?
Monthly or annual billing. Annual saves 20 percent. Switch plans or cancel anytime from account settings.
Can I cancel anytime?
Yes. No lock-in, no penalties. Cancel from your dashboard and access continues until the current period ends.
Is there an API?
Yes. A RESTful API with full 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. Content slides down inside the card when opened, and the chevron rotates as an indicator.
Is my data secure?
AES-256 encryption at rest, TLS 1.3 in transit. SOC 2 Type II certified with regular third-party penetration testing.
Can I export my data?
Full data export anytime in CSV or JSON. Automated backups are included on all paid plans.
DETAILS
Everything you need to know
What technologies do you use?
Same card pattern on a dark background. A subtle border and translucent fill add 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 are available. Choose your region during onboarding — data residency is guaranteed.
PROCESS
How it works, step by step
Technical note: accordion title block normally holds a single heading block. Here it wraps a flex block instead, letting the number and the question title sit side by side.
1
Create your account
Numbers create a sequential feel. 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 or more through the marketplace.
3
Go live
One click and you are live. Monitor everything from your dashboard — the whole process takes under 10 minutes.
FEATURES
Expand for details
Technical note: same flex block trick as the numbered-steps pattern, this time pairing an icon with the question title inside the title row.
Analytics dashboard
An 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, with conditional branching, loops, and error handling built in.
API & webhooks
RESTful API with an OpenAPI spec. Real-time webhooks for every event, plus SDKs for Python, Node, Ruby, and Go.