<st-mega-menu-feature>

JSON type: MegaMenuFeature

A promo card for the featured column of an st-mega-menu (slot="featured"). The whole card is one link. Two looks, after okta.com:

• story (default): a rounded image on top, then the description and an underlined call-to-action line — a customer story or announcement.
• overlay: a tile with light text over image-url (darkened), or over an accent gradient when there is no image — an optional logo-url top left, the title and description at the bottom.

An http(s) href opens in a new tab unless target says otherwise. Any other href fires a cancelable mega-menu-select event (detail: { href }) first; a host doing client-side routing calls event.preventDefault() on it.

Usage

import '@sankhyatronics/sankhya-cms/mega-menu-feature'; // registers <st-mega-menu-feature>

Properties

Property	Attribute	Type	Default	Description
variant	variant	'story' | 'overlay' | 'tip'	'story'	story (default), overlay (dark, over an image or gradient) or tip (light blue, for a hint).
title	title	string	''
description	description	string	''
eyebrow	eyebrow	string	''	Small label above the title, e.g. "New" or "Report".
href	href	string	''
target	target	string	''	target for the link. Defaults to _blank for an http(s) href, _self otherwise.
imageUrl	image-url	string	''	Image on top (story) or behind the text (overlay).
imageAlt	image-alt	string	''
logoUrl	logo-url	string	''	Logo at the top of an overlay card.
logoAlt	logo-alt	string	''
ctaLabel	cta-label	string	''	Call-to-action text at the bottom of the card; empty hides it.
currentPath	—	string	''	Page path the header is showing; set by st-header. A card whose href matches gets aria-current="page".

Events

Event	Detail	Description
mega-menu-select		The card was clicked (cancelable; detail { href }).

See the live examples in Storybook.