WidgetFaq3

Source code

A full-width editorial FAQ accordion: a large left-aligned headline, large question rows separated by thin dividers, and a plus/minus toggle. The divider under an open item darkens to mark it as active. All items are collapsed by default.

The title is rendered as HTML, so part of it can be styled inline — e.g. an italic accent with <em class="font-serif">.

https://

Frequently asked questions

Here is what our customers needed to know before signing up

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error.

---
import { WidgetFaq3 } from '@yatoday/astro-ui/astro';
---

<WidgetFaq3
  tagline="Frequently asked questions"
  title='Here is what our customers <em class="font-serif">needed to know</em> before signing up'
  items={[
    {
      title: 'What is included in the service?',
      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    },
    {
      title: 'How do I get started?',
      description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
    },
  ]}
/>

First Item Open

Set openFirstItem to show the first answer on load (openAllItems opens every item).

https://

First item open

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.

<WidgetFaq3
  title="First item open"
  openFirstItem={true}
  items={[
    { title: 'Question 1', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
    { title: 'Question 2', description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.' },
  ]}
/>

Props

Prop	Type	Default	Description
`title`	`string`	-	`Title` in Headline component (HTML allowed)
`subtitle`	`string`	-	`Subtitle` in Headline component
`tagline`	`string`	-	`Tagline` in Headline component
`position`	`left` \| `center` \| `right`	`left`	Headline alignment
`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
`items`	`Array<{title, description}>`	`[]`	FAQ items; `description` is rendered as HTML
`openFirstItem`	`boolean`	`false`	Whether the first item should be open by default
`openAllItems`	`boolean`	`false`	Whether all items should be open by default
`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, merged over the large defaults
`classes.list`	`string`	-	CSS classes for the list wrapper (top divider)
`classes.item`	`string`	-	CSS classes for each FAQ item (bottom divider)
`classes.trigger`	`string`	-	CSS classes for the clickable trigger button
`classes.title`	`string`	-	CSS classes for the question title
`classes.icon`	`string`	-	CSS classes for the plus/minus icon
`classes.content`	`string`	-	CSS classes for the collapsible panel
`classes.description`	`string`	-	CSS classes for the answer text