FAQ v2
FAQ v2
FAQ v2 is an advanced tabbed accordion system designed to handle complex Q&A structures, nested list numbering, and responsive layout switching between tabbed desktop views and vertical mobile accordions.
Visual Specifications
Section titled “Visual Specifications”| Property | Value |
|---|---|
| Container Max-Width | 1440px (1240px inner) |
| Heading Line | 99x4px (mobile) / 186x6px (desktop) |
| Tab Header | mat-tab-group with custom red ink bar |
| Border | 1px border-radius 18px (tabs/accordions) |
| Animation | @expandCollapse & @fadeContent (CSS variable GPU hinting) |
Layout Variants
Section titled “Layout Variants”Horizontal tab navigation with list-based panel contents.
Vertical accordion stack for streamlined mobile navigation.
Configuration Options
Section titled “Configuration Options”| Option | Type | Description |
|---|---|---|
data.title | string | Section heading |
data.items | object[] | Tab/Accordion item data |
item.label | string | Tab/Accordion title |
item.disabled | boolean | Disables interaction |
item.content | object | Contains title, lists (ordered/unordered), and HTML |
Behavior Patterns
Section titled “Behavior Patterns”| State | Logic |
|---|---|
selectItem() | Switches activeItemId for desktop tab panel switching |
toggleItem() | Switches item.expanded boolean for mobile accordion toggling |
@expandCollapse | Smooth height transition using CSS overflow:hidden |
shimmer | Loading animation state for banner images |
Accessibility
Section titled “Accessibility”- Keyboard navigation (Tab, Enter)
- ARIA roles (
role="tablist") for navigation - Screen reader announcements on expansion state changes
Content Guidelines
Section titled “Content Guidelines”- Q&A Structure: Supports complex nested lists (A. → 1. → a) using CSS counter resets.
- Image Support: Supports responsive images with auto-sanitized alt text.
- HTML Injection:
[innerHTML]is used for dynamic descriptions; ensure content is sanitized.