0.17.2

WidgetFaq1

Source code

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.

FAQs

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.

Title 2

Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat.

Title 3

Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat.

Title 4

Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat.

Title 5

Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat.

Title 6 (custom icon)

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.',
    },
  ]}
/>

Props

PropTypeDefaultDescription
titlestring-Title in Headline component
subtitlestring-Subtitle in Headline component
taglinestring-Tagline in Headline component
asHeaderh1 | h2 | h3 | h4 | h5 | h6h2HTML heading tag to use for the title
asSubtitleh1 | h2 | h3 | h4 | h5 | h6 | p | span | divpHTML tag to use for the subtitle
iconstring-Default icon for all items. Can be overridden per item
columnsnumber2Number of columns in the grid. From 1 to 4
itemsArray[]Array of Card4 components
isAfterContentbooleanfalse-
idstring-Specify a unique id for the section
isDarkbooleanfalseAdds the dark CSS class to the WidgetWrapper
bgstring-Set background element
classes.containerstring-CSS classes for the root container
classes.headline.{...}string-CSS classes for the Headline component