Chapter 4 - Components & Modules

Introduction

This tutorial will guide you through the complete workflow of creating a new component and integrating it into a flexible module. You’ll learn the NETWRIX development patterns by building a CardTest component from scratch, styling it, adding interactive behavior, and finally composing it into a reusable ModuleExample flexible module.

What You’ll Build:

🎴 CardTest Component - A reusable card with media, title, and subtitle
🎨 SCSS Styles - Following the NETWRIX design system
✨ Custom Animation - Interactive behavior with GSAP
📦 ModuleExample Module - A flexible module showcasing your component

Prerequisites:

Basic understanding of Astro components
Familiarity with Style Foundations (colors, typography, spacing, grid)
Understanding of JavaScript Framework basics

Chapter Sections

This chapter is divided into the following sections:

📋 Overview & Component Creation

Learn about component architecture, create your first CardTest component, and understand the fundamental structure and best practices.

🎨 Styling with CSS & SCSS

Style your component using the NETWRIX design system, learn SCSS patterns, and understand the foundation token system.

✨ Adding JavaScript Behavior

Add interactive animations with GSAP, create custom animation classes, and integrate with the Terra framework.

📦 Building Flexible Modules

Compose components into flexible modules, learn grid layouts, and create reusable section-level components.

Quick Start

If you’re ready to dive in, start with the Overview & Component Creation section to create your first component.

For a quick reference on the complete workflow, check the summary in the Flexible Modules section.

What You’ll Learn

Component Development:

Props destructuring from payload
BEM naming convention (c--block__element)
Conditional rendering patterns
Component composition with custom components

SCSS Architecture:

Foundation token system
Utility class patterns
Responsive breakpoints
Hover state best practices

JavaScript Framework:

Terra’s four-pillar class structure
GSAP timeline management
ScrollTrigger integration
Handler lifecycle management

Module Composition:

Grid system usage
Spacing utilities
Semantic HTML structure
Dynamic vs static data patterns

The Complete Workflow

1. Create Component (CardTest.astro)
   ↓
2. Add SCSS Styles (_c--card-test.scss)
   ↓
3. Register SCSS (style.scss)
   ↓
4. Create Animation Class (CustomAnimation.js)
   ↓
5. Create Handler (CustomAnimationHandler.js)
   ↓
6. Register Animation Asset (extraAssets.js)
   ↓
7. Register Handler (Main.js)
   ↓
8. Allocate Instances (Project.js)
   ↓
9. Build Module (ModuleExample.astro)
   ↓
10. Test & Iterate

Next Steps

Ready to get started? Head over to the Overview & Component Creation section to begin building your first component!