hb-banner — integrator guide

Category: content · Tags: content, marketing · Package: @htmlbricks/hb-banner

Summary

hb-banner is a marketing-style hero strip: optional logo image beside a heading and supporting line. Content is rendered inside the shadow root using Bulma layout (container, columns), typography (.title, .subtitle), and visibility helpers so wide and narrow viewports get different alignment (side-by-side vs stacked, centered).

Behavior

• Two responsive variants are rendered in the markup; Bulma visibility classes show exactly one at a time:
  • Wide (not “touch”): fluid container, vertically centered columns, logo column right-aligned (is-one-third-desktop), text column two-thirds (is-two-thirds-desktop).
  • Narrow (“touch” and below desktop): stacked, centered columns (is-mobile, is-multiline, has-text-centered), logo on its own row then title/subtitle.
• logouri: passed to <img src="…"> in both layouts. If omitted or empty, the image still renders with an empty src (invalid image); omit the attribute only when you accept a broken image or handle it in your host page.
• title / description: rendered as Bulma .title.is-4 and .subtitle.is-5 respectively. Either can be omitted; empty headings still produce elements with no visible text.
• Internationalization: none in this component (extra/docs.ts lists no i18n entries).
• Custom events: none in types/webcomponent.type.d.ts (Events is {}).

Layout and visual design

• Host: display: block (styles/webcomponent.scss).
• Logo box: .hb-banner-figure width 9.375rem (max 100%); .hb-banner-logo is width: 100%, height: auto, max-height: 9.375rem, object-fit: contain.
• Theme: Bulma 1.x Sass is forwarded on :host (container, columns, title, image, typography/spacing helpers, visibility). Additional Bulma CSS variables from the bundled theme apply; documented public variables are listed below.

Logic (implementation reference)

1. Props are read from the custom element API (logouri, title, description; plus optional id per typings).
2. The same inner structure is duplicated: first block uses is-hidden-touch, second uses is-hidden-desktop, matching Bulma’s breakpoint helpers to the two layouts described above.

Custom element tag

<hb-banner …></hb-banner>

Attributes (HTML / reflected props)

Web component attributes are strings (snake_case names). Logical optional fields from authoring types:

| Attribute | Role | |-----------|------| | id | Optional element id (per Component typings; standard host attribute). | | title | Main heading text. | | description | Subtitle / supporting line under the heading. | | logouri | URL of the logo image for <img src>. |

Events

No custom events are declared for this component (Events is an empty object in types/webcomponent.type.d.ts). Use standard DOM events on the host if needed.

CSS custom properties, parts, and slots

Documented theme variables (from extra/docs.ts / styleSetup):

| Variable | Default | Notes | |----------|---------|--------| | --bulma-primary | #00d1b2 | Accent / link tones from Bulma theme setup. | | --bulma-text | #363636 | Body / general text tone. | | --bulma-title-color | #363636 | Bulma .title color. |

Other --bulma-* tokens from the bundled Bulma theme may apply on :host; see Bulma CSS variables.

• ::part: none (cssParts is empty).
• Slots: none (htmlSlots is empty); all markup is internal to the shadow root.

TypeScript typings (authoring)

From types/webcomponent.type.d.ts:

export type Component = {
  id?: string;
  title?: string;
  description?: string;
  logouri?: string;
};

export type Events = {};

Minimal HTML

<hb-banner
  title="Welcome"
  description="Build faster with our component library."
  logouri="https://example.com/logo.svg"
></hb-banner>

Text-only (no logo URL):

<hb-banner
  title="Welcome"
  description="Short supporting line under the heading."
></hb-banner>

Only set logouri when you have a valid image URL; the template always includes an <img> bound to logouri.