How do I update my profile?

Open the profile menu and choose Account settings.

Where can I find billing details?

Open Settings, then choose Billing.

How do I enable notifications?

Go to Settings > Notifications and toggle the options you need.

ASSET_SPEC // COMPACT_INLINE_FAQ

Compact Inline FAQFAQ template

A minimalist, space-saving FAQ design for sidebars or mid-article content.

Live_Preview_Environment

When_to_Use

Choose the compact inline FAQ when space is tight, such as sidebars, inline inserts, or mobile surfaces. Small type and a bordered card keep it dense without losing contrast.

Source_Manifest

Source_Inspector // HTML

<aside aria-labelledby="quick-faq-heading" style="max-width: 24rem; border: 1px solid #d1d5db; border-radius: 0.5rem; padding: 1rem; font-family: sans-serif;">
  <h2 id="quick-faq-heading" style="font-size: 1rem; margin: 0;">Quick FAQ</h2>
  <dl style="margin: 1rem 0 0;">
    <dt style="font-weight: 600;">Fast setup?</dt>
    <dd style="margin: 0.25rem 0 1rem; color: #4b5563;">Get running quickly with our CLI tool.</dd>
    <dt style="font-weight: 600;">API access?</dt>
    <dd style="margin: 0.25rem 0 0; color: #4b5563;">Check the plan comparison and API documentation for current access details.</dd>
  </dl>
</aside>

READ_ONLY

<div class="max-w-sm rounded-lg border border-gray-200 p-4">
  <h4 class="text-sm font-bold uppercase tracking-wider text-gray-500">Quick FAQ</h4>
  <dl class="mt-4 space-y-4">
    <div>
      <dt class="text-sm font-semibold text-gray-900">Fast setup?</dt>
      <dd class="mt-1 text-sm text-gray-600">Get running quickly with our CLI tool.</dd>
    </div>
    <div>
      <dt class="text-sm font-semibold text-gray-900">API access?</dt>
      <dd class="mt-1 text-sm text-gray-600">Check the plan comparison and API documentation for current access details.</dd>
    </div>
  </dl>
</div>

READ_ONLY

interface CompactFaqItem {
  id: string;
  question: string;
  answer: string;
}

const defaultItems = [
  { id: '1', question: 'Fast setup?', answer: 'Get running quickly with our CLI tool.' },
  { id: '2', question: 'API access?', answer: 'Check the plan comparison and API documentation for current access details.' }
];

export function CompactInlineFaq({ items = defaultItems }: { items?: CompactFaqItem[] }) {
  return (
    <aside className="p-4 rounded-xl bg-white border border-gray-100 shadow-sm max-w-xs">
      <h3 className="text-xs font-bold text-blue-600 uppercase tracking-widest mb-4">Quick Answers</h3>
      <dl className="space-y-4">
        {items.map((item) => (
          <div key={item.id} className="group">
            <dt className="text-sm font-bold text-gray-900 group-hover:text-blue-600 transition-colors">
              {item.question}
            </dt>
            <dd className="mt-1 text-sm text-gray-600 leading-relaxed">
              {item.answer}
            </dd>
          </div>
        ))}
      </dl>
    </aside>
  );
}

READ_ONLY