FAQ Open.

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

ConversionSectionNo dependencies Original, MIT

.md

Plain answers.

What does the repair promise cover?: Stitching, zips, seam tape and patches on anything we made, for as long as you own it.
How long does a repair take?: Two working days on average, plus shipping both ways.
Do you ship abroad?: To Canada and the UK today, with duties shown at checkout.
Can I return used gear?: Within 60 days, yes. No form to fill in.

Style

Using Claude Code? Give it the agent prompt and skip these steps.

01
Import the foundation once

foundation.css holds the tokens every component reads.
Layout.astro
```
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```
02
Copy FaqOpen.astro

Paste into src/components/viewership/faq-open/
- FaqOpen.astro

Use it

Page.astro

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

<FaqOpen />

Props 6

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 1 file

src/components/viewership/faq-open/FaqOpen.astro 101 lines

---
/**
 * 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>

Original, MIT.