BRICKS MASTERY

Learn Bricks Builder Components: Build 3 Real-World Components (2026)

ENROLL TO TRACK PROGRESS

01 · BRICKS BUILDER COMPONENTS: CORE CONCEPTS

What Are Components and Why You Need Them3:44

Without vs With Components4:46

Build Your First Class Component from Scratch6:41

Properties, Variants, Slots and Nested Components24:20

02 · BUILD A COPY TO CLIPBOARD COMPONENT

What You'll Build: Copy to Clipboard Component2:44

Custom Input Field (Allow HTML Tags in Bricks)6:47

Input Attributes, Copy Button & Builder Fixes5:03

Interactions & Passing Arguments in Bricks Builder13:56

Copy to Clipboard JavaScript (Data Attributes)12:47

Converting It Into a Bricks Component (Properties)7:56

Use Components Everywhere (Templates, Popup & Block Editor)13:26

Copy to Clipboard: Code, Template & Component JSON Snippets1:20

03 · BUILD A FLEXIBLE CTA COMPONENT

What You'll Build: Flexible CTA Component1:29

CTA Base Structure & Create Variants5:21

Second Button & Make Content Dynamic with Properties8:45

Conditionally Hiding Elements with Toggle Type3:19

Component Slots for Unlimited Flexibility4:27

04 · BUILD A CONTENT PANEL & COMPARISON COMPONENT

What You'll Build: Nested Comparison Component1:23

Create Content Panel Base Variant6:48

Connect Properties and Create Variants7:41

IN PROGRESS

This course is still being recorded. New lessons land here as they're finished.

← Back← Course overview MODULE 01 · LESSON 03

BRICKS BUILDER COMPONENTS: CORE CONCEPTS · LESSON 03

Build Your First Class Component from Scratch

Start from a blank canvas and build a real card component step by step. You will assign CSS classes using the BEM approach, create primary and secondary variants, and see how changing one class updates every single instance at once.

Unlock full course →

Discussion

Discussion is for enrolled students

Enroll to ask questions, get answers from the instructor, and connect with other students.

Enroll in this course →