Sugar Suite Documentation

Complete documentation for all Sugar Suite features with examples and usage instructions.

Core Features

Interactive Elements

• Accordion - Collapsible sections with h2 triggers + reveal click-to-show content
• Tabs - Tabbed interface
• Swapper - Sequential content navigation with Previous/Next buttons
• Slider - Image/content carousel
• Checklist - Interactive checklists with strikethrough option
• Knowledge Check - All quiz types: MC, multiple select, FIB, ordering, matching
• Flashcards - Flip-able cards using table structure
• Line Matching - Connect items with draggable lines
• Reveal - Click-to-show content with optional input requirements

Media & Content

• Images - Responsive images with special handling
• Video - Responsive video embedding
• Audio - Responsive audio elements with figure support
• Math - Mathematical content with MathJax integration

Data & Tables

• Tables - Enhanced table functionality

Navigation & Links

• Hyperlinks - Enhanced link behaviors and external link styling

Typography & Text

• Typography - Headings, text styles, paragraphs, emphasis, blockquotes
• Lists - Ordered, unordered, definition lists

Layout & Structure

• Side-by-Side Layout - Responsive two-column layouts that stack on mobile
• Figures - Figure containers with captions for images, videos, audio, and math
• Containers - Activity, assessment, note, warning, example containers with styling

Utilities

• Printing - Enhanced print functionality
• Buttons - Button styles and variants
• Swatches - Color and font swatches for design systems