Testing .dp-header System
Canvas Header Analysis: The dp-header system provides the main lesson header with course info, module navigation, and lesson titles. This test page focuses on header styling, spacing, and visual hierarchy.
📋 Header Test Area
Instructions: Paste the header HTML from Canvas lessons below this section to test styling and spacing.
Focus Areas:
- dp-header visual elements and layout
- dp-flat-sections integration
- Content spacing and breathing room
- Typography hierarchy (dp-heading, dp-header-pre, dp-header-title)
- Background styling and colors (TSTC brand colors)
Individual Header Components
Test 1: Basic dp-header Structure
Test 2: Different Course/Module Combinations
Test 3: Spacing Analysis Tools
Visual debugging helpers:
Color-coded backgrounds help visualize element boundaries and spacing
🛠️ Development Notes & Observations
Current CSS Classes Involved:
.dp-header - Main header container.dp-flat-sections - Section styling modifier.dp-content-block - Content container.dp-heading - Main heading styles.dp-header-pre - Course code prefix container.dp-header-pre-1 - Course code text.dp-header-title - Lesson title text.kl_custom_block_1 - CidiLabs custom block
Areas to Address:
- Header padding and margins
- Typography hierarchy and sizing
- Background and border treatments
- Responsive behavior
- Integration with dp-wrapper spacing