hb-site-contacts-row (site-contacts-row)

Category: content
Tags: content, contact
Package: @htmlbricks/hb-site-contacts-row

Overview

hb-site-contacts-row is a contact strip that groups addresses, phones, emails, websites, and availability (opening hours plus an optional appointment note) into a responsive Bulma layout. Each group can have its own title, Bootstrap Icons glyph, and list content.

The component registers the custom element hb-site-contacts-row. It runs inside a shadow root with Bulma layout and typography, and loads the Bootstrap Icons font from jsDelivr in <svelte:head>.

Custom element

<hb-site-contacts-row …></hb-site-contacts-row>

Layout: model

• small — Compact blocks: addresses use an inline “icon + content” row; phones, emails, websites, and availability use column halves on tablet and full width on mobile.
• big — Larger “card-style” columns (col_big) with a prominent icon row, title, and list.

Default: If you omit model, the implementation defaults to small.

Invalid values: Any model other than small or big renders the fallback text wrong model provided plus the value you passed (still inside the shadow tree).

Attributes (HTML)

Use snake_case attribute names. From plain HTML, pass objects as JSON strings (single-quoted in HTML, escaped quotes inside JSON).

| Attribute | Required | Description | | --- | --- | --- | | id | No | Optional host element id (forwarded as a normal attribute / prop). | | style | No | Present in the TypeScript Component shape; not wired into the template in the current implementation. | | model | No | "small" | "big". Defaults to "small". | | addresses | No | JSON: { "icon"?: string, "title"?: string, "addresses": Address[] }. | | phones | No | JSON: { "icon"?: string, "title"?: string, "phones": Phone[] }. | | emails | No | JSON: { "icon"?: string, "title"?: string, "emails": Email[] }. | | websites | No | JSON: { "icon"?: string, "title"?: string, "websites": Website[] }. | | availability | No | JSON: { "icon"?: string, "title"?: string, "times": string[], "appointment"?: boolean }. |

JSON shapes (TypeScript reference)

type Address = {
  address: string;
  latLng?: number[];  // [lat, lng] → Google Maps link when no `link`
  link?: string;      // external URL; takes precedence over `latLng`
  name?: string;      // shown as a prefix in `big` mode only
};

type Phone = {
  number: string;
  name?: string;      // prefix in `big` mode only
};

type Email = {
  address: string;
  label?: string;     // link text in `small`; in `big`, link text vs address
  name?: string;      // prefix in `big` mode only
};

type Website = {
  url: string;
  label?: string;
  name?: string;      // prefix in `big` mode only
};

Parsing: When any of addresses, phones, emails, websites, or availability arrives as a string, the component attempts JSON.parse inside an effect. Malformed JSON is logged to the console and leaves the previous value behavior up to the runtime.

Icons

Each block accepts an optional icon string: the Bootstrap Icons short name without the bi- prefix (the markup adds class="bi bi-{icon}"). Defaults if omitted:

| Block | Default icon | | --- | --- | | addresses | geo-alt | | phones | telephone | | emails | envelope | | websites | globe | | availability | clock |

Addresses: links

For each address with non-empty address:

1. If link is set → <a href="{link}" target="_blank">.
2. Else if latLng has length → Google Maps URL https://www.google.com/maps/@{lat},{lng},15z in a new tab.
3. Else → plain text.

Emails and websites

• Emails: mailto: links. In small mode, the list shows label as the link text when set, otherwise the address. In big mode, optional name: prefix, then a single mailto link using label or the address as visible text.
• Websites: External <a href="{url}"> with label or URL as text, with the same small / big differences as emails for prefixes.

Availability

• Renders when availability.times is a non-empty array; each string is one list item.
• When availability.appointment is truthy, an extra line is shown in Italian (implementation detail): *riceve per appuntamento in small mode and riceve per appuntamento in big mode.

Events

types/webcomponent.type.d.ts declares Events as {} (no custom events). The current component.wc.svelte does not dispatch custom events.

Styling

The component forwards styles/bulma.scss (Bulma 1.x CSS variables on :host) and styles/webcomponent.scss.

CSS custom properties (:host)

| Variable | Role | | --- | --- | | --bulma-text | Body copy in lists and labels. | | --bulma-link | Linked addresses, phones, emails, and websites. | | --bulma-block-spacing | Vertical rhythm between stacked blocks and icon sizing. | | --bulma-column-gap | Inline gaps in rows and list spacing. | | --bulma-size-small | Appointment line and small meta text. | | --bulma-weight-bold | Section titles and appointment emphasis. |

See Bulma’s CSS variables documentation for value types and inheritance.

CSS parts

| Part | Description | | --- | --- | | container | Root columns is-multiline wrapper (part="container"). Use for layout, max-width, or background overrides. |

Slots

None. All content is supplied via JSON attributes.

Minimal example

<hb-site-contacts-row
  model="small"
  emails='{"emails":[{"label":"Info","address":"[email protected]","name":"main"}]}'
></hb-site-contacts-row>

Example with multiple groups

<hb-site-contacts-row
  model="big"
  addresses='{"title":"Locations","addresses":[{"address":"1 Example Rd","latLng":[51.5,-0.12],"name":"HQ"}]}'
  phones='{"phones":[{"name":"Desk","number":"+1 555 0100"}]}'
  availability='{"times":["Mon–Fri 9–18"],"appointment":true}'
></hb-site-contacts-row>

Authoring types

For Svelte or TypeScript consumers, see types/webcomponent.type.d.ts for the full Component, Address, Phone, Email, Website, and Events definitions.

License

Package metadata references Apache-2.0 (see LICENSE.md in the published package when consuming from npm).