Title 1
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat.
A FAQ (Frequently Asked Questions) section widget that displays a list of questions with their answers in a responsive grid layout. Uses Card4 components internally and supports customizable columns, icons, and Headline options.
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat.
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat.
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat.
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat.
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat.
This item has a custom icon that overrides the global icon.
---
import { WidgetFaq1 } from '@yatoday/astro-ui/astro';
---
<WidgetFaq1
title="FAQs"
icon="tabler:chevron-right"
classes={{ container: 'max-w-6xl' }}
items={[
{
title: 'Title 1',
description:
'Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat. ',
},
{
title: 'Title 2',
description:
'Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat.',
},
{
title: 'Title 3',
description:
'Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat.',
},
{
title: 'Title 4',
description:
'Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat.',
},
{
title: 'Title 5',
description:
'Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat.',
},
{
icon: 'tabler:star',
title: 'Title 6 (custom icon)',
description:
'This item has a custom icon that overrides the global icon.',
},
]}
/>
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | - | Title in Headline component |
subtitle | string | - | Subtitle in Headline component |
tagline | string | - | Tagline in Headline component |
asHeader | h1 | h2 | h3 | h4 | h5 | h6 | h2 | HTML heading tag to use for the title |
asSubtitle | h1 | h2 | h3 | h4 | h5 | h6 | p | span | div | p | HTML tag to use for the subtitle |
icon | string | - | Default icon for all items. Can be overridden per item |
columns | number | 2 | Number of columns in the grid. From 1 to 4 |
items | Array | [] | Array of Card4 components |
isAfterContent | boolean | false | - |
id | string | - | Specify a unique id for the section |
isDark | boolean | false | Adds the dark CSS class to the WidgetWrapper |
bg | string | - | Set background element |
classes.container | string | - | CSS classes for the root container |
classes.headline.{...} | string | - | CSS classes for the Headline component |