Lily Design System™

Answer

An answer is anything that responds to a question, request, action, etc. Examples include FAQ replies, quiz answers, survey responses, and forum replies.

This headless component renders a <div> with class answer. The consumer supplies the answer content as children.

Example

The clinic opens at 8:00 a.m. on weekdays.

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

<Answer>
  <!-- content -->
</Answer>

Props

  • label: string (optional) -- accessible label for the answer
  • children: slot (required) -- answer content (body, citations, related links, action buttons)
  • ...restProps: Any additional HTML attributes

ARIA

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

When to Use

  • Use to pair with a question for FAQ and Q&A patterns.
  • Use for quiz answer reveals or feedback panels.
  • Use for forum replies displayed beneath the original question.

Related components

  • question — a question is anything that asks for information, invites a response, tests knowledge, 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: answer
  • PascalCase: Answer
  • Description: an answer is anything that responds to a question, request, action, etc.
  • Status: experimental — recent catalog addition with the least accumulated depth; contract may still move
  • HTML tag: <div>
  • CSS class: .answer
  • Interactive: no

ARIA

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

Keyboard

  • None -- answers are informational, not interactive

Props

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