Style Guide

Living documentation for all reusable components and design elements

Component Style Guide

This is the living documentation for all reusable components in the House Clearance The Hague website. It showcases the design system and provides examples of how to use each component.

Color Palette

Primary Purple
#6B46C1
--primary-color
Diplomatic Blue
#1E3A8A
--secondary-color
Heritage Gold
#F59E0B
--accent-color
Sustainable Green
#059669
--success-color

Button Components

Primary Buttons
Primary Button Secondary Button Outline Button
CTA Buttons
🔍Book Free Assessment 💬 WhatsApp Now Learn More

Card Components

Service Cards
FEATURED
🔍

Sample Service

Example Specialty

This is a sample service card showing the design pattern for all service cards.

✓ Professional service
✓ Fast response
✓ Quality guarantee
View Service
Area Cards
PRIORITY
🏛️

Sample Area

Example Specialty

This is a sample area card showing the design pattern for all area cards.

✓ Expert service
✓ Local knowledge
✓ Same day response
📍 15km coverage
⚡ 2-4h response
View Area

Badge Components

Priority Badges
FEATURED SERVICE PRIORITY AREA POPULAR CHOICE
Trust Badges
🏛️ Embassy Standards 🌍 Cultural Sensitivity ⚡ Same Day Service

Google Reviews Component

Google Rating Badge
★ ★ ★ ★ ★
5.0 Google Rating (11 reviews)

Typography

Headings

Heading 1 - Main Page Title

Heading 2 - Section Title

Heading 3 - Subsection Title

Heading 4 - Component Title

Heading 5 - Small Heading
Heading 6 - Micro Heading
Body Text

Strong text: This is bold text for emphasis.

Emphasized text: This is italic text for emphasis.

Regular paragraph text with normal weight and spacing. This represents the standard body text used throughout the site.

Secondary text with reduced emphasis for supporting information.

Small text for disclaimers and fine print.

Icon System

Service Icons
🔍
Assessment
🏠
House Clearance
🪑
Furniture
✈️
Relocation
Area Icons
🏛️
The Hague
👑
Wassenaar
🎓
Leiden
🔬
Delft

Usage Guidelines

Card Component Usage
{{/* Service Card */}}
{{ partial "cards/service-card.html" (dict "service" $serviceData "context" .) }}

{{/* Area Card */}}
{{ partial "cards/area-card.html" (dict "area" $areaData "context" .) }}
Premium Card CSS Classes
/* Base premium card */
.premium-card

/* Modifiers */
.premium-card--service     /* Service-specific styling */
.premium-card--area        /* Area-specific styling */
.premium-card--priority    /* Priority/featured state */
.premium-card--center      /* Centered content */

/* Grid layout */
.premium-cards-grid        /* Responsive card grid */