Whatsapp
ADS Custom Components Reference

Architecture Design Services - Custom Components

Site-specific components built on top of the MHM Brand Kit. These extend the core system with custom layouts for the ADS home page.

Table of Contents

1. Hero Section

Diagonal Pan Animation Background

Class: .mhm-bg-pan-diagonal

Animated Hero Background

This background slowly pans diagonally, creating subtle movement without being distracting.

<div class="mhm-bg-pan-diagonal" style="background: linear-gradient(...);"> <h1>Your Hero Content</h1> </div>
Animation Duration: 25 seconds for smooth, subtle movement.

2. How I Support Your Project

Complete Support Section

Classes: .mhm-support-section, .mhm-support-header, .mhm-support-grid

How I Support Your Project

From initial concept through to completion, here's how I guide your architectural journey.

01

Discovery & Vision

We begin by understanding your aspirations, lifestyle needs, and the unique character of your site.

Learn more →
02

Design Development

Through collaborative workshops and detailed drawings, we refine your vision into a buildable design.

Explore process →
03

Project Delivery

I coordinate with contractors and oversee construction to ensure your project comes to life beautifully.

View outcomes →
<section class="mhm-support-section"> <div class="mhm-support-header"> <h2 class="mhm-support-title">Section Title</h2> <p class="mhm-support-intro">Introduction text</p> </div> <div class="mhm-support-grid"> <div class="mhm-support-card"> <div class="mhm-support-number">01</div> <h3 class="mhm-support-card-title">Card Title</h3> <p class="mhm-support-card-text">Description...</p> <a href="#" class="mhm-support-link">Link →</a> </div> <div class="mhm-support-card mhm-support-card--featured"> <!-- Featured card with border highlight --> </div> </div> </section>

Support Card Variants

Classes: .mhm-support-card, .mhm-support-card--featured
01

Standard Card

Basic support card with hover animation.

Learn more →
02

Featured Card

Highlighted card with primary border and shadow.

Explore more →

Support Card with Icon/Image

Classes: .mhm-support-icon

Card with Icon

Support cards can include icons or small images aligned with the title.

Details →
<div class="mhm-support-card"> <div style="display: flex; align-items: center; gap: 16px;"> <img src="icon.svg" class="mhm-support-icon" alt=""> <h3 class="mhm-support-card-title">Title</h3> </div> <p class="mhm-support-card-text">Text...</p> </div>

3. Why It Feels Different

Complete Different Section (Two-Column Layout)

Classes: .mhm-different-section, .mhm-different-layout

Why It Feels Different

Working with me isn't just about beautiful drawings. It's about creating spaces that genuinely work for how you live.

  • How does morning light move through your space?
  • Where do you naturally gather as a family?
  • What views deserve framing?
  • How can we blur the boundary between inside and out?

These aren't just questions — they're the foundation of thoughtful design that responds to your unique context.

Architecture
<section class="mhm-different-section"> <div class="mhm-different-layout"> <div class="mhm-different-content"> <h2 class="mhm-different-title">Section Title</h2> <p class="mhm-different-lead">Lead paragraph</p> <ul class="mhm-different-questions"> <li>Question one?</li> <li>Question two?</li> </ul> <p class="mhm-different-summary">Summary with <strong>emphasis</strong></p> </div> <div class="mhm-different-image"> <img src="..." alt="..."> </div> </div> </section>

Question List (Italic with Dots)

Class: .mhm-different-questions
  • How does morning light move through your space?
  • Where do you naturally gather as a family?
  • What views deserve framing?
  • How can we blur the boundary between inside and out?
<ul class="mhm-different-questions"> <li>Thoughtful question one?</li> <li>Thoughtful question two?</li> </ul>
Style Note: Questions are italicized with circular dots created via CSS ::before pseudo-element.

Multi-Image Containers (2 & 3 Column)

Classes: .mhm-different-image--2, .mhm-different-image--3

Two Column Image Grid

Image 1 Image 2

Three Column Image Grid

Image 1 Image 2 Image 3
<div class="mhm-different-image mhm-different-image--2"> <img src="image-1.jpg" alt=""> <img src="image-2.jpg" alt=""> </div> <div class="mhm-different-image mhm-different-image--3"> <img src="image-1.jpg" alt=""> <img src="image-2.jpg" alt=""> <img src="image-3.jpg" alt=""> </div>
Responsive: Multi-image grids stack to single column on mobile devices.

4. The Approach (Three Pillars)

Complete Approach Section

Classes: .mhm-approach-section, .mhm-approach-header, .mhm-approach-grid

My Philosophy

The Three Pillars of Great Design

Every successful project balances these essential elements to create spaces that truly enhance your life.

🏡

Context & Place

Understanding the unique character of your site, climate, and surroundings.

  • Site analysis and sun studies
  • Local materials and craftsmanship
  • Integration with landscape
👥

People & Lifestyle

Designing spaces that respond to how you actually live and work.

  • Family dynamics and daily routines
  • Entertaining and gathering spaces
  • Future flexibility and adaptation
🌿

Sustainability & Craft

Building responsibly with quality materials and thoughtful detailing.

  • Passive solar design principles
  • Low-impact material selection
  • Enduring aesthetic quality
<section class="mhm-approach-section"> <div class="mhm-approach-header"> <p class="mhm-overline">Section Label</p> <h2 class="mhm-approach-title">Section Title</h2> <p class="mhm-approach-intro">Introduction</p> </div> <div class="mhm-approach-grid"> <div class="mhm-approach-card"> <div class="mhm-approach-icon">🏡</div> <h3 class="mhm-approach-card-title">Pillar Title</h3> <p class="mhm-approach-card-text">Description</p> <ul class="mhm-approach-details"> <li>Detail one</li> <li>Detail two</li> </ul> </div> <div class="mhm-approach-card mhm-approach-card--featured"> <!-- Featured card with primary background --> </div> </div> </section>

Approach Card Variants

Classes: .mhm-approach-card, .mhm-approach-card--featured
🎯

Standard Card

White background with hover lift effect.

⭐

Featured Card

Primary colour background with white text.

9. ADS Utilities

Gradient Panel (Animated Background)

Class: .mhm-gradient-panel

Gradient Panel Title

This panel has a subtle animated gradient background that slowly drifts. Perfect for featured content or callouts.

<div class="mhm-gradient-panel"> <h3>Panel Content</h3> <p>Text content here...</p> </div>
Animation: 12-second gentle drift animation with warm cream to pale green gradient.

Section Spacing Utilities

Classes: .mhm-section-no-top, .mhm-section-no-bottom, .mhm-section-compact, .mhm-section-tight
Normal Section Spacing
No Top Padding
Compact Section (Half Spacing)
Tight Section (Minimal Spacing)
<section class="mhm-section mhm-section-no-top"> <!-- Remove top padding --> </section> <section class="mhm-section mhm-section-compact"> <!-- Half spacing --> </section>

Section Dividers

Classes: .section-divider, .section-divider-md

Content above divider

Content after large divider (35px height)

Content after medium divider (20px height)

<hr class="section-divider"> <!-- 35px height --> <hr class="section-divider-md"> <!-- 20px height -->

Grid Column Spanning Utilities

Classes: .mhm-col-span-2, .mhm-col-span-3, .mhm-col-span-4, .mhm-col-span-full
Col 1
Col 2
Col 3
Col 4
Spans 2 Columns
Spans 2 Columns
Spans Full Width
<div class="mhm-grid mhm-grid-4"> <div>Standard</div> <div class="mhm-col-span-2">Spans 2 columns</div> <div class="mhm-col-span-full">Full width</div> </div>

Using These Components

All ADS custom components are built on top of the core Brand Kit system. They inherit all spacing, colour, and typography variables.

Related: See brand-kit-core-reference.html for the universal foundation components.