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
Custom Theme Examples
Program-Specific Themes
About This Documentation
Each documentation file includes:
- Feature description and purpose
- Required HTML structure and CSS classes
- Available options (CSS classes and data attributes)
- Working examples you can copy and adapt
- Usage notes and best practices