<st-plan-cards>

JSON type: PlanCards

A row of plan or offer cards with a header above them. Each card has an icon, a title with an optional badge, a description, check-marked bullets and a button at the foot of the card.

A button opens a st-quote-dialog when quote-dialog names its id: it fires a window st-quote-open event with { dialog, option: item.id, trigger } and does not navigate. Without quote-dialog, the button is a link to href. The footnote's action (footnote-action-label) opens the same dialog with the option unsure. Put {action} in footnote to place that button inside the sentence (the text around it is then plain text, not Markdown); without the token the button follows the footnote.

Usage

import '@sankhyatronics/sankhya-cms/plan-cards'; // registers <st-plan-cards>

Properties

Property	Attribute	Type	Default	Description
eyebrow	eyebrow	string	''	Small uppercase label above the title.
title	title	string	''
subtitle	subtitle	string	''	The line under the title.
items	—	PlanCardItem[]	[]	The cards, in order.
footnote	footnote	string	''	Markdown under the cards, centred. Put {action} where the footnote's text button goes.
footnoteActionLabel	footnote-action-label	string	''	Label of a text button after the footnote. Opens the quote dialog with the option unsure.
quoteDialog	quote-dialog	string	''	id of a st-quote-dialog. Set, the card buttons open that dialog instead of linking.

See the live examples in Storybook.