Skip to main content
Components

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"
  }
}
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "LocalBusiness",
      "@id": "https://pagejson.com/#localbusiness",
      "name": "INC64 LLC",
      "url": "https://pagejson.com/",
      "image": "https://pagejson.com/assets/img/logo/logo-placeholder.svg",
      "address": {
        "@type": "PostalAddress"
      }
    },
    {
      "@type": "WebSite",
      "@id": "https://pagejson.com/#website",
      "url": "https://pagejson.com/",
      "name": "PageJSON",
      "description": "PageJSON is the first schema-driven page language. Generate validated JSON page specs with AI, render production-ready HTML with 18+ components and 60+ variants."
    },
    {
      "@type": "WebPage",
      "@id": "https://pagejson.com/components/address-blocks#webpage",
      "url": "https://pagejson.com/components/address-blocks",
      "name": "Address Block Components",
      "isPartOf": {
        "@id": "https://pagejson.com/#website"
      },
      "about": {
        "@id": "https://pagejson.com/#localbusiness"
      }
    },
    {
      "@type": "BreadcrumbList",
      "@id": "https://pagejson.com/components/address-blocks#breadcrumb",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "name": "Home",
          "item": "https://pagejson.com/"
        },
        {
          "@type": "ListItem",
          "position": 2,
          "name": "Address Block Components",
          "item": "https://pagejson.com/components/address-blocks"
        }
      ]
    }
  ]
}
<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"
  }
}
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "LocalBusiness",
      "@id": "https://pagejson.com/#localbusiness",
      "name": "INC64 LLC",
      "url": "https://pagejson.com/",
      "image": "https://pagejson.com/assets/img/logo/logo-placeholder.svg",
      "address": {
        "@type": "PostalAddress"
      }
    },
    {
      "@type": "WebSite",
      "@id": "https://pagejson.com/#website",
      "url": "https://pagejson.com/",
      "name": "PageJSON",
      "description": "PageJSON is the first schema-driven page language. Generate validated JSON page specs with AI, render production-ready HTML with 18+ components and 60+ variants."
    },
    {
      "@type": "WebPage",
      "@id": "https://pagejson.com/components/address-blocks#webpage",
      "url": "https://pagejson.com/components/address-blocks",
      "name": "Address Block Components",
      "isPartOf": {
        "@id": "https://pagejson.com/#website"
      },
      "about": {
        "@id": "https://pagejson.com/#localbusiness"
      }
    },
    {
      "@type": "BreadcrumbList",
      "@id": "https://pagejson.com/components/address-blocks#breadcrumb",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "name": "Home",
          "item": "https://pagejson.com/"
        },
        {
          "@type": "ListItem",
          "position": 2,
          "name": "Address Block Components",
          "item": "https://pagejson.com/components/address-blocks"
        }
      ]
    }
  ]
}
<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"
  }
}
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "LocalBusiness",
      "@id": "https://pagejson.com/#localbusiness",
      "name": "INC64 LLC",
      "url": "https://pagejson.com/",
      "image": "https://pagejson.com/assets/img/logo/logo-placeholder.svg",
      "address": {
        "@type": "PostalAddress"
      }
    },
    {
      "@type": "WebSite",
      "@id": "https://pagejson.com/#website",
      "url": "https://pagejson.com/",
      "name": "PageJSON",
      "description": "PageJSON is the first schema-driven page language. Generate validated JSON page specs with AI, render production-ready HTML with 18+ components and 60+ variants."
    },
    {
      "@type": "WebPage",
      "@id": "https://pagejson.com/components/address-blocks#webpage",
      "url": "https://pagejson.com/components/address-blocks",
      "name": "Address Block Components",
      "isPartOf": {
        "@id": "https://pagejson.com/#website"
      },
      "about": {
        "@id": "https://pagejson.com/#localbusiness"
      }
    },
    {
      "@type": "BreadcrumbList",
      "@id": "https://pagejson.com/components/address-blocks#breadcrumb",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "name": "Home",
          "item": "https://pagejson.com/"
        },
        {
          "@type": "ListItem",
          "position": 2,
          "name": "Address Block Components",
          "item": "https://pagejson.com/components/address-blocks"
        }
      ]
    }
  ]
}
<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"
  }
}
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "LocalBusiness",
      "@id": "https://pagejson.com/#localbusiness",
      "name": "INC64 LLC",
      "url": "https://pagejson.com/",
      "image": "https://pagejson.com/assets/img/logo/logo-placeholder.svg",
      "address": {
        "@type": "PostalAddress"
      }
    },
    {
      "@type": "WebSite",
      "@id": "https://pagejson.com/#website",
      "url": "https://pagejson.com/",
      "name": "PageJSON",
      "description": "PageJSON is the first schema-driven page language. Generate validated JSON page specs with AI, render production-ready HTML with 18+ components and 60+ variants."
    },
    {
      "@type": "WebPage",
      "@id": "https://pagejson.com/components/address-blocks#webpage",
      "url": "https://pagejson.com/components/address-blocks",
      "name": "Address Block Components",
      "isPartOf": {
        "@id": "https://pagejson.com/#website"
      },
      "about": {
        "@id": "https://pagejson.com/#localbusiness"
      }
    },
    {
      "@type": "BreadcrumbList",
      "@id": "https://pagejson.com/components/address-blocks#breadcrumb",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "name": "Home",
          "item": "https://pagejson.com/"
        },
        {
          "@type": "ListItem",
          "position": 2,
          "name": "Address Block Components",
          "item": "https://pagejson.com/components/address-blocks"
        }
      ]
    }
  ]
}
<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.