FAQ
Usage
Basic
The simplest example of usage for the ShFaq is with just a list of questions and answers.
FAQs
Q: What is the purpose of this component?
To display a list of FAQs.
Q: How do I use it?
Include the qas property with question-answer pairs.
::ShFaq
---
qas:
- q: "What is the purpose of this component?"
a: "To display a list of FAQs."
- q: "How do I use it?"
a: "Include the qas property with question-answer pairs."
---
::
Advanced settings
An example with customized ui attributes for enhanced display:
FAQs
Q: What is the purpose of this component?
To display a list of FAQs.
Q: How do I use it?
Include the qas property with question-answer pairs.
::ShFaq
---
ui:
header:
wrapper: "font-bold text-xl mb-4"
title: "text-2xl"
wrapper: "border p-4"
inner: "mb-2"
question: "cursor-pointer text-blue-500"
answer: "text-gray-700"
divider: "border-t my-2"
qas:
- q: "What is the purpose of this component?"
a: "To display a list of FAQs."
- q: "How do I use it?"
a: "Include the qas property with question-answer pairs."
---
::
Props
| Prop | Type | Default | Description |
|---|---|---|---|
description | string | "" | Note for content writers. It is not rendered on the website. |
qasrequired | Faq[] | – | Represents the list of question-answer pairs to be displayed in the FAQ component. |
title | string | "FAQs" | The heading text displayed above the list of questions and answers. |
ui | Record<string, any> | – | Overrides the default classes of the UI config below. Values are merged with the defaults using tailwind-merge. |
Slots
This component has no slots.
UI config
Default classes of every styled element. Override any key through the ui prop.
| Key | Default classes | Description |
|---|---|---|
header.wrapper | mt-10 mb-[1.25em] | Container of the header. |
header.title | title text-xl md:text-2xl font-bold | Title of the header. |
wrapper | border border-neutral-300 dark:border-neutral-700 rounded-md | Defines the styling for the container of the FAQ items. This includes borders, padding, and layout. |
inner | mx-3 cursor-pointer | Specifies the styling for individual FAQ items, such as margin and padding. |
question | my-[1.25em] grid grid-cols-2 flex-row font-semibold | Defines the styling for the question part of the FAQ, including cursor and text color. |
q | w-full hover:text-neutral-500 dark:hover:text-neutral-100 duration-200 text-neutral-900 dark:text-golden mx-4 | Defines the text styling for the question part of the FAQ. |
