Bedrock: FAQ page design

[rraue]

Description

in #9491 we build a faq page, this issue is the track the design.

---

Success Criteria

• [x] Mockup is attached
• [x] Wireframe
• [ ] Chad approved
• [x] Dev knows what to do

[rraue]

Mockup:

• Above the fold same like /new
• Single Questions wrapped in emphasis boxes (https://protocol.mozilla.org/patterns/molecules/emphasis-box.html)

[rraue]

Download button at the end

[markteater]

@rraue here's the Desktop version of the FAQ page. I'm including an opened version and a closed version. I wrapped all the questions together in one Emphasis box, but happy to separate them into individual boxes if you'd prefer.

Detail boxes closed:

Detail boxes open:

[rraue]

I love it but for the purpose of SEO they need to be open when the page is visited by a user or crawler. @craigcook is this component possible to be open at load?

[justinkropp]

@rraue @markteater If I could add a suggestion: If it's better for SEO that all these FAQs be initially open, it might make more sense to just list them as a simple list of FAQs and remove the open/close toggle. I would imagine that a user would be less likely to interact with the FAQ if it's already open.

[markteater]

@rraue @justinkropp Here's a simplified FAQ page with the toggles removed. I also added in the "Related questions" to each question if it was in the doc.

[justinkropp]

@markteater My only feedback for the above is this:

For the large FAQ question header, decrease the margin below that header and the answer text and increase the margin above that same header and the "related questions" text above.

Currently that spacing looks equidistant both above and below, which makes it harder to distinguish between which text is associated with what. Does that make sense?

[markteater]

@justinkropp I totally agree. Here's a revised version—what do you think?

[justinkropp]

@markteater This is great. Thanks for making that change.