Faq
A section wrapper that stacks native disclosure components.
Try it
Exclusive FAQ
A FAQ allowing one answer open at a time.
Use it
Working invocation
This code creates the configuration shown above. Copy the template and the required Python context together.
{% include "brickwork_marketing/components/_faq.html" %}context = {'heading': 'Questions', 'single_open': True, 'items': [{'question': 'Does it need Alpine?', 'answer': 'No. It uses native details elements.'}, {'question': 'Can I style it?', 'answer': 'Override Brickwork tokens in your stylesheet.'}]}Guide
Add it to your project
- Use the public include path "brickwork_marketing/components/_faq.html" from the installed django-brickwork package.
- Supply items as list-shaped context.
- Set single_open=true to give every disclosure one native details name.
- Each item must provide question and answer.
Options
Public API
| Option | Type | Default | Required | Description |
|---|---|---|---|---|
| heading | string | Not set | No | Section heading rendered as an `<h2>` by this marketing component. Constraint: Keep it in outline order beneath the page hero h1. |
| items | list of {question, answer} | Not set | No | FAQ records: `{question, answer}` rendered as native disclosure items. Constraint: Every record needs both `question` and `answer`; use trusted rendered content only if the recipe explicitly supports it. |
| items[].question | string | Not set | No | The visible native-disclosure summary for one FAQ item. Constraint: No additional template constraint beyond the documented type. |
| items[].answer | string | Not set | No | Answer content shown when the FAQ disclosure is open. Constraint: No additional template constraint beyond the documented type. |
| single_open | boolean | False | No | Use native exclusive open behaviour. Constraint: No additional template constraint beyond the documented type. |
Behaviour
Accessibility and responsive behaviour
- Accessibility
- h2 plus native details/summary provides keyboard behaviour and semantic disclosure.
- Responsive
- No component breakpoint. Two-column layouts are page composition.
- Without JavaScript
- Fully functional without JavaScript through native details.
Need help?
Troubleshooting
More than one answer remains open.
Set `single_open` truthy for the component’s single-disclosure mode; leave it false when readers should compare answers.
Explore next