Brand Design System

Components

Brand Components are pre-composed layouts built from multiple Elements. With 86 components across 14 categories, they cover a wide range of common UI patterns for e-commerce and content pages.

Component Architecture

Components in Brand follow a composition model where base Elements are combined to create reusable, consistent layouts. Each component:

  • Is built from one or more Elements (Heading, Paragraph, Image, Button, etc.)
  • Has multiple layout variants for flexibility
  • Inherits theme styling from the active brand
  • Supports responsive behavior across devices

Categories

Components are organized into categories based on their primary use case. Select a category to explore available components.

Basic Text

7

Heading and paragraph combinations

Components: 1, 2, 3, 4, 10...

Buttons

4

Text, icon, and combined button variants

Components: 19, 20, 21, 22

Icon + Text

6

Various icon and text layout combinations

Components: 16, 17, 18, 23, 24...

Image + Text

28

Product cards, content blocks, and media layouts

Components: 6, 7, 8, 11, 13...

Video

3

Video with text layouts

Components: 73, 74, 75

Review Blocks

3

Testimonial and review card layouts

Components: 63, 65, 76

Lists

5

Ordered, unordered, and icon lists

Components: 32, 33, 50, 55, 81

Dividers

5

Plain dividers, with icon or text

Components: 39, 40, 53, 61, 68

Tables

3

Data tables and comparison layouts

Components: 6, 77, 85

Order Boxes

5

E-commerce order and checkout components

Components: 60, 67, 72, 78, 86

Progress

1

Dynamic progress indicators

Components: 84

Product Blocks

2

Product display and bundle cards

Components: 12, 83

Accordions

4

Expandable content sections

Components: 35, 36, 41, 82

Custom Layouts

10

Complex multi-element layouts

Components: 9, 37, 42, 43, 44...

Component Naming Convention

Components are numbered and named descriptively based on their element composition. For example:

  • Component 1: Heading + Para
  • Component 3: 1 Heading + 1 Para + 1 Button
  • Component 12: Heading + 3 (Image + Heading + Price + Button) - YMAL

Status Overview

StatusCountDescription
Done18Fully implemented and documented
Dev Complete11Development finished, pending review
In Progress14Currently being developed
Todo4Planned for implementation
Unknown39Status to be determined

Using Components

Each component page includes:

  1. Overview - What the component is and when to use it
  2. Live Preview - Interactive example with theme toggle
  3. Element Composition - Which elements make up the component
  4. Variants - Available layout configurations
  5. Code Snippets - Copy-paste ready HTML/CSS and React code
  6. Responsive Behavior - How it adapts to different screen sizes

Quick Reference

Looking for something specific? Use the sidebar navigation to browse by category, or search for a component by name or number.