Contact, address and map · Klarhimmel UI

Install

npx shadcn add @klarhimmel/contact-map

Usage

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import ContactMap from '@/components/klarhimmel/blocks/contact-map';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <ContactMap props={{
          "eyebrow": "Visit",
          "title": "Come and see us",
          "address": "Exempelgatan 12\n411 01 Göteborg",
          "hoursTitle": "Opening hours",
          "hours": [
            {
              "day": "Monday to Friday",
              "time": "09:00 to 18:00"
            },
            {
              "day": "Saturday",
              "time": "10:00 to 16:00"
            },
            {
              "day": "Sunday",
              "time": "Closed"
            }
          ],
          "phone": "+46 31 000 00 00",
          "email": "hello@example.com",
          "directions": {
            "label": "Get directions",
            "href": "#directions"
          },
          "map": {
            "src": "",
            "alt": "Map of the neighbourhood with the shop marked, two minutes from the tram stop"
          }
        }} />
      </BlockSurface>
    </Theme>
  );
}

Install

Import

$import Block from '@/components/klarhimmel/blocks/contact-map';

Also called

contact/map

About: A visit page in two halves: the address, an opening-hours list, phone and email on one side, a map image with a directions link on the other. For a shop, studio or restaurant that people come to.
Category: A form, a booking panel or office details. The page wires the submit.

Notes

When to use it

A visit page in two halves: address, opening hours, phone and email on one side, a map image with a directions link on the other. For several locations, `contact-offices` is the better fit.

Writing for it

- Hours need two to seven rows with a day (30, required) and a time (40). An empty time leaves a day with nothing next to it, which is how you show 'Closed' only if you write it. - The address (160) keeps its line breaks, so write it as street on one line and postcode and city on the next. - The map is a picture, not an embed. Use a static screenshot with a visible pin, and put the live route in the directions link.

Watch out for

Phone numbers are turned into tel links by stripping everything but digits and plus, so write them in a form that leaves a valid number. Address, phone, email and the directions link each vanish when empty.

Pairs well with

Usage

The block in a page, with its default content (long lists shortened). Every prop is in the table below.

section.tsx

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import ContactMap from '@/components/klarhimmel/blocks/contact-map';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <ContactMap props={{
          "eyebrow": "Visit",
          "title": "Come and see us",
          "address": "Exempelgatan 12\n411 01 Göteborg",
          "hoursTitle": "Opening hours",
          "hours": [
            {
              "day": "Monday to Friday",
              "time": "09:00 to 18:00"
            },
            {
              "day": "Saturday",
              "time": "10:00 to 16:00"
            },
            {
              "day": "Sunday",
              "time": "Closed"
            }
          ],
          "phone": "+46 31 000 00 00",
          "email": "hello@example.com",
          "directions": {
            "label": "Get directions",
            "href": "#directions"
          },
          "map": {
            "src": "",
            "alt": "Map of the neighbourhood with the shop marked, two minutes from the tram stop"
          }
        }} />
      </BlockSurface>
    </Theme>
  );
}

Props

The type, default and text limit of every prop. On a real page, over-limit text is kept and checkSections flags it (Installation, Check a page before you ship); this live preview shows the default until it fits. The panel above edits all props.

Prop	Type	Default	Description
`eyebrow`	`string`	`'Visit'`	Text, up to 60 characters.
`title`	`string`	`'Come and see us'`	Text, up to 120 characters.
`address`	`string`	`'Exempelgatan 12 411 01 Göteborg'`	Text, up to 160 characters.
`hoursTitle`	`string`	`'Opening hours'`	Text, up to 40 characters.
`hours`	`{ day, time }[]`	`3 items`	List of 2 to 7. Each item: day, time.
`phone`	`string`	`'+46 31 000 00 00'`	Text, up to 40 characters.
`email`	`string`	`'hello@example.com'`	Text, up to 80 characters.
`directions`	`Link`	`{…}`	See the type.
`map`	`Media`	`{…}`	See the type.
`headingLevel`	`'1' \| '2'`	`-`	One of '1', '2'. Optional; empty is not rendered.