← All patterns
FAQ · HTML + CSS starter
A few good answers
An accessible accordion for answering common questions.
Starter example. Replace the sample content and links before publishing. Paste into an HTML page, or adapt the markup and styles to your framework.
<section class="pp-section" aria-labelledby="section-title">
<p class="pp-label">A fresh perspective</p>
<h2 id="section-title">Glad you asked.</h2>
<p>Make something that feels like you. Start with a strong foundation and make it your own.</p>
<details><summary>Can I customise this section?</summary><p>Yes. Change the text, colours and layout to suit your website.</p></details><details><summary>Does it need a framework?</summary><p>No. This example uses HTML and CSS.</p></details>
</section>
<style>
.pp-section{background:#F9FAFB;color:#0F1521;padding:clamp(2rem,8vw,6rem);font:1rem/1.6 system-ui,sans-serif;border-radius:1.5rem}.pp-section h2{font-size:clamp(2rem,5vw,4rem);line-height:1.05;letter-spacing:-.05em;max-width:16ch;margin:1rem 0}.pp-section p{max-width:52ch}.pp-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em}.pp-action{display:inline-block;background:#0F1521;color:#fff;border-radius:5rem;padding:1rem 1.5rem;margin-top:1.5rem;text-decoration:none}.pp-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:1.5rem;margin-top:2rem}.pp-columns article{padding:1.5rem;background:#fff;color:#0F1521;border-radius:1rem}.pp-section details{padding:1rem 0;border-bottom:.0625rem solid currentColor}.pp-section summary{cursor:pointer}
</style>