FAQ

Four questions with visible answers on a subtle surface, beneath a heading and a direct contact link.

Use for a short set of questions readers need to scan, search and compare. Keep these answers visible; reserve disclosure controls for genuinely optional supporting detail.

Build with the LoamUI skill

Already added the LoamUI skill? Copy the prompt below. Your agent will check your project and help complete any missing setup before building.

Prompt

Use the LoamUI skill to build the “FAQ” recipe for my application.

Add your content or describe what you want to change. New to the skill? Add it to your project.

Questions about the nursery

Ordering, membership and growing for the co-op. For anything else, contact the nursery.

Where do you deliver?
Enter your delivery address at the basket to see the options and cost for your order. Plants and bare-root fruit have different delivery options from seed packets; collection from the nursery is also available.
What if a packet does not come up?
Tell us the variety and the harvest year on the packet and we send a replacement from a different batch, or refund it. Germination is tested before listing, but a cold spring can still beat a good batch.
Can a school or allotment society join?
Yes, as a group member. A group pays the household rate, receives the twelve packets as one parcel and can send up to four people to each workshop.
How do I grow something for the bench?
Ask at the nursery or write to the bench. A grower takes on one variety, keeps it the required distance from its relatives, and brings the cleaned seed in after harvest for testing.

TSX

import { useId } from "react";import "./recipe.css";
export default function Recipe() {  const instanceId = useId();  return (    <section className="faq" aria-labelledby={`${instanceId}-faq-title`}>      <div className="inner">        <header>          <h2 id={`${instanceId}-faq-title`}>Questions about the nursery</h2>          <p>            Ordering, membership and growing for the co-op. For anything else,{" "}            <a href="/contact">contact the nursery</a>.          </p>        </header>        <ul className="questions" role="list">          <li>            <h3>Where do you deliver?</h3>            <p>              Enter your delivery address at the basket to see the options and cost for your order.              Plants and bare-root fruit have different delivery options from seed packets;              collection from the nursery is also available.            </p>          </li>          <li>            <h3>What if a packet does not come up?</h3>            <p>              Tell us the variety and the harvest year on the packet and we send a replacement from              a different batch, or refund it. Germination is tested before listing, but a cold              spring can still beat a good batch.            </p>          </li>          <li>            <h3>Can a school or allotment society join?</h3>            <p>              Yes, as a group member. A group pays the household rate, receives the twelve packets              as one parcel and can send up to four people to each workshop.            </p>          </li>          <li>            <h3>How do I grow something for the bench?</h3>            <p>              Ask at the nursery or write to the bench. A grower takes on one variety, keeps it the              required distance from its relatives, and brings the cleaned seed in after harvest for              testing.            </p>          </li>        </ul>      </div>    </section>  );}

CSS

@scope (.faq) to ([class*="loam-"]) {  @layer loamui.components {    :scope {      background: var(--loam-color-bg-subtle);      border-radius: var(--loam-radius-xl);      container: faq / inline-size;    }
    div.inner {      display: block grid;      font-size: var(--loam-text-md);      gap: var(--loam-space-l);      grid-template-columns: minmax(0, 1fr);      margin-inline: auto;      max-inline-size: 44rem;      overflow-wrap: anywhere;    }
    header {      display: block grid;      gap: var(--loam-space-2xs);      grid-template-columns: minmax(0, 1fr);      justify-items: center;      text-align: center;
      > p {        color: var(--loam-color-fg-muted);        margin-block: 0;        max-inline-size: var(--loam-measure);        text-wrap: pretty;      }    }
    h2 {      margin-block: 0;      max-inline-size: 24ch;      text-wrap: balance;    }
    ul.questions {      display: block grid;      gap: var(--loam-space-s);      grid-template-columns: minmax(0, 1fr);      list-style: none;      margin-block: 0;      padding: 0;    }
    li {      display: block grid;      gap: var(--loam-space-3xs);      grid-template-columns: minmax(0, 1fr);      margin-block: 0;
      + li {        border-block-start: 1px solid var(--loam-color-line);        padding-block-start: var(--loam-space-s);      }    }
    h3,    li > p {      margin-block: 0;    }
    @container faq (inline-size < 48rem) {      div.inner {        padding: var(--loam-space-l) var(--loam-space-s);      }    }
    @container faq (inline-size >= 48rem) {      div.inner {        padding: calc(var(--loam-space-l) * 2) var(--loam-space-l);      }    }
    @media (forced-colors: active) {      :scope {        border: 1px solid CanvasText;      }    }  }}

Use this recipe

Copy Recipe.tsx and recipe.css side by side into a React 19 project. Install @loamui/core and load the core stylesheet at your application root, as shown in the installation guide. The component imports its own stylesheet.

Replace the sample policies with accurate answers for the organisation and connect the contact destination. Keep essential ordering information in the ordering flow too. Give distinct FAQ sections distinct headings, and use the appropriate heading levels.

Uses

No components: the element styles and the tokens carry this one on their own.

Design decisions

How this recipe answers the two pillars, and how it composes the primitives. These notes explain the design. The included tests cover structure and selected interactions; check contrast, keyboard behaviour and assistive technology support in your application.

Modern: A section named by its heading, with a native list grouping four questions, each a heading followed by its answer; the contact link is an ordinary anchor and every answer is available without client-side interaction. The section measures a readable inner column through layered, scoped rules that use fluid typography and spacing tokens, logical separators, and mutually exclusive container queries for the outer padding. It stays a plain neutral surface rather than a --loam-context region: questions carry no status, so nothing inside should take a status colour.
Accessible: All answers remain visible for scanning, browser search and comparison. Headings expose the question structure, the contact link offers a next step, and a forced-colour border preserves the section boundary.
Composition: Tokens and element styles provide the surface, type and links. Native HTML supplies all the anatomy this recipe needs; it does not import a component solely to make the answers collapsible.