Content Sections

[devJasonClarke]

Ticket ID: DICT-03
Status: To Do
Type: Feature
Priority: High
Assignee: [Frontend Developer]
Estimate: 2 – 2.5 days

---

🎯 Objective

Build the core content display area for the word detail page. This includes three key sections:

1. "What It Means" — A concise definition area with optional expandable content.
2. "NYAM in Context" — Example usage section styled as a paragraph block.
3. "Did You Know?" — An informational area with formatted supporting text.

Each section should be visually distinct, responsive, and match the provided design guidelines.

---

✅ Acceptance Criteria

• The "What It Means" section:

  • Displays a short primary definition.
  • Includes optional expandable content for extended definitions (toggle or “See more” behavior).
  • Uses proper semantic HTML for definitions.

• The "NYAM in Context" section:

  • Renders example usage in a styled paragraph block.
  • Supports multiple lines of wrapped text and basic formatting.

• The "Did You Know?" section:

  • Shows supporting or historical info in readable, formatted text.
  • Styled with a distinct heading and spacing for readability.

• All sections follow the spacing, fonts, and responsiveness outlined in the design.

---

📋 Tasks

1. Build “What It Means” Section

• Render the main definition
• Implement expand/collapse for long definitions
• Use semantic tags (e.g., <dl>, <dt>, <dd> if applicable)

2. Create “NYAM in Context” Component

• Display styled example usage paragraph
• Ensure text wraps and formats correctly across devices

3. Implement “Did You Know?” Section

• Render informational content in a formatted block
• Apply appropriate typography and spacing

4. Apply Design & Responsiveness

• Ensure all 3 sections follow layout from design
• Match fonts, spacing, and colors
• Fully responsive on mobile, tablet, and desktop

---

🧰 Tools & Resources

• HTML/CSS or component framework (Vue, React, etc.)
• CSS utility classes or design tokens
• Optional: Markdown parser if content is dynamically rich-text

---

🔗 Design Reference

https://www.figma.com/design/CKI7T1PwNzXd1QkWIlY9TC/Patwa-Dictionary?node-id=22-363&t=ON01vPTXfPsV4QcJ-0