Saltar al contenido principal
Dapols

FAQ prompt

Free

Smooth Editorial FAQ Accordion

An editorial FAQ with a sticky green illustration panel, large serif numerals and a numbered accordion whose open item lifts into a glowing card. Built on native details and summary, with smooth height animation, one answer open at a time and no JavaScript.

  • Minimal
  • Cl
  • Cu
  • v0
  • Lo
  • Bo
  • GP
Open fullscreen(opens in a new tab)

A live preview. All names and text in it are placeholders.

Want this on your own site? Pick it for your plan.

Copy the prompt

Pick your AI tool, copy, and paste it in. Replace anything in [SQUARE BRACKETS] with your own content.

Which AI tool are you pasting this into?

ROLE AND GOAL
Build an editorial FAQ section with a smooth accordion for a marketing or product site. Questions are native details and summary elements, so semantics and keyboard behaviour come free. The left column is a sticky panel: eyebrow, a large serif heading with one italic accent word, a lead line and a deep green card with a small abstract illustration (a question mark core with orbiting answer chips) and a contact line. The right column is a numbered list with large serif numerals; the open item lifts into a white card with an accent bar, a glowing filled icon and a smooth height animation. Only one answer is open at a time. The mood is calm, editorial and premium, and it should make a visitor want the rest of the site.

STACK
React + TypeScript (single component, no extra libraries) with one scoped style block for the CSS. Plain HTML/CSS version on request. Works in Claude, Cursor, v0, Lovable and Bolt. No JavaScript at all: not for the toggle, not for the animation, not for the one-open-at-a-time rule.

DESIGN TOKENS
Colors, light theme: paper #F5F1E8, ink #14201A, muted ink #515C55, accent green #1B7A4E, text on accent #FFFFFF, open card #FFFFFF, hairline rgba(20,32,26,0.14), icon outline rgba(20,32,26,0.4), closed numerals rgba(20,32,26,0.26), hover tint rgba(27,122,78,0.07), focus ring #1B7A4E, page glow rgba(46,170,115,0.26) at the top left and rgba(236,196,120,0.3) at the bottom right, open-card shadow 0 0 0 1px rgba(20,32,26,0.1), 0 34px 56px -32px rgba(10,44,32,0.5), grain opacity 0.07 with multiply blend.
Colors, dark theme: paper #0C120F, ink #EEF3EE, muted #A3B0A8, accent #5BD394, text on accent #0A140F, open card #141E19, hairline rgba(255,255,255,0.11), icon outline rgba(255,255,255,0.4), closed numerals rgba(255,255,255,0.24), hover tint rgba(91,211,148,0.08), focus ring #5BD394, page glow rgba(40,180,120,0.22) and rgba(210,160,80,0.1), open-card shadow 0 0 0 1px rgba(255,255,255,0.1), 0 34px 56px -30px rgba(0,0,0,0.9), grain opacity 0.14 with overlay blend.
Green panel (both themes): background 160deg #176A4C, #0D3F2D at 52 percent, #08271D; text #EAF7F0; muted #A9D8C2; mint #7FE3B0; inset 1px top highlight rgba(255,255,255,0.22); shadow 0 34px 54px -30px rgba(6,40,28,0.8); a soft mint radial rgba(127,227,176,0.35) from the top right.
Fonts: headings and numerals in a serif stack: Iowan Old Style, Palatino Linotype, Palatino, Book Antiqua, Georgia, serif, weight 500 (numerals weight 400). Everything else Inter with fallback ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, weights 400, 600 and 700 (eyebrow). If web fonts are not available, use the fallbacks.
Type scale: heading clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem), line-height 1, letter-spacing -0.035em, the last word italic in the accent color; eyebrow 0.75rem, weight 700, uppercase, letter-spacing 0.14em, inside a pill with a pinging dot; lead 1.0625rem; panel heading 1.5rem serif; numerals clamp(1.875rem, 1.2rem + 1.9vw, 2.75rem), tabular lining figures; question clamp(1.0625rem, 1rem + 0.4vw, 1.375rem), weight 600, line-height 1.3, letter-spacing -0.01em; answer 1rem, line-height 1.65, max width 60ch.
Spacing: section padding clamp(3rem, 6vw, 5rem) vertical, side gutter 1.25rem, content max width 72rem. Item padding 0 1.5rem, summary padding 1.7rem top and bottom, gap between numeral, question and icon 1.25rem. Answer indented 4rem on the left and 3.5rem on the right from 768px, bottom padding 1.75rem. Gap between columns clamp(3rem, 5vw, 5rem).
Shape: open item radius 1.5rem; panel radius 1.75rem; icon is a 2.25rem circle with a 1.5px outline and two 0.8rem bars of 2px; avatars 2rem rings. Closed items are separated by 1px hairlines inset 1.5rem from the sides.

LAYOUT
Mobile (360 and 768): one column in this order: eyebrow, heading, lead, green panel, then the list. Desktop (1024 and 1440): two columns, five parts to seven parts (minmax(0, 5fr) and minmax(0, 7fr)); the left column is position sticky, top 2.5rem, align-self start.
Panel: the illustration on top (a 360 by 190 inline SVG: a centered mint rounded square with a serif question mark, three concentric rings (one dotted), three small answer chips with a check and two text lines floating around it, a sparkle and a few dots), then Still curious?, the contact line with a mailto link, and a row of three overlapping gradient avatar circles beside the placeholder [Typical reply time].
Each item is a details element. All items share name="faq" so opening one closes the others. The first item has the open attribute. Each summary is a three-column grid: numeral (01 to 06, aria-hidden), question, icon circle, vertically centered. Hide the default marker. Answer markup: a div wrapper containing one paragraph. After the list a text link Browse all answers with a short line that grows on hover.
Open state: a card background, the open-card shadow, a 3px accent-to-mint bar on the left edge, the numeral turns accent, the icon fills accent with a glow and turns 180deg.

MOTION
Set interpolate-size: allow-keywords on the section. Inside @supports (interpolate-size: allow-keywords) and selector(::details-content): the details-content pseudo-element gets block-size 0, overflow hidden and transition block-size 380ms cubic-bezier(0.2, 0.7, 0.2, 1) plus content-visibility 380ms allow-discrete; when open, block-size is auto. The answer wrapper fades and slides: closed opacity 0 and translateY(-0.375rem); open opacity 1, 300ms ease for opacity, 380ms for transform, 60ms delay on open.
Icon morph: two bars (::before horizontal, ::after rotated 90deg); on open the vertical bar rotates to 0deg so plus becomes minus, the icon rotates 180deg and fills with the accent, 380ms, same easing. Hover on a closed item: the question slides 4px right and turns accent, the numeral and icon outline turn accent (200ms).
Ambient life: the three answer chips in the illustration float up and down 5px on 7, 8 and 9 second loops and the eyebrow dot pings every 2.6 seconds. Nothing else loops.
Fallback: put the height animation rules ONLY inside the @supports block so older browsers open and close instantly and never hide an answer; keep ::details-content rules out of shared selector lists.
prefers-reduced-motion: reduce: remove every transition and animation, force the answer to full opacity with no transform. States still change, instantly.

CONTENT SLOTS
Everything below is a neutral placeholder. Replace it with real content.
- Eyebrow: FAQ
- Heading: Frequently asked questions (the last word is the italic accent)
- Lead: [One sentence that tells visitors what they can find here.]
- Panel contact line: Can't find your answer? Write to hello@example.com (a reserved example address; replace with your support address); [Typical reply time]
- Q1: What is [Your product] in one sentence?  A1: [Answer in two or three plain sentences. Lead with the direct answer, then add one detail that helps a visitor decide.]
- Q2: How do I get started?  A2: [Describe the first step, what the visitor needs ready, and how long it takes. Link to the signup or booking page.]
- Q3: How much does it cost?  A3: [State the pricing model in one sentence, then point to your pricing page. Only publish figures you can stand behind.]
- Q4: Can I change or cancel later?  A4: [Explain your change and cancellation terms in plain words, including any notice period.]
- Q5: How is my information handled?  A5: [Summarise what you collect and why, and link to your privacy policy. Do not claim certifications you do not hold.]
- Q6: How do I reach a real person?  A6: [Give the contact channel, the hours you answer, and the typical reply time.]
Use five to eight questions and keep the numerals in step. Do not invent statistics, guarantees or response times.

ACCESSIBILITY AND PERFORMANCE
Contrast: ink on paper is above 14:1, muted on paper above 5:1, accent green text on paper above 4.5:1 (light) and 8:1 (dark), panel text #EAF7F0 and #A9D8C2 on the green are above 7:1 and 5:1, icon outline above 3:1. Focus: a 3px outline in the focus color with 3px offset (4px on summaries) on every summary and link; never remove it. Semantics: one section labelled by its h2; native details and summary only, no role overrides, no aria-expanded and no JavaScript; the numerals, icons, grain and illustration are aria-hidden. Keyboard: Tab moves between questions, Enter or Space toggles. Performance: animate only block-size, opacity and transform; no images or libraries; the first item is open in the markup so there is no layout shift.

DO
- Pair a serif heading and numerals with a clean sans for questions and answers, and keep one green family as the only accent.
- Keep the left column sticky on desktop so the heading and the panel stay in view while the reader moves through a long list.
- Let the open item become the focal point: white card, accent bar, filled icon, accent numeral.
- Keep the question text at weight 600 and the answers in muted ink so the list scans quickly.
- Keep animation under 400ms and let the icon, height and fade move together.
- Open the first item by default so the section never looks empty.
- Keep each answer short enough to read without scrolling, and link out for detail.

DON'T
- Don't use purple, blue or rainbow gradients; keep to green, mint and warm paper.
- Don't use JavaScript state, aria-expanded toggles or a custom accordion library when details and summary already do the job.
- Don't animate height with max-height hacks or fixed pixel heights.
- Don't hide answers with display none in the fallback; they must remain reachable and visible when opened.
- Don't use emoji, chevron icons from an icon pack or stock illustrations; the panel illustration is a small inline SVG.
- Don't make the questions smaller than 1.0625rem or the answers lighter than the muted color.
- Don't ship the sample copy: every bracketed line is a placeholder.

Added for Claude

Return one complete file for the component, with all the CSS (including the gradients, pseudo-elements and ::details-content rules) in a style tag inside it. Keep every token exactly as written, then list what you assumed and which browsers will see the instant-open fallback.

Share on X(opens in a new tab)Share on LinkedIn(opens in a new tab)

About this design

This FAQ is built to be looked at, not just read. On desktop a sticky left column holds a large serif heading with one italic accent word, a lead line and a deep green panel with a small illustration of answer chips orbiting a question mark. The right column is a numbered list with big serif numerals and hairline rules; the open question lifts into a white card with an accent bar, a filled glowing icon and a smooth height animation, while the other answers stay closed. Each question is a native details and summary element, so keyboard and screen reader behaviour come free, and a shared name makes the browser close the previous answer, so there is no script at all. The palette is warm paper, ink and one green family, with a soft aurora glow and a little grain behind it, in light and dark. It suits product sites, studios, clinics and services where questions decide the sale. On phones everything stacks into one calm column, and reduced-motion visitors get instant, still changes.

Pairs well with the Ledger, Grove and Quartz Looks in the Dapols website studio. See website examples.

Questions about this design

Does the accordion work without JavaScript?

Yes. It is built from native details and summary elements, which open, close and respond to the keyboard by themselves. A shared name attribute on the details elements makes the browser close the other answers when one opens, so no script is needed for that either.

What happens in browsers that cannot animate the height?

They open and close instantly. The smooth motion relies on interpolate-size and the details-content pseudo-element, and every animation rule sits inside a feature check. Where the check fails, the answer is still fully usable. Where the name attribute is unsupported, items open independently.

How do I add or remove questions?

Copy one details block, keep the same name attribute, and change the number, question and answer text. Five to eight questions work best. Keep the first one open in the markup so the section never looks empty on first load.

More prompts you may like

  • Quiet Grain Hero preview

    HeroWith a plan

    Quiet Grain Hero

    A calm, confident hero on a sheet of grainy paper: one huge tight-tracked headline with a hand-drawn accent loop, a topographic contour map of a mountain lake as the only graphic, one button and one quiet link. Warm off-white, near-black and one restrained accent.

    • Minimal
    • Cl
    • Cu
    • v0
    • Lo
    • Bo
    • GP
    View
  • Emerald Glow Three-Tier Pricing preview

    PricingWith a plan

    Emerald Glow Three-Tier Pricing

    Three pricing plans with a deep emerald, glowing middle plan, a glossy ribbon, a real monthly and yearly switch, icon chips, check-bubble feature lists and an all-plans strip. Aurora glow, fine grid and grain behind a calm emerald palette.

    • Minimal
    • Cl
    • Cu
    • v0
    • Lo
    • Bo
    • GP
    View
  • Facet Scroll Product Showcase preview

    3D and Three.jsWith a plan

    Facet Scroll Product Showcase

    A four-chapter product page with one sticky canvas: a procedural gem in transmissive, dispersive glass lit by a baked studio, on a lit sweep with a rim glow, while the camera dollies along a spline and the finish changes as you scroll. Three.js, no HDR files.

    • Bold
    • Minimal
    • Cl
    • Cu
    • v0
    • Lo
    • Bo
    View

Use this in your own site

Need a whole site, not one section? Pick the designs you like, choose your colors and fonts, and Dapols builds the website for you as part of your plan. Answer a few questions about your business to get started.

Find my planSee the plans