@primer/react-brand

--- title: FAQ description: Use the FAQ component to display content in a Q&A format. keywords: ['content', 'questions', 'answers'] ready: true figma: https://www.figma.com/file/BJ95AjraesmRCWsKA013GS/Primer-Brand?node-id=375%3A8130 source: https://github.com/primer/brand/blob/main/packages/react/src/FAQ/FAQ.tsx storybook: '/brand/storybook/?path=/story/components-faq--default' --- ```js import {FAQ, FAQGroup} from '@primer/react-brand' ``` ## Examples ### Default ```jsx <> <FAQ> <FAQ.Heading>Frequently asked questions</FAQ.Heading> <FAQ.Item> <FAQ.Question>What's included in the GitHub for Startups offer?</FAQ.Question> <FAQ.Answer> All GitHub for Startups companies receive up to 20 seats of GitHub Enterprise for free for year one and 50% off year two. Learn more about the features and capabilities of GitHub Enterprise{' '} <a href="https://www.github.com" target="_blank" rel="noreferrer"> here </a> . </FAQ.Answer> </FAQ.Item> <FAQ.Item> <FAQ.Question>Who is eligible to apply?</FAQ.Question> <FAQ.Answer> Startups who meet the following criteria are eligible to apply for the program: <ol> <li> <Text size="300" variant="muted"> Must be associated with a current GitHub for Startups partner. </Text> </li> <li> <Text size="300" variant="muted"> Self-funded or funded (Seed-Series A) </Text> </li> <li> <Text size="300" variant="muted"> Not a current GitHub Enterprise customer </Text> </li> <li> <Text size="300" variant="muted"> Must not have previously received credits for GitHub Enterprise </Text> </li> </ol> </FAQ.Answer> </FAQ.Item> <FAQ.Item> <FAQ.Question>What if my startup is not eligible? Are there other resources for me?</FAQ.Question> <FAQ.Answer> If you’re not currently eligible for the GitHub for Startups but would like to try GitHub Enterprise, please feel to sign up for a trial <a href="https://www.github.com" target="_blank" rel="noreferrer"> here </a> {''}. </FAQ.Answer> </FAQ.Item> <FAQ.Item> <FAQ.Question>How can my organization become a GitHub for Startups partner?</FAQ.Question> <FAQ.Answer> Any investor, accelerator, or startup support organization is eligible to apply for the GitHub for Startups program. <a href="https://www.github.com" target="_blank" rel="noreferrer"> Apply here </a> . </FAQ.Answer> </FAQ.Item> </FAQ> </> ``` ### Grouped FAQs Use `FAQGroup` to display multiple `FAQ` components together. Use `tabAttributes` to add arbitrary attributes to the tabs. This can be useful for tracking analytics or adding custom attributes. ```jsx <div style={{width: '100%'}}> <FAQGroup tabAttributes={(children, i) => ({ 'data-analytics': `faq-tab-${i}`, })} > <FAQGroup.Heading> Frequently asked questions </FAQGroup.Heading> <FAQ> <FAQ.Heading>Using GitHub Enterprise</FAQ.Heading> <FAQ.Item> <FAQ.Question>What is GitHub Enterprise?</FAQ.Question> <FAQ.Answer> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus elementum. </FAQ.Answer> </FAQ.Item> <FAQ.Item> <FAQ.Question>How can GitHub Enterprise be deployed?</FAQ.Question> <FAQ.Answer> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus elementum. </FAQ.Answer> </FAQ.Item> <FAQ.Item> <FAQ.Question>What is GitHub Enterprise Cloud?</FAQ.Question> <FAQ.Answer> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus elementum. </FAQ.Answer> </FAQ.Item> </FAQ> <FAQ> <FAQ.Heading>About GitHub Enterprise</FAQ.Heading> <FAQ.Item> <FAQ.Question>What is the difference between GitHub and GitHub Enterprise?</FAQ.Question> <FAQ.Answer> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus elementum. </FAQ.Answer> </FAQ.Item> <FAQ.Item> <FAQ.Question>Why should organizations use GitHub Enterprise?</FAQ.Question> <FAQ.Answer> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus elementum. </FAQ.Answer> </FAQ.Item> <FAQ.Item> <FAQ.Question>Who uses GitHub Enterprise?</FAQ.Question> <FAQ.Answer> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus elementum. </FAQ.Answer> </FAQ.Item> </FAQ> </FAQGroup> </div> ``` ### GridLine variant Use `variant="gridline"` on both `FAQ` and `FAQGroup` to apply an alternative visual style. ```jsx <div style={{width: '100%'}}> <FAQGroup variant="gridline"> <FAQGroup.Heading> Frequently asked questions </FAQGroup.Heading> <FAQ variant="gridline"> <FAQ.Heading>Using GitHub Enterprise</FAQ.Heading> <FAQ.Item> <FAQ.Question>What is GitHub Enterprise?</FAQ.Question> <FAQ.Answer> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus elementum. </FAQ.Answer> </FAQ.Item> <FAQ.Item> <FAQ.Question>How can GitHub Enterprise be deployed?</FAQ.Question> <FAQ.Answer> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus elementum. </FAQ.Answer> </FAQ.Item> </FAQ> <FAQ variant="gridline"> <FAQ.Heading>About GitHub Enterprise</FAQ.Heading> <FAQ.Item> <FAQ.Question>What is the difference between GitHub and GitHub Enterprise?</FAQ.Question> <FAQ.Answer> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus elementum. </FAQ.Answer> </FAQ.Item> <FAQ.Item> <FAQ.Question>Why should organizations use GitHub Enterprise?</FAQ.Question> <FAQ.Answer> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus elementum. </FAQ.Answer> </FAQ.Item> </FAQ> </FAQGroup> </div> ``` ### Rendering with dynamic data ```jsx filename="noinline" const App = () => { const fixtureData = [ { question: 'How do I render a single paragraph?', answer: ( Vestibulum at dolor justo.{' '} <a href="https://www.github.com" target="_blank" rel="noreferrer"> Curabitur </a>{' '} dictum feugiat elit, vitae vestibulum orci vestibulum sed. Donec interdum ligula at nisi rhoncus malesuada et non eros. ), }, { question: 'What about multiple paragraphs?', answer: ( <React.Fragment> Vestibulum at dolor justo.{' '} <a href="https://www.github.com" target="_blank" rel="noreferrer"> Curabitur </a>{' '} dictum feugiat elit, vitae vestibulum orci vestibulum sed. Donec interdum ligula at nisi rhoncus malesuada et non eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </React.Fragment> ), }, { question: 'Can I render a React Fragment?', answer: ( <React.Fragment> Vestibulum at dolor justo.{' '} <a href="https://www.github.com" target="_blank" rel="noreferrer"> Curabitur </a>{' '} dictum feugiat elit, vitae vestibulum orci vestibulum sed. Donec interdum ligula at nisi rhoncus malesuada et non eros. <ol> <li> <Text size="300" variant="muted"> Must be associated with a current GitHub for Startups partner. </Text> </li> <li> <Text size="300" variant="muted"> Self-funded or funded (Seed-Series A) </Text> </li> <li> <Text size="300" variant="muted"> Not a current GitHub Enterprise customer </Text> </li> <li> <Text size="300" variant="muted"> Must not have previously received credits for GitHub Enterprise </Text> </li> </ol> </React.Fragment> ), }, ] return ( <FAQ> <FAQ.Heading>Frequently asked questions</FAQ.Heading> <> {fixtureData.map(({question, answer}) => { return ( <FAQ.Item key={question} open={false}> <FAQ.Question>{question}</FAQ.Question> <FAQ.Answer>{answer}</FAQ.Answer> </FAQ.Item> ) })} </> </FAQ> ) } render(<App />) ``` ### Toggle color customization `FAQ.Question` toggle colors can be adjusted using one of the following approaches: 1. Override the global `--brand-color-accent-primary` CSS variable (recommended). 2. Use the `toggleColor` prop on `FAQ.Question`. Available options for `toggleColor` are: `AccordionToggleColors` See Storybook for all color options. ```jsx filename="noinline" const App = () => { const customStyles = ` .custom-heading { background: linear-gradient(271.72deg, var(--brand-Accordion-toggle-color-green-blue-start) 7.09%, var(--brand-Accordion-toggle-color-green-blue-end) 96.61%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } ` return ( <ThemeProvider colorMode="dark" className="custom-colors"> <Box padding="spacious" backgroundColor="default"> <style>{customStyles}</style> <FAQ> <FAQ.Heading className="custom-heading">Frequently asked questions</FAQ.Heading> <FAQ.Subheading>Subscriptions & Payments</FAQ.Subheading> <FAQ.Item> <FAQ.Question toggleColor="green-blue"> What are the differences between GitHub Free, GitHub Pro, GitHub Team and GitHub Enterprise plans? </FAQ.Question> <FAQ.Answer> GitHub Free is our basic plan created for individuals and small teams to collaborate on private and public repositories. </FAQ.Answer> </FAQ.Item> <FAQ.Item> <FAQ.Question toggleColor="green-blue">How do I view and manage my subscription?</FAQ.Question> <FAQ.Answer> You can view your account's subscription, your other paid features and products, and your next billing date in your account's billing settings. </FAQ.Answer> </FAQ.Item> <FAQ.Item> <FAQ.Question toggleColor="green-blue">How can I change my GitHub subscription?</FAQ.Question> <FAQ.Answer> You can upgrade or downgrade your subscription, add and remove seats, or change the billing cadence on https://github.com/settings/billing. </FAQ.Answer> </FAQ.Item> </FAQ> </Box> </ThemeProvider> ) } render(<App />) ``` ## Component props ### FAQ `Required` | Name | Type | Default | Description | | :---------- | :------------------------------------------------ | :---------: | :--------------------------------------- | | `className` | `string` | | Sets a custom class | | `id` | `string` | | Sets a custom id | | `ref` | `React.RefObject` | | Forward a Ref to the underlying DOM node | | `children` | `'FAQ.Heading' \| 'FAQ.Subheading' \| 'FAQ.Item'` | | Root element for the FAQ component. | | `variant` | `'default' \| 'gridline'` | `'default'` | Sets the visual variant of the FAQ. | ### FAQ.Heading `Required` | Name | Type | Default | Description | | :------------ | :---------------------- | :--------: | :--------------------------------------- | | `align` | `'start' \| 'center'` | `'center'` | Heading text alignment | | `children` | `string` | | Heading text | | `className` | `string` | | Heading custom class | | `id` | `string` | | Sets a custom id | | `ref` | `React.RefObject` | | Forward a Ref to the underlying DOM node | | `size` | `'medium' \| 'large'` | `'medium'` | Heading text size | | `as` | `HeadingTags` | | Applies the underlying HTML element | | `toggleColor` | `AccordionToggleColors` | | Sets the accordion toggle color | ### FAQ.Subheading | Name | Type | Default | Description | | :---------- | :---------------- | :-----: | :--------------------------------------- | | `children` | `string` | | Sub-heading text | | `className` | `string` | | Sub-heading custom class | | `id` | `string` | | Sets a custom id | | `as` | | `'h3'` | Applies the underlying HTML element | | `ref` | `React.RefObject` | | Forward a Ref to the underlying DOM node | ### FAQ.Item | Name | Type | Default | Description | | :---------- | :------------------------------- | :-----: | :--------------------------------------- | | `open` | `boolean` | `false` | Sets answer visibility | | `className` | `string` | | Sets a custom class | | `children` | `'FAQ.Question' \| 'FAQ.Answer'` | | FAQ question and answer pair | | `id` | `string` | | Sets a custom id | | `ref` | `React.RefObject` | | Forward a Ref to the underlying DOM node | ### FAQ.Question | Name | Type | Default | Description | | :---------- | :---------------- | :--------: | :--------------------------------------- | | `className` | `string` | | Sets a custom class on the root element | | `children` | `string` | | Question text | | `id` | `string` | | Sets a custom id | | `as` | | `'h4'` | Applies the underlying HTML element | | `weight` | `HeadingWeights` | `'normal'` | Sets the font weight of the question | | `ref` | `React.RefObject` | | Forward a Ref to the underlying DOM node | ### FAQ.Answer | Name | Type | Default | Description | | :---------- | :---------------- | :-----: | :------------------------------------------- | | `className` | `string` | | Sets a custom class on the root element | | `children` | `ReactElement` | | `` or `<Text>` components are recommended | | `id` | `string` | | Sets a custom id | | `ref` | `React.RefObject` | | Forward a Ref to the underlying DOM node | ### FAQGroup | Name | Type | Default | Description | | :-------------- | :------------------------------------------------------------------- | :---------: | :---------------------------------------------------------------------------- | | `className` | `string` | | Sets a custom class | | `id` | `string` | | Sets a custom id | | `ref` | `React.RefObject` | | Forward a Ref to the underlying DOM node | | `children` | `'FAQ' \| 'FAQGroup.Heading'` | | Root element for the FAQGroup component. | | `variant` | `'default' \| 'gridline'` | `'default'` | Sets the visual variant of the FAQGroup. | | `tabAttributes` | `(children: ReactElement, index: number) => Record<string, unknown>` | | Spreads the returned attributes onto the tab that's rendered by the FAQGroup. | ### FAQGroup.Heading | Name | Type | Default | Description | | :--- | :------------ | :-----: | :---------------------------------- | | `as` | `HeadingTags` | | Applies the underlying HTML element | Forwards all the props from the [Heading component](../../typography/Heading/index.md), including `size`, and `weight`.