FAQ

Display collapsible questions and answers. Each FAQ has a visible question header and a hidden answer revealed upon interaction. Use icons, variants, and sizing for visual control.

The FAQ component supports 9 different variants, each with its own color scheme and styling:

What is this?

This is the default FAQ.

What is this?

This is the dark FAQ.

What is this?

This is the light FAQ.

What is this?

This is the brand FAQ.

What is this?

This is the primary FAQ.

What is this?

This is the secondary FAQ.

What is this?

This is the success FAQ.

What is this?

This is the warning FAQ.

What is this?

This is the danger FAQ.

<x-andach-faq question="What is this?" answer="This is the default FAQ." />
<x-andach-faq question="What is this?" answer="This is the dark FAQ." variant="dark" />
<x-andach-faq question="What is this?" answer="This is the light FAQ." variant="light" />
<x-andach-faq question="What is this?" answer="This is the brand FAQ." variant="brand" />
<x-andach-faq question="What is this?" answer="This is the primary FAQ." variant="primary" />
<x-andach-faq question="What is this?" answer="This is the secondary FAQ." variant="secondary" />
<x-andach-faq question="What is this?" answer="This is the success FAQ." variant="success" />
<x-andach-faq question="What is this?" answer="This is the warning FAQ." variant="warning" />
<x-andach-faq question="What is this?" answer="This is the danger FAQ." variant="danger" />

Customisation

In addition to these unique variables, there are also generic arguments available for all components.

Attribute Name	Type	Default Value	Description
question	string	''	The visible question text that toggles the answer.
answer	string	''	The hidden answer revealed when the question is expanded.

Usage Examples

How do I enable dark mode?

Set the variant to 'dark' to enable dark styling.

Can I customise the size?

Yes, use the size attribute to change padding and font size.

<x-andach-faq
    question="How do I enable dark mode?"
    answer="Set the variant to 'dark' to enable dark styling."
    variant="dark"
/>

<x-andach-faq
    question="Can I customise the size?"
    answer="Yes, use the size attribute to change padding and font size."
    size="lg"
/>

Size Variations

Choose from five different sizes to match your design needs:

Extra Small FAQ?

This is an extra small FAQ.

Small FAQ?

This is a small FAQ.

Base FAQ?

This is the base size FAQ.

Large FAQ?

This is a large FAQ.

Extra Large FAQ?

This is an extra large FAQ.

<x-andach-faq size="xs" question="Extra Small FAQ?" answer="This is an extra small FAQ." />
<x-andach-faq size="sm" question="Small FAQ?" answer="This is a small FAQ." />
<x-andach-faq size="base" question="Base FAQ?" answer="This is the base size FAQ." />
<x-andach-faq size="lg" question="Large FAQ?" answer="This is a large FAQ." />
<x-andach-faq size="xl" question="Extra Large FAQ?" answer="This is an extra large FAQ." />

Attributes

Control styling with boolean attributes:

No border?

This FAQ has no border.

With ring?

This FAQ has a ring.

With shadow?

This FAQ has a shadow.

Square corners?

This FAQ has square corners.

<x-andach-faq variant="primary" question="No border?" answer="This FAQ has no border." :border="false" />
<x-andach-faq variant="warning" question="With ring?" answer="This FAQ has a ring." :ring="true" />
<x-andach-faq variant="brand" question="With shadow?" answer="This FAQ has a shadow." :shadow="true" />
<x-andach-faq variant="success" question="Square corners?" answer="This FAQ has square corners." :rounded="false" />