Address Block Components

Display contact information with maps. 4 variants for showing location, phone, email, and business hours.

Variant: map-left

Map on the left, contact information on the right. The default layout.

Visit Our Workshop

📍 Map Preview

Contact Information

123 Business Street, City, State 12345

(123) 456-7890

info@example.com

Business Hours

Mon-Fri: 9:00 AM - 5:00 PM

Sat-Sun: Closed

{
  "component": "address-block",
  "variant": "map-left",
  "data": {
    "heading": "Visit Our Workshop",
    "showPhone": true,
    "showEmail": true,
    "showHours": true,
    "mapZoom": 15,
    "bg": "white"
  }
}

<section class="address-block bg-white py-5">
  <div class="container">
    <h2 class="text-center mb-4">Visit Our Workshop</h2>
    <div class="row align-items-stretch g-4">
      <div class="col-lg-6">
        <!-- Google Maps iframe or static map -->
      </div>
      <div class="col-lg-6">
        <div class="contact-info">
          <h3 class="h4 mb-3">Contact Information</h3>
          <!-- Address, phone, email, hours from site.json -->
        </div>
      </div>
    </div>
  </div>
</section>

Variant: map-right

Contact information on the left, map on the right. Mirror layout.

Find Us

Contact Information

123 Business Street, City, State 12345

(123) 456-7890

info@example.com

Business Hours

Mon-Fri: 9:00 AM - 5:00 PM

Sat-Sun: Closed

📍 Map Preview

{
  "component": "address-block",
  "variant": "map-right",
  "data": {
    "heading": "Find Us",
    "showPhone": true,
    "showEmail": true,
    "showHours": true,
    "mapZoom": 15,
    "bg": "light"
  }
}

<section class="address-block bg-light py-5">
  <div class="container">
    <h2 class="text-center mb-4">Find Us</h2>
    <div class="row align-items-stretch g-4">
      <div class="col-lg-6 order-lg-1">
        <!-- Contact information -->
      </div>
      <div class="col-lg-6 order-lg-2">
        <!-- Map -->
      </div>
    </div>
  </div>
</section>

Variant: map-top

Full-width map on top, contact information below. Great for emphasizing location.

Our Location

📍 Map Preview

Address

123 Business Street
City, State 12345

Phone

(123) 456-7890

Hours

Mon-Fri: 9-5
Sat-Sun: Closed

{
  "component": "address-block",
  "variant": "map-top",
  "data": {
    "heading": "Our Location",
    "showPhone": true,
    "showEmail": true,
    "showHours": true,
    "mapZoom": 14,
    "bg": "white"
  }
}

<section class="address-block bg-white py-5">
  <div class="container">
    <h2 class="text-center mb-4">Our Location</h2>
    <div class="map-container rounded mb-4" style="height: 400px;">
      <!-- Full-width map -->
    </div>
    <div class="row">
      <!-- Contact info cards -->
    </div>
  </div>
</section>

Variant: no-map

Contact information only, no map displayed. Clean and simple.

Contact Information

Address

123 Business Street
City, State 12345

Contact

(123) 456-7890

info@example.com

Business Hours

Monday - Friday: 9:00 AM - 5:00 PM

Saturday: Closed

Sunday: Closed

{
  "component": "address-block",
  "variant": "no-map",
  "data": {
    "heading": "Contact Information",
    "showPhone": true,
    "showEmail": true,
    "showHours": true,
    "bg": "light"
  }
}

<section class="address-block bg-light py-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <h2 class="text-center mb-4">Contact Information</h2>
        <div class="card shadow-sm">
          <div class="card-body p-4">
            <!-- Contact details -->
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Configuration Options

Display Controls:

showPhone - Display phone number from site.json
showEmail - Display email address from site.json
showHours - Display business hours from site.json
mapZoom - Control Google Maps zoom level (1-20)

All contact information is automatically pulled from site.json company settings.