# FAQ Open

> Every answer visible in a two-column grid on a tinted ground. For short answers people skim.

- **Slug:** `faq-open`
- **Kind:** section · **Category:** Conversion
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/faq-open
- **All files in one bundle:** https://viewership.ai/design/components/faq-open.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/faq-open.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/faq-open/`:

   - `FaqOpen.astro` (raw: https://viewership.ai/design/raw/faq-open/FaqOpen.astro.txt)

npm packages: none.

## Usage

```astro
---
import FaqOpen from "../components/viewership/faq-open/FaqOpen.astro";
---

<FaqOpen />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import FaqOpen from "./FaqOpen.astro";
---

<FaqOpen
  title="Plain"
  accent="answers."
  schema={false}
  items={[
    { q: "What does the repair promise cover?", a: "Stitching, zips, seam tape and patches on anything we made, for as long as you own it." },
    { q: "How long does a repair take?", a: "Two working days on average, plus shipping both ways." },
    { q: "Do you ship abroad?", a: "To Canada and the UK today, with duties shown at checkout." },
    { q: "Can I return used gear?", a: "Within 60 days, yes. No form to fill in." },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | Section headline. |
| `accent` | `string` |  | Closing words of the headline. |
| `intro` | `string` |  | Supporting paragraph. |
| `items` | `{ q: string; a: string }[]` |  | Questions and plain-text answers. |
| `schema` | `boolean` | `true` | Emit FAQPage JSON-LD. |
| `as` | `"h2" \| "h3"` | `"h2"` | Heading element. |

## Source

### `src/components/viewership/faq-open/FaqOpen.astro`

```astro
---
/**
 * FaqOpen: every answer visible in a two-column grid. Best for four to eight
 * short answers that people skim. FAQPage JSON-LD included.
 *
 * @example
 * <FaqOpen title="Plain" accent="answers." items={[{ q: "...", a: "..." }]} />
 */
interface Item {
  q: string;
  a: string;
}
interface Props {
  title: string;
  accent?: string;
  intro?: string;
  items: Item[];
  schema?: boolean;
  as?: "h2" | "h3";
  class?: string;
}

const { title, accent, intro, items, schema = true, as: Heading = "h2", class: className } = Astro.props;
const jsonLd = JSON.stringify({
  "@context": "https://schema.org",
  "@type": "FAQPage",
  mainEntity: items.map((i) => ({ "@type": "Question", name: i.q, acceptedAnswer: { "@type": "Answer", text: i.a } })),
}).replace(/</g, "\\u003c");
---

<section class:list={["vs-faq-open", className]}>
  <div class="vs-faq-open__inner">
    <Heading class="vs-display vs-faq-open__title">{title}{accent && <> <em>{accent}</em></>}</Heading>
    {intro && <p class="vs-faq-open__intro">{intro}</p>}
    <dl class="vs-faq-open__grid">
      {
        items.map((item) => (
          <div class="vs-faq-open__pair">
            <dt>{item.q}</dt>
            <dd>{item.a}</dd>
          </div>
        ))
      }
    </dl>
  </div>
  {schema && <script is:inline type="application/ld+json" set:html={jsonLd} />}
</section>

<style>
  .vs-faq-open {
    container-type: inline-size;
    background: var(--vs-canvas);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
  }
  .vs-faq-open__inner {
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: var(--vs-section-y) var(--vs-gutter);
  }
  .vs-faq-open__title {
    font-size: clamp(2rem, 6.5cqi, 4.25rem);
  }
  .vs-faq-open__intro {
    max-width: 32rem;
    margin: 1.25rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--vs-ink-2);
  }
  .vs-faq-open__grid {
    display: grid;
    gap: 36px clamp(24px, 5cqi, 64px);
    margin: clamp(28px, 5cqi, 56px) 0 0;
  }
  @container (min-width: 700px) {
    .vs-faq-open__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .vs-faq-open__pair dt {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
  }
  .vs-faq-open__pair dt::before {
    content: "";
    display: block;
    width: 28px;
    height: calc(var(--vs-border-w) + 2px);
    margin-bottom: 14px;
    background: var(--vs-accent);
  }
  .vs-faq-open__pair dd {
    margin: 8px 0 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--vs-ink-2);
  }
</style>
```