Inline Q&A

A flowing conversational layout where questions appear in serif and answers in sans-serif with a bold speaker name prefix. Different from the Interview block (which uses numbered questions) — this is more editorial and conversational.

Syntax

<div data-nama="inline-qa" class="nama-inline-qa">
  <div data-nama="inline-qa-title" class="nama-inline-qa-title">Community Spotlight  |  Jen Hansard</div>
  <div data-nama="inline-qa-block" class="nama-inline-qa-block">
    <div data-nama="inline-qa-answer" class="nama-inline-qa-answer">
      <span data-nama="inline-qa-name" class="nama-inline-qa-name">Jen:</span> Opening statement or intro text.
    </div>
    <p>Continuation paragraph with more detail.</p>
  </div>
  <div data-nama="inline-qa-block" class="nama-inline-qa-block">
    <div data-nama="inline-qa-question" class="nama-inline-qa-question">Q: What inspired you to start juicing?</div>
    <div data-nama="inline-qa-answer" class="nama-inline-qa-answer">
      <span data-nama="inline-qa-name" class="nama-inline-qa-name">Jen:</span> It started with wanting more energy.
    </div>
  </div>
</div>

Specs

Element	Style
Title	Sans-serif, 32px desktop / 24px mobile, 300 weight, 1.06 line-height, charcoal.
Question	Serif, 24px desktop / 20px mobile, 300 weight, 1.16 line-height, -0.24px letter-spacing, charcoal. Prefixed with “Q:” in the text.
Answer	Body-md, 300 weight, 1.6 line-height, charcoal.
Name prefix	Sans-serif, 20px, 400 weight, 1.06 line-height, charcoal. Inline <span> before the answer text.
Gap (between blocks)	32px.
Gap (within a block)	16px between question, answer, and continuation paragraphs.
Gap (title → content)	32px.

Structure

Each inline-qa-block is one exchange. It can contain:

• A question (inline-qa-question) — optional for the first block if it opens with an answer
• An answer (inline-qa-answer) with a <span data-nama="inline-qa-name" class="nama-inline-qa-name"> prefix
• Additional <p> tags for continuation paragraphs

Tips

• The title typically uses a pipe separator: “Community Spotlight | Name”
• The first block can skip the question and open directly with an answer — useful for introductory statements.
• The “Q:” prefix is written in the text content, not generated by CSS.
• The speaker name (“Jen:”) is an inline <span> inside the answer div, not a separate element.
• Use the Interview block instead if you want numbered questions, a portrait image, and a more structured Q&A format.