---
title:  FAQs with divided rows
category: Marketing
paid: false
isActive: true
ltr: {"svelte":{"svelteTail":[{"code":"<script>\n  let faqsList = [\n    {\n      q: \"What are some random questions to ask?\",\n      a: \"That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.\"\n    },\n    {\n      q: \"Do you include common questions?\",\n      a: \"This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.\"\n    },\n    {\n      q: \"Can I use this for 21 questions?\",\n      a: \"Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.\"\n    },\n    {\n      q: \"Are these questions for girls or for boys?\",\n      a: \"The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).\"\n    },\n    {\n      q: \"What do you wish you had more talent doing?\",\n      a: \"If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.\"\n    }\n  ];\n</script>\n\n<section class='py-14'>\n  <div class=\"max-w-screen-xl mx-auto px-4 gap-12 md:flex md:px-8\">\n    <div class='flex-1'>\n      <div class=\"max-w-lg\">\n        <h3 class='font-semibold text-indigo-600'>\n          Frequently asked questions\n        </h3>\n        <p class='mt-3 text-gray-800 text-3xl font-extrabold sm:text-4xl'>\n          All information you need to know\n        </p>\n      </div>\n    </div>\n    <div class='flex-1 mt-12 md:mt-0'>\n      <ul class='space-y-4 divide-y'>\n        {#each faqsList as item, index}\n          <li class=\"py-5\">\n            <summary class=\"flex items-center justify-between font-semibold text-gray-700\">\n              {item.q}\n            </summary>\n            <p class='mt-3 text-gray-600 leading-relaxed'>\n              {@html item.a}\n            </p>\n          </li>\n        {/each}\n      </ul>\n    </div>\n  </div>\n</section>","label":"App.svelte"}]},"html":{"htmlTail":[{"code":"<section class='py-14' x-data=\"{ faqsList: [\n    {\n        q: 'What are some random questions to ask?',\n        a: 'That\\'s exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you\\'re able to find the perfect random question.'\n    },\n    {\n        q: 'Do you include common questions?',\n        a: 'This generator doesn\\'t include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.'\n    },\n    {\n        q: 'Can I use this for 21 questions?',\n        a: 'Yes! there are two ways that you can use this question generator depending on what you\\'re after. You can indicate that you want 21 questions generated.'\n    },\n    {\n        q: 'Are these questions for girls or for boys?',\n        a: 'The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).'\n    },\n    {\n        q: 'What do you wish you had more talent doing?',\n        a: 'If you\\'ve been searching for a way to get random questions, you\\'ve landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.'\n    }\n]}\">\n    <div class=\"max-w-screen-xl mx-auto px-4 gap-12 md:flex md:px-8\">\n        <div class='flex-1'>\n            <div class=\"max-w-lg\">\n                <h3 class='font-semibold text-indigo-600'>\n                    Frequently asked questions\n                </h3>\n                <p class='mt-3 text-gray-800 text-3xl font-extrabold sm:text-4xl'>\n                    All information you need to know\n                </p>\n            </div>\n        </div>\n        <div class='flex-1 mt-12 md:mt-0'>\n            <ul class='space-y-4 divide-y'>\n                <template x-for=\"(item, idx) in faqsList\" :key=\"idx\">\n                    <li class=\"py-5\">\n                        <summary class=\"flex items-center justify-between font-semibold text-gray-700\" x-text=\"item.q\"></summary>\n                        <p class='mt-3 text-gray-600 leading-relaxed' x-html=\"item.a\"></p>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    </div>\n</section>","label":"index.html"}]},"preview":"function App() {\n\n    const faqsList = [\n        {\n            q: \"What are some random questions to ask?\",\n            a: \"That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.\"\n        },\n        {\n            q: \"Do you include common questions?\",\n            a: \"This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.\"\n        },\n        {\n            q: \"Can I use this for 21 questions?\",\n            a: \"Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.\"\n        },\n        {\n            q: \"Are these questions for girls or for boys?\",\n            a: \"The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).\"\n        },\n        {\n            q: \"What do you wish you had more talent doing?\",\n            a: \"If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.\"\n        }\n    ]\n\n    return (\n        <section className='py-14'>\n            <div className=\"max-w-screen-xl mx-auto px-4 gap-12 md:flex md:px-8\">\n                <div className='flex-1'>\n                    <div className=\"max-w-lg\">\n                        <h3 className='font-semibold text-indigo-600'>\n                            Frequently asked questions\n                        </h3>\n                        <p className='mt-3 text-gray-800 text-3xl font-extrabold sm:text-4xl'>\n                            All information you need to know\n                        </p>\n                    </div>\n                </div>\n                <div className='flex-1 mt-12 md:mt-0'>\n                    <ul className='space-y-4 divide-y'>\n                        {faqsList.map((item, idx) => (\n                            <li\n                                className=\"py-5\"\n                                key={idx}>\n                                <summary\n                                    className=\"flex items-center justify-between font-semibold text-gray-700\">\n                                    {item.q}\n                                </summary>\n                                <p\n                                    dangerouslySetInnerHTML={{ __html: item.a }}\n                                    className='mt-3 text-gray-600 leading-relaxed'>\n                                </p>\n                            </li>\n                        ))}\n                    </ul>\n                </div>\n            </div>\n        </section>\n    );\n};","react":{"jsxCss":[],"jsxTail":[{"code":"export default () => {\n\n    const faqsList = [\n        {\n            q: \"What are some random questions to ask?\",\n            a: \"That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.\"\n        },\n        {\n            q: \"Do you include common questions?\",\n            a: \"This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.\"\n        },\n        {\n            q: \"Can I use this for 21 questions?\",\n            a: \"Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.\"\n        },\n        {\n            q: \"Are these questions for girls or for boys?\",\n            a: \"The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).\"\n        },\n        {\n            q: \"What do you wish you had more talent doing?\",\n            a: \"If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.\"\n        }\n    ]\n\n    return (\n        <section className='py-14'>\n            <div className=\"max-w-screen-xl mx-auto px-4 gap-12 md:flex md:px-8\">\n                <div className='flex-1'>\n                    <div className=\"max-w-lg\">\n                        <h3 className='font-semibold text-indigo-600'>\n                            Frequently asked questions\n                        </h3>\n                        <p className='mt-3 text-gray-800 text-3xl font-extrabold sm:text-4xl'>\n                            All information you need to know\n                        </p>\n                    </div>\n                </div>\n                <div className='flex-1 mt-12 md:mt-0'>\n                    <ul className='space-y-4 divide-y'>\n                        {faqsList.map((item, idx) => (\n                            <li\n                                className=\"py-5\"\n                                key={idx}>\n                                <summary\n                                    className=\"flex items-center justify-between font-semibold text-gray-700\">\n                                    {item.q}\n                                </summary>\n                                <p\n                                    dangerouslySetInnerHTML={{ __html: item.a }}\n                                    className='mt-3 text-gray-600 leading-relaxed'>\n                                </p>\n                            </li>\n                        ))}\n                    </ul>\n                </div>\n            </div>\n        </section>\n    );\n};","label":"App.jsx"}]},"vue":{"vueCss":[],"vueTail":[{"code":"<template>\n  <section class='py-14'>\n    <div class=\"max-w-screen-xl mx-auto px-4 gap-12 md:flex md:px-8\">\n      <div class='flex-1'>\n        <div class=\"max-w-lg\">\n          <h3 class='font-semibold text-indigo-600'>\n            Frequently asked questions\n          </h3>\n          <p class='mt-3 text-gray-800 text-3xl font-extrabold sm:text-4xl'>\n            All information you need to know\n          </p>\n        </div>\n      </div>\n      <div class='flex-1 mt-12 md:mt-0'>\n        <ul class='space-y-4 divide-y'>\n          <li class=\"py-5\" v-for=\"(item, index) in faqsList\" :key=\"index\">\n            <summary class=\"flex items-center justify-between font-semibold text-gray-700\">\n              {{ item.q }}\n            </summary>\n            <p class='mt-3 text-gray-600 leading-relaxed' v-html=\"item.a\"></p>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </section>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      faqsList: [\n        {\n          q: 'What are some random questions to ask?',\n          a: 'That\\'s exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you\\'re able to find the perfect random question.'\n        },\n        {\n          q: 'Do you include common questions?',\n          a: 'This generator doesn\\'t include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.'\n        },\n        {\n          q: 'Can I use this for 21 questions?',\n          a: 'Yes! there are two ways that you can use this question generator depending on what you\\'re after. You can indicate that you want 21 questions generated.'\n        },\n        {\n          q: 'Are these questions for girls or for boys?',\n          a: 'The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).'\n        },\n        {\n          q: 'What do you wish you had more talent doing?',\n          a: 'If you\\'ve been searching for a way to get random questions, you\\'ve landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.'\n        }\n      ]\n    };\n  }\n};\n</script>\n","label":"App.vue"}]}}
slug: /faqs
id: "farmui-faq-01"
created_at: 1670156922383
---

<FUIFaqsWithDividedRows />