Catalogue Setup and Configuration for Goldilock Template-13 - Heroes

Video Transcription

Video Summary

The presenter deletes four previously created components and demonstrates exporting a few new “hero” components. Examples include a search bar with instructional text for finding courses, a product/subscription-focused explanation section (e.g., using a Goldilocks template) with a purchase link, and an image component to create a natural visual break between text-heavy sections. They then show how to adjust spacing by changing component padding, including removing padding so sections touch. When components are adjacent, designers must ensure backgrounds and colors blend well to avoid visual clashes while controlling overall whitespace.

Keywords

hero components export

search bar component

Goldilocks template section

component padding and spacing

adjacent section background blending

KGConcept: Hero Component (10)

KGConcept: Search Box (9)

KGConcept: Instruction Text (8)

KGConcept: Explanatory Copy (7)

KGConcept: Image (8)

KGConcept: Call-to-Action (8)

KGConcept: Link (6)

KGConcept: Product Promotion (7)

KGConcept: Subscription Promotion (7)

KGConcept: Padding (8)

KGConcept: Spacing (8)

KGConcept: Visual Flow (6)

KGConcept: Text Density (6)