hb-footer — footer

Category: layout
Tags: layout, navigation

What it does

Site footer in small, regular, or large layouts: company block, optional brand/contacts column, link columns, social icons, hb-contact-item rows, and policy links—all driven by JSON props. Bulma container, columns / column, title, and button style the regular layout; equal-width sections use a shared CSS variable for column flex-basis. On small layouts the body can expand/collapse unless disable_expanding_small is set; slots footerheader, footercontent, and footerbottom wrap major regions.

Custom element

hb-footer

Attributes (snake_case; use string values in HTML)

• id — optional string
• style — optional string
• company — required string (JSON: logo, names, description, VAT, etc.)
• brandandcontacts — optional string (JSON)
• columns — optional string (JSON array of titled link columns / cells)
• policies — optional string (JSON array of { label, key, link? })
• contacts — optional string (JSON: phones, addresses, emails, sites)
• socials — optional string (JSON: facebook, youtube, …)
• type — optional "small" | "regular" | "large"
• disable_expanding_small — optional boolean (string in HTML)

Events

• footerClick — { elClick: string }

Usage notes

Slots: footerpolicy, footerheader, footercontent, footerbottom, footer_small. CSS part: column-cell-button-content. Layout size metadata in docs: fullscreen.

Minimal HTML example

<hb-footer
  type="regular"
  company="{&quot;logoUri&quot;:&quot;https://example.com/logo.svg&quot;,&quot;siteName&quot;:&quot;Site&quot;,&quot;companyName&quot;:&quot;ACME&quot;,&quot;description&quot;:&quot;Tagline&quot;}"
  columns="[]"
  policies="[]"
></hb-footer>