CMS Custom Components Reference

Curtain Making Services - Custom Components

Site-specific components for CMS website. Includes gallery systems, fabric displays, consultation tools, and curtain-business styling.

1. Scrolling Gallery (Auto-scroll)
2. Filterable Gallery Grid
3. Lightbox/Modal
4. Fabric Swatches
5. Before/After Comparison
6. Measurement Guide
7. Consultation Booking CTA
8. Testimonials
9. Curtain-Specific Utilities

1. Scrolling Gallery (Auto-scroll Showcase)

Infinite Auto-Scrolling Gallery

Classes: .cms-gallery-wrapper, .cms-gallery-track, .cms-gallery-item

<div class="cms-gallery-wrapper">
    <div class="cms-gallery-track">
        <div class="cms-gallery-item">
            <img src="curtain-1.jpg" alt="...">
        </div>
        <!-- More items -->
    </div>
</div>

Features: Auto-scrolls continuously, pauses on hover, fades at edges for seamless effect. Animation duration: 40 seconds.

2. Filterable Gallery Grid

Filter Buttons

Classes: .cms-filter-buttons, .cms-filter-btn

<div class="cms-filter-buttons">
    <button class="cms-filter-btn active" data-filter="all">All</button>
    <button class="cms-filter-btn" data-filter="living">Living Room</button>
</div>

Gallery Grid with Cards

Classes: .cms-gallery-grid, .cms-gallery-card, .cms-gallery-image

Modern Living Room

Classic Bedroom

Contemporary Office

<div class="cms-gallery-grid">
    <div class="cms-gallery-card" data-category="living modern">
        <div class="cms-gallery-image" data-caption="Description">
            <img src="..." alt="...">
        </div>
        <p class="cms-gallery-caption">Caption</p>
    </div>
</div>

Interactive: Requires cms-custom-scripts.js for filtering functionality. Cards fade in with stagger animation.

4. Fabric Swatches

Fabric Material Display Grid

Classes: .cms-fabric-swatches, .cms-fabric-swatch

Natural Linen

100% Linen • Light Filtering

Popular

Luxury Velvet

Cotton Velvet • Blackout

New

Sheer Voile

Polyester Blend • Sheer

<div class="cms-fabric-swatches">
    <div class="cms-fabric-swatch">
        <div class="cms-fabric-swatch__image">
            <img src="fabric.jpg" alt="...">
        </div>
        <div class="cms-fabric-swatch__name">Fabric Name</div>
        <div class="cms-fabric-swatch__details">Material • Type</div>
        <span class="cms-fabric-swatch__badge">Popular</span>
    </div>
</div>

Features: Hover lift effect, subtle texture overlay, responsive grid (auto-fills based on container width).

5. Before/After Comparison

Interactive Slider Comparison

Classes: .cms-before-after, .cms-before-after__slider

Before

After

<div class="cms-before-after">
    <img src="before.jpg" alt="Before" class="cms-before-after__image">
    <img src="after.jpg" alt="After" class="cms-before-after__image cms-before-after__after">
    <div class="cms-before-after__slider"></div>
    <div class="cms-before-after__label cms-before-after__label--before">Before</div>
    <div class="cms-before-after__label cms-before-after__label--after">After</div>
</div>

Interactive: Drag the slider handle to reveal before/after. Works with mouse and touch. Requires cms-custom-scripts.js.

6. Measurement Guide

Window Measurement Helper

Classes: .cms-measurement-guide, .cms-measurement-diagram

How to Measure Your Windows

Width →

Height →

Measure the width of your window frame from left to right
Measure the height from top of frame to bottom
Add 15-20cm to width for adequate coverage
Add 20-30cm to height for floor-length curtains
Double-check all measurements before ordering

<div class="cms-measurement-guide">
    <h3 class="cms-measurement-guide__title">How to Measure</h3>
    <div class="cms-measurement-diagram">
        <div class="cms-measurement-visual">
            <!-- Visual diagram -->
        </div>
        <ol class="cms-measurement-steps">
            <li>Step one</li>
            <li>Step two</li>
        </ol>
    </div>
</div>

7. Consultation Booking CTA

Gradient Call-to-Action Section

Classes: .cms-consultation-cta

Ready to Transform Your Space?

Book a free in-home consultation and let's discuss your perfect curtain solution. No obligation, just expert advice.

Book Free Consultation →

<div class="cms-consultation-cta">
    <div class="cms-consultation-cta__content">
        <h2 class="cms-consultation-cta__title">Title</h2>
        <p class="cms-consultation-cta__text">Description</p>
        <a href="#" class="cms-consultation-cta__button">
            Button Text
        </a>
    </div>
</div>

Features: Gradient background (primary to accent), subtle fabric texture overlay, white button with hover lift effect.

8. Testimonials

Customer Testimonial Card

Class: .cms-testimonial

The curtains have completely transformed our living room. The quality is exceptional, and the service was professional from start to finish. Highly recommended!

Sarah Mitchell

London • Living Room Curtains

<div class="cms-testimonial">
    <p class="cms-testimonial__quote">Quote text...</p>
    <div class="cms-testimonial__author">
        <img src="..." class="cms-testimonial__author-image">
        <div>
            <div class="cms-testimonial__author-name">Name</div>
            <div class="cms-testimonial__author-details">Details</div>
        </div>
    </div>
</div>

9. Curtain-Specific Utilities

Room Type Badges

Classes: .cms-room-badge, .cms-room-badge--living, etc.

🛋️ Living Room 🛏️ Bedroom 💼 Office

<span class="cms-room-badge cms-room-badge--living">Living Room</span>

Curtain Style Tags

Classes: .cms-style-tag, .cms-style-tag--modern, .cms-style-tag--classic

Blackout Modern Classic Thermal Light Filtering

<span class="cms-style-tag cms-style-tag--modern">Modern</span>

Process Steps (How It Works)

Classes: .cms-process-steps, .cms-process-step

Consultation

We visit your home to understand your needs and take measurements.

Design

Choose from our extensive fabric collection and styles.

Installation

Expert fitting ensuring perfect hang and finish.

<div class="cms-process-steps">
    <div class="cms-process-step">
        <div class="cms-process-step__number">1</div>
        <h4 class="cms-process-step__title">Title</h4>
        <p class="cms-process-step__text">Description</p>
    </div>
</div>

Fabric Texture Overlay

Class: .cms-fabric-texture

Element with Fabric Texture

Subtle woven texture overlay added via CSS

<div class="cms-fabric-texture">
    <!-- Content with subtle fabric texture overlay -->
</div>

Implementation Notes

Required Files:

brand-kit-base.css — Core foundation styles
cms-custom-styles.css — CMS-specific styling (this reference)
cms-custom-scripts.js — Interactive functionality

Related: See brand-kit-core-reference.html for universal foundation components used across all sites.