``` **Breakpoints:** - xs: < 576px (mobile) - sm: ≥ 576px (large mobile) - md: ≥ 768px (tablet) - lg: ≥ 992px (desktop) - xl: ≥ 1200px (large desktop) - xxl: ≥ 1400px (extra large) ### 3.2 Spacing Scale ```css /* Gap System */ g-0: 0 g-1: 0.25rem (4px) g-2: 0.5rem (8px) g-3: 1rem (16px) g-4: 1.5rem (24px) /* Most common */ g-5: 3rem (48px) /* Padding Scale */ p-2: 0.5rem (8px) p-3: 1rem (16px) p-4: 1.5rem (24px) py-2: vertical 0.5rem px-4: horizontal 1.5rem ``` ### 3.3 Container Standards **Main Content:** ```html

``` **Question Panel:** ```css padding: 24px; /* Comfortable reading space */ gap: 14px; /* Between elements */ ``` **Mobile Optimizations:** ```css @media (max-width: 576px) { .q-body { padding: 16px; } /* Reduced for mobile */ .opt-item { padding: 12px 14px; } } ``` --- ## 4. Component Library ### 4.1 Buttons **Primary Button:** ```html ``` **Button States:** - Default: `btn-primary` - Hover: Darken background - Disabled: 35% opacity - Loading: Spinner + text change **Button Sizes:** ```html ``` **Specialized Buttons:** ```css .btn-submit-top { border-radius: 100px; padding: 8px 20px; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 7px; } ``` ### 4.2 Cards **Standard Card:** ```html

Title

Content

``` **Statistics Card:** ```html

Total Students

``` **Gradient Card:** ```html

``` ### 4.3 Forms **Input Field:** ```html

Exam Name

``` **Form States:** - Default: `form-control` - Error: `is-invalid` - Success: `is-valid` - Disabled: `disabled` attribute **Select Dropdown:** ```html ``` **Checkbox/Radio:** ```html

Option label

``` ### 4.4 Tables **Standard Table:** ```html

Exam Name	Code	Status	Actions
Final Exam	`MATH-001`	Active

``` ### 4.5 Badges **Status Badges:** ```html Active Draft {{ count }} ``` **Custom Chips:** ```html Pilihan Ganda ``` ### 4.6 Modals **Bootstrap Modal:** ```html ``` **Custom Modal Styling:** ```css .modal-content { border-radius: 20px; overflow: hidden; border: none; } ``` ### 4.7 Alerts **Bootstrap Alerts:** ```html

Success message

Error message

``` **Custom AppAlert:** ```javascript AppAlert.success('Message'); AppAlert.error('Message'); AppAlert.info('Message'); ``` ### 4.8 Navigation **Top Navigation:** ```html ``` **Sidebar Navigation:** ```html ``` --- ## 5. Student Interface Components ### 5.1 Test-Taking Interface **Timer Bar:** ```html

01:00:00

``` **Question Panel:** ```html

01 / 40

Multiple Choice

Question text here...

``` **Answer Options:** ```html

Answer option text

``` **Navigation Panel:** ```html ``` **Mobile Bottom Bar:** ```html

``` ### 5.2 Question Types **Multiple Choice:** - Standard option selection - Image support - Text options - Mixed text + image **True/False:** ```html

True

False

``` **Audio Questions:** ```html

``` --- ## 6. Admin Dashboard Components ### 6.1 Statistics Cards ```html

Total Students

1,234

``` ### 6.2 Quick Actions Panel ```html

Quick Actions

Create Exam

``` ### 6.3 Data Tables **Sortable Headers:** ```html Exam Name Date Status Actions ``` **Action Buttons:** ```html

``` --- ## 7. Responsive Design Patterns ### 7.1 Mobile Breakpoints ```css /* Mobile First Approach */ @media (max-width: 576px) { /* Mobile-specific styles */ .q-body { padding: 16px; } .timer-display { font-size: 1.15rem; } } @media (max-width: 991px) { /* Tablet and below */ .cbt-main { padding-bottom: 80px; } } @media (min-width: 992px) { /* Desktop */ .mobile-bar { display: none; } } ``` ### 7.2 Touch Targets **Minimum Touch Target Size:** 44x44px (WCAG AAA compliant) ```css .mob-btn { width: 46px; height: 46px; border-radius: 12px; } .nav-btn { padding: 13px 20px; min-height: 44px; } ``` ### 7.3 Mobile Navigation Patterns **Bottom Navigation Bar:** - Fixed position at bottom - 3 main actions: Previous, Grid, Next - 64px height - Backdrop blur for modern feel **Drawer Navigation:** - Slides up from bottom - 72vh max height - 7-column grid for questions - Scrollable content area --- ## 8. Icon System ### 8.1 Bootstrap Icons **Version:** 1.11.1 **Usage:** `` **Common Icons:** - Navigation: `house-door`, `file-earmark-text`, `people`, `gear` - Actions: `plus-circle`, `pencil`, `trash`, `eye` - Status: `check-circle`, `clock`, `exclamation-triangle` - Media: `play-fill`, `pause-fill`, `stop-fill`, `headphones` ### 8.2 Icon Sizing ```html