<st-promo-banner>

JSON type: PromoBanner

Rounded call-to-action banner (title, subtitle, one or two outlined buttons) on a dark panel or a background image. A button with an href is a real link (<a href>): the browser follows it unless the action event is cancelled, so external URLs, #anchors and /path?x=y work without JavaScript. A button without an href is a <button>. variant="accent" fills the banner with the brand colour.

cta-note is a short line with a small padlock under the buttons (e.g. "No credit card needed"). In the inline layout it sits under the buttons in the right-hand group, left-aligned with the first button.

layout="inline" sets the copy on the left and the buttons on the right of one row (wrapping on small screens), with 56px/48px padding (24px on phones). Its buttons are 52px pills; with variant="accent" the first is a white pill with navy text and the second a transparent pill with a light blue outline. button-style="pill" gives the buttons the same pill shape in the default stack layout, which is otherwise unchanged.

Usage

import '@sankhyatronics/sankhya-cms/promo-banner'; // registers <st-promo-banner>

Properties

Property	Attribute	Type	Default	Description
title	title	string	''
subtitle	subtitle	string	''
actionLabel	action-label	string	''
actionLabelShort	action-label-short	string	''	Shorter action-label for phones (< 480px); the full label stays the accessible name.
secondaryActionLabelShort	secondary-action-label-short	string	''	Shorter secondary-action-label for phones (< 480px).
href	href	string	''	Target of the first button. With a value the button is a link; the action event can cancel the navigation.
imageSrc	image-src	string	''
secondaryActionLabel	secondary-action-label	string	''	Label of a second, outlined button next to the first.
secondaryHref	secondary-href	string	''	Target of the second button, sent in the action event detail.
variant	variant	'default' | 'accent'	'default'	default is the dark panel; accent fills the banner with the brand colour and makes the first button white.
inverted	inverted	boolean	false
layout	layout	'stack' | 'inline'	'stack'	stack (default) centres the copy above the buttons; inline puts the buttons beside the copy.
buttonStyle	button-style	'default' | 'pill'	'default'	default keeps the plain buttons; pill gives them the 52px pill shape (inline always uses pills).
ctaNote	cta-note	string	''	Short line with a small check under the buttons (e.g. "No credit card needed"). Empty hides it.
ctaNoteIcon	cta-note-icon	string	''	Iconify icon for the cta-note line (e.g. mdi:open-source-initiative). Empty keeps the padlock.

Events

Event	Detail	Description
action		Cancelable, before following the link. Detail { href, kind? }. kind is secondary for the second button only.

See the live examples in Storybook.