Faq section in card format
Category: FAQ
Below is the component for your context <!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>FAQ Component</title>
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Source+Serif+4:ital,wght@1,600&display=swap" rel="stylesheet">
<style type="text/tailwindcss">@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
.faq-item-transition {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}</style><script src="https://cdn.tailwindcss.com"></script><script>tailwind.config = {
important: '#app-root',
theme: {
extend: {
colors: {
'brand-primary': 'rgb(0, 0, 0)',
'neutral-background': 'rgb(255, 255, 255)',
'neutral-surface': 'rgb(248, 248, 248)',
'text-primary': 'rgb(0, 0, 0)',
'text-secondary': 'rgb(152, 152, 152)',
'text-muted': 'rgb(124, 124, 124)',
'border-grey': 'rgb(248, 248, 248)',
},
fontFamily: {
'primary': ['Inter', 'sans-serif'],
'serif-custom': ['Source Serif 4', 'serif'],
},
borderRadius: {
'faq-card': '24px',
'pill': '50px',
},
boxShadow: {
'faq': 'rgba(108, 113, 128, 0.08) 0px 2px 4px 0px, rgba(108, 113, 128, 0.07) 0px 7px 7px 0px, rgba(108, 113, 128, 0.04) 0px 17px 10px 0px, rgba(108, 113, 128, 0.01) 0px 29px 12px 0px',
}
}
}
}</script></head>
<body id="app-root" class="bg-gray-100 flex items-center justify-center min-h-screen p-6">
<main><div id="faq-container" class="w-[588px] max-w-full min-h-[716.8px] p-12 bg-white rounded-faq-card shadow-faq border-[6px] border-border-grey flex flex-col gap-8 font-primary">
<!-- Header Section -->
<div class="flex flex-col gap-6">
<div class="inline-flex items-center justify-center w-[69.5px] h-7 bg-neutral-surface rounded-pill px-4 py-1.5 backdrop-blur-3xl">
<span class="text-black font-semibold text-base tracking-tight">FAQs</span>
</div>
<div class="max-w-[300px]">
<h2 class="text-[40px] leading-[48px] font-semibold text-text-primary tracking-[-2.4px]">
Frequently Asked <span class="font-serif-custom italic tracking-[-2.8px]">Questions</span>
</h2>
</div>
</div>
<!-- Contact/Email Section -->
<div class="flex items-center gap-6 h-14">
<div class="flex-1 flex flex-col gap-1.5">
<span class="text-text-secondary font-medium text-sm tracking-tight leading-[21px]">Email</span>
<a href="mailto:hello@whenevr.com" class="text-black font-semibold text-base leading-4 tracking-tight">hello@whenevr.com</a>
</div>
<a href="mailto:hello@whenevr.com" class="flex items-center justify-center px-7.5 h-full bg-black text-white rounded-pill font-semibold text-lg tracking-tight hover:opacity-90 transition-opacity px-[30px]">
Get in touch
</a>
</div>
<!-- Accordion Section -->
<div class="flex flex-col gap-2">
<!-- FAQ Item 1 -->
<div class="faq-item w-full h-16 bg-neutral-surface rounded-lg px-4 flex flex-col justify-start overflow-hidden faq-item-transition cursor-pointer group" tabindex="0">
<div class="faq-trigger flex items-center justify-between min-h-[64px] w-full">
<p class="text-text-primary font-semibold text-base tracking-tight">How many design requests can I submit?</p>
<div class="faq-icon w-8 h-8 bg-[rgb(240,240,240)] rounded-pill flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-4.5 h-4.5 transition-transform duration-300 fill-current text-black">
<path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path>
</svg>
</div>
</div>
<div class="faq-answer hidden pb-4 pr-12">
<p class="text-text-muted font-medium text-sm leading-[21px] tracking-tight">
You can submit as many requests as you’d like. They’ll be handled one at a time, in the order they’re added to your Notion board.
</p>
</div>
</div>
<!-- FAQ Item 2 -->
<div class="faq-item w-full h-16 bg-neutral-surface rounded-lg px-4 flex flex-col justify-start overflow-hidden faq-item-transition cursor-pointer group" tabindex="0">
<div class="faq-trigger flex items-center justify-between min-h-[64px] w-full">
<p class="text-text-primary font-semibold text-base tracking-tight">What kind of design work is included?</p>
<div class="faq-icon w-8 h-8 bg-[rgb(240,240,240)] rounded-pill flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-4.5 h-4.5 transition-transform duration-300 fill-current text-black">
<path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path>
</svg>
</div>
</div>
<div class="faq-answer hidden pb-4 pr-12">
<p class="text-text-muted font-medium text-sm leading-[21px] tracking-tight">
Most requests related to web, product, and marketing design are covered. That includes landing pages, UI design, Framer builds, brand assets, and more.
</p>
</div>
</div>
<!-- FAQ Item 3 -->
<div class="faq-item w-full h-16 bg-neutral-surface rounded-lg px-4 flex flex-col justify-start overflow-hidden faq-item-transition cursor-pointer group" tabindex="0">
<div class="faq-trigger flex items-center justify-between min-h-[64px] w-full">
<p class="text-text-primary font-semibold text-base tracking-tight">How fast will I receive my designs?</p>
<div class="faq-icon w-8 h-8 bg-[rgb(240,240,240)] rounded-pill flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-4.5 h-4.5 transition-transform duration-300 fill-current text-black">
<path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path>
</svg>
</div>
</div>
<div class="faq-answer hidden pb-4 pr-12">
<p class="text-text-muted font-medium text-sm leading-[21px] tracking-tight">
Most tasks are completed in two to three business days. Larger or more complex requests may take a bit longer, but we’ll always keep you updated.
</p>
</div>
</div>
<!-- FAQ Item 4 -->
<div class="faq-item w-full h-16 bg-neutral-surface rounded-lg px-4 flex flex-col justify-start overflow-hidden faq-item-transition cursor-pointer group" tabindex="0">
<div class="faq-trigger flex items-center justify-between min-h-[64px] w-full">
<p class="text-text-primary font-semibold text-base tracking-tight">Can I pause my subscription?</p>
<div class="faq-icon w-8 h-8 bg-[rgb(240,240,240)] rounded-pill flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-4.5 h-4.5 transition-transform duration-300 fill-current text-black">
<path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path>
</svg>
</div>
</div>
<div class="faq-answer hidden pb-4 pr-12">
<p class="text-text-muted font-medium text-sm leading-[21px] tracking-tight">
Yes. If you’re in between projects, you can pause at any time. You’ll keep the remaining days of your billing cycle to use later.
</p>
</div>
</div>
<!-- FAQ Item 5 -->
<div class="faq-item w-full h-16 bg-neutral-surface rounded-lg px-4 flex flex-col justify-start overflow-hidden faq-item-transition cursor-pointer group" tabindex="0">
<div class="faq-trigger flex items-center justify-between min-h-[64px] w-full">
<p class="text-text-primary font-semibold text-base tracking-tight">What if I need development too?</p>
<div class="faq-icon w-8 h-8 bg-[rgb(240,240,240)] rounded-pill flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-4.5 h-4.5 transition-transform duration-300 fill-current text-black">
<path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path>
</svg>
</div>
</div>
<div class="faq-answer hidden pb-4 pr-12">
<p class="text-text-muted font-medium text-sm leading-[21px] tracking-tight">
Whenevr is focused on design, but if you need development — especially in Framer — just let us know. We offer it as an add-on when needed.
</p>
</div>
</div>
</div>
</div></main>
<script>
document.addEventListener('DOMContentLoaded', () => {
const faqItems = document.querySelectorAll('.faq-item');
faqItems.forEach(item => {
const trigger = item.querySelector('.faq-trigger');
const answer = item.querySelector('.faq-answer');
const icon = item.querySelector('.faq-icon svg');
trigger.addEventListener('click', () => {
const isOpen = !answer.classList.contains('hidden');
// Close others
faqItems.forEach(other => {
other.querySelector('.faq-answer').classList.add('hidden');
other.querySelector('.faq-icon svg').style.transform = 'rotate(0deg)';
other.style.height = '64px';
});
if (!isOpen) {
answer.classList.remove('hidden');
icon.style.transform = 'rotate(45deg)';
// Calculate dynamic height or use auto
item.style.height = 'auto';
item.style.minHeight = '110px';
}
});
});
});
</script>
</body></html>
change the content
Created by: LandingHero
