Skip to main content

Question + Answer

Component status:Ready
Question and Answer is a series of interview questions and answers within a news article or story in a scannable format.

A series of Question and Answers breaks up storytelling content into smaller, scannable chunks, making the content seem less formidable to readers. It is ideal to use a conversational tone to embrace the conventional sense of an interview, which is a discussion between two people.

Examples#

Default#

Question
This is a Question?

Answer
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Question
This is a Question?

Answer
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Question
This is a Question?

Answer
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<div class="bux-qa ">
<div class="bux-qa__item">
<h2 class="bux-qa__question">
<span class="bux-qa__question-marker" aria-hidden="true">Q</span>
<span class="visually-hidden">Question</span>
<div class="bux-qa__question-text">This is a Question?</div>
</h2>
<div class="bux-qa__answer">
<span class="bux-qa__answer-marker" aria-hidden="true">A</span>
<span class="visually-hidden">Answer</span>
<div class="bux-qa__answer-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. </div>
</div>
</div>
<div class="bux-qa__item">
<h2 class="bux-qa__question">
<span class="bux-qa__question-marker" aria-hidden="true">Q</span>
<span class="visually-hidden">Question</span>
<div class="bux-qa__question-text">This is a Question?</div>
</h2>
<div class="bux-qa__answer">
<span class="bux-qa__answer-marker" aria-hidden="true">A</span>
<span class="visually-hidden">Answer</span>
<div class="bux-qa__answer-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. </div>
</div>
</div>
<div class="bux-qa__item">
<h2 class="bux-qa__question">
<span class="bux-qa__question-marker" aria-hidden="true">Q</span>
<span class="visually-hidden">Question</span>
<div class="bux-qa__question-text">This is a Question?</div>
</h2>
<div class="bux-qa__answer">
<span class="bux-qa__answer-marker" aria-hidden="true">A</span>
<span class="visually-hidden">Answer</span>
<div class="bux-qa__answer-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. </div>
</div>
</div>
</div>

Storytelling#

Question
This is a Question?

Answer
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Question
This is a Question?

Answer
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Question
This is a Question?

Answer
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<div class="bux-qa bux-qa--storytelling">
<div class="bux-qa__item">
<h2 class="bux-qa__question">
<span class="visually-hidden">Question</span>
<div class="bux-qa__question-text">This is a Question?</div>
</h2>
<div class="bux-qa__answer">
<span class="visually-hidden">Answer</span>
<div class="bux-qa__answer-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
<div class="bux-qa__item">
<h2 class="bux-qa__question">
<span class="visually-hidden">Question</span>
<div class="bux-qa__question-text">This is a Question?</div>
</h2>
<div class="bux-qa__answer">
<span class="visually-hidden">Answer</span>
<div class="bux-qa__answer-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. </div>
</div>
</div>
<div class="bux-qa__item">
<h2 class="bux-qa__question">
<span class="visually-hidden">Question</span>
<div class="bux-qa__question-text">This is a Question?</div>
</h2>
<div class="bux-qa__answer">
<span class="visually-hidden">Answer</span>
<div class="bux-qa__answer-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. </div>
</div>
</div>
</div>

Usage#

Dos#

  • Use for an edited interview transcript, which provides a more personal experience for the reader
  • Keep questions concise. Focus on the value of the answer
  • Limit questions to 15 or less

Don’ts#

  • Don’t use Question and Answer for 15+ questions, such as frequently asked questions; use Accordions instead
  • Don’t use Question and Answer if you are defining terms; use a Description List instead
  • Don’t use the Q and A letters if your questions are very long