Lily Design System™

Question

A question is anything that asks for information, invites a response, tests knowledge, etc. Examples include FAQ entries, quiz prompts, survey questions, forum questions, and interview questions.

This headless component renders a <div> with class question. The consumer supplies the question text and any related content (answer slot, metadata, action buttons) as children.

Example

What time does the clinic open?

Show demo markup 
<div class="question" aria-label="Question"><h3>What time does the clinic open?</h3></div>
Usage example 
<Question label="Sample FAQ question">
  <h3>What time does the clinic open?</h3>
  <p>The clinic opens at 8:00 a.m. on weekdays.</p>
</Question>
Show Svelte source 
// In your Svelte component:
import Question from "lily-design-system-svelte-headless/components/Question/Question.svelte";

<Question>
  <!-- content -->
</Question>

Props

  • label: string (optional) -- accessible label for the question
  • children: slot (required) -- question content (heading, body, related answers, metadata)
  • ...restProps: Any additional HTML attributes

ARIA

  • aria-label -- describes the question for screen readers when no visible heading is present

When to Use

  • Use for FAQ entries that pair a question with one or more answers.
  • Use for quiz, survey, or knowledge-check prompts.
  • Use for forum-style threads where each thread starts with a question.

Related components

  • answer — an answer is anything that responds to a question, request, action, etc.
  • comment — a comment is anything that expresses an opinion, observation, explanation, etc.

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: question
  • PascalCase: Question
  • Description: a question is anything that asks for information, invites a response, tests knowledge, etc.
  • Status: experimental — recent catalog addition with the least accumulated depth; contract may still move
  • HTML tag: <div>
  • CSS class: .question
  • Interactive: no

ARIA

  • aria-label -- describes the question for screen readers when no visible heading is present

Keyboard

  • None -- questions are informational, not interactive

Props

  • label: string (optional) -- accessible label for the question
  • children: slot (required) -- question content
  • ...restProps: Any additional HTML attributes