FAQ

FAQ sections help users find answers quickly without contacting support. These patterns use the <accordion-wc> component and native <details> elements, providing accessible expand/collapse behavior with zero custom JavaScript.

Key features:

• Built on <accordion-wc> for keyboard navigation, ARIA, and indicator styles
• No custom CSS required for accordion behavior
• Responsive grid layout for scan-friendly variant
• Categorized layout for large FAQ lists
• Progressive enhancement — works without JavaScript

The standard FAQ accordion wraps <details> elements in <accordion-wc>. The component handles the chevron indicator, marker hiding, keyboard navigation, and ARIA attributes — no custom CSS needed.

A grid layout that displays all FAQ items at once, arranged in two columns on wider screens. Best for shorter lists (4–8 items) where users benefit from scanning all questions at a glance.

A border-top on each item creates visual separation in the grid:

For large FAQ lists, group questions by topic. Each category gets a heading with an icon, followed by its own <accordion-wc>. This scales well to dozens of questions without overwhelming users.

Minimal CSS for the category heading and icon color:

• Accordion vs Grid: Use accordion for longer FAQ lists (6+ items) to save vertical space. Use the grid for shorter lists where scanning all questions at once is helpful.
• Single-open mode: Add data-single to <accordion-wc> so only one answer is visible at a time. Good for long lists where context switching between answers is unlikely.
• Bordered variant: Add data-bordered for a contained look with dividers between items. Works well when the FAQ sits alongside other card-based content.
• Indicator styles: Use data-indicator="plus-minus" for a +/− style instead of the default chevron. See accordion-wc for all options.
• Open by default: Add the open attribute to a <details> element to have it expanded on page load.
• Question length: Keep questions concise (under 80 characters). Move complex details to the answer section.
• Answer formatting: Use paragraphs, lists, and links within answers. Avoid deeply nested content.
• Grouping: For large FAQ lists (12+ items), the categorized pattern with section headings helps users navigate by topic.
• SEO: Consider adding FAQPage schema markup if your site is eligible for rich results.