Components
Every component is a Lit custom element. The JSON type is what page JSON uses; the React binding exports a component of the same name.
| Element | JSON type | Summary |
|---|---|---|
<st-attention-panel> | AttentionPanel | A tinted panel that calls out the most serious item needing action: an icon, a title, a line of detail and an action link. tone picks the colour: warning (amber) for things due soon, danger (red) for overdue or failing items, accent (blue) for set-up tips. |
<st-bar-chart> | BarChart | A vertical bar chart for a fixed set of categories: value labels above the bars, gridlines with labels on the left, and category labels underneath. Heights scale to max, or to the largest bar or tick when max is not set. Values are not formatted here: pass valueLabel and tick labels already formatted (currency, lakh/crore), so this element stays locale-free. |
<st-bento-grid> | BentoGrid | A responsive 4-column bento grid of icon/image cards. Items are set via the items property. Descriptions are Markdown. A card links as a whole when it has href alone; with actionLabel the link becomes a button inside the card. |
<st-booking> | Booking | A booking experience for a website, in place of Microsoft's own Bookings page: pick a service, optionally a staff member ("Any available" is the default), pick a day on a calendar and a time, enter name, email, an optional phone and notes, accept the consent box, and get a confirmation with a private link to manage the appointment. It talks to Suite Core's public bookings API under endpoint ({endpoint}/public/v1/bookings/..., no cookies, no credentials). |
<st-card> | Card | A surfaced container — content goes in the default slot. Attributes: variant, padding, elevation, hoverable, inverted; a click handler is just a native click listener on the element. padding takes none | small | medium | large; elevation takes none | sm | md | lg. |
<st-carousel> | Carousel | Cycles through its slotted children, one visible at a time, with optional autoplay, arrows and dot indicators. The incoming slide slides in from the travel direction (CSS keyframes in place of the source's framer-motion spring), or fades in with transition="fade". Autoplay pauses while hovered (unless pause-on-hover is turned off, e.g. for a full-screen hero the pointer nearly always rests on) or focused, and stops when the element is disconnected; a paused slide keeps the time it had left. Under prefers-reduced-motion: reduce autoplay starts paused; the tabs' play button still starts it. |
<st-chip> | Chip | A small rounded status pill: text in the default slot, with an optional leading dot. Tones map to the theme's status tokens (soft background, text colour on that background), so a chip reads the same in every theme. Use neutral for plain labels, accent for the brand tint, and the status tones for meaning only (success = done, warning = due soon, danger = overdue). |
<st-contact-form> | ContactForm | A contact form for a website: name, work e-mail, company, an optional phone, a topic, a message and a required consent box. It posts the answers as JSON to endpoint and shows what came back: a success note (with the reference, when the API gives one), field messages from the server, or a short note when the message could not be sent. The text the server sends is never shown. Only the component's own labels and messages, plus the server's per-field messages, appear on the page. |
<st-content-block> | ContentBlock | A long-form article section: an optional eyebrow, a title, a subtitle, an optional featured image with caption, then Markdown body text. The body comes from content-src (a Markdown URL) or an inline content string (so the block works without a fetch); content-src wins when both are set. |
<st-cookie-consent> | CookieConsent | Fixed bottom consent bar with explicit choices: accept all, reject all optional cookies, or (with categories and a settings-button-text) open a settings panel to allow categories one by one. Optional categories are off until the visitor turns them on. The choice is kept in localStorage (storage-key, default sankhya_ui_cookie_consent; storage errors are ignored) and the bar renders nothing once a choice exists. Fires cookie-consent-accept, cookie-consent-refuse or cookie-consent-save (detail { status, categories }). The default slot replaces the message text. privacy-policy-link opens in the same tab for a site path, in a new tab for an external URL. |
<st-date-tile> | DateTile | A calendar date tile: a month band over a large day number, as used for due dates. tone colours the month band: default for a neutral date, warning for due soon, danger for overdue. The tile's box sits on an inner element, so an outer page's CSS reset can't remove its border. |
<st-dropdown> | Dropdown | A labeled trigger + slotted dropdown panel — nav menus (typically holding an st-menu-grid), action menus, anything "click a trigger, show content under it". Markup (.menu > .menu-title + .menu-dropdown), sizes, 0.3s slide/fade, and behavior — |
<st-feature-item> | FeatureItem | One feature tile for st-features-section: optional icon, title (<h3>), Markdown description and an optional "Learn more" link, rendered on an st-card. icon is an Iconify name (e.g. mdi:rocket). The link is a plain <a href>, so it works without JavaScript; the click is composed, so an SPA router can intercept it (e.g. via event.composedPath()) and navigate client-side. http(s) links open in a new tab. |
<st-feature-split> | FeatureSplit | A title/markdown-subtitle/feature-list block beside (or under) an image. The action-label button is a real link to href: the browser follows it unless the cancelable feature-split-action event is cancelled (a router does this to navigate client-side). |
<st-features-section> | FeaturesSection | A titled grid of feature tiles. Tiles come from the items property, from slotted st-feature-item elements, or both (slotted first). columns sets the grid width (default 2; one column below 768px). inverted is passed on to the items tiles; slotted tiles need their own inverted attribute. |
<st-flow> | Flow | A left-to-right process or architecture flow: boxes joined by arrows. Boxes come in three looks (solid, outline, accent); the arrows are decorative (aria-hidden), and the list is exposed as an ordered list. Below 600px the row stacks vertically and the arrows point down. inverted puts the flow on the dark band (--st-cms-band-dark-bg). |
<st-footer> | Footer | The footer, in two layouts: |
<st-header> | Header | The app-shell header bar — brand (image + title, or title alone) on the left, a slot="menu" for primary nav (e.g. st-dropdown/st-menu-grid mega-menus, or plain links) taking the middle, and a slot="utility" for account/app-switcher/theme controls on the right. title is the primary brand prop; brand-image-url is optional. For a fixed nav-links/user-menu header, use st-app-header instead. |
<st-hero> | Hero | Full-width hero banner: background image with a darkening overlay, optional eyebrow, title, optional subtitle and up to two call-to-action links. The entrance animation is CSS keyframes (skipped under prefers-reduced-motion). |
<st-icon-button> | IconButton | A small, icon-only action button. The icon is default-slotted content (the package has no icon library dependency), the same convention as st-dropdown/st-menu-grid-item's slot="icon". |
<st-items-accordion> | ItemsAccordion | A vertical list of collapsible title/content rows; one open at a time unless allow-multiple. Each row's content is Markdown, sanitized. open-first starts with the first row open. The section title is an <h2> and each row title an <h3> wrapping its toggle button, which exposes aria-expanded and aria-controls for the row's panel. |
<st-kpi-card> | KpiCard | A key-figure card for dashboards: a label, one large value with an optional unit (for example "lakh" or "crore"), a secondary line, and a row of chips. The icon slot sits beside the label. hero gives the blue gradient card used for the headline figure. The value is shown exactly as passed in: format numbers (Indian grouping, currency symbols) before setting it. |
<st-markdown> | — | Renders Markdown (GFM, single newlines become <br>) from either an inline content string or a src URL it fetches. Output is sanitized with DOMPurify. src wins over content when both are set. While a fetch is pending it shows "Loading content..."; on failure "Error loading content." and a markdown-error event (detail: { error }). |
<st-mega-menu> | MegaMenu | The rich layout of a mega-menu panel, after okta.com: an optional intro column on the left (a large heading, a description and, under a divider, quick links in slot="intro"), then the link columns side by side (st-mega-menu-columns in the default slot), then an optional featured column on the right (featured-heading over the st-mega-menu-feature cards in slot="featured"). Slot it into an st-dropdown with mega set. |
<st-mega-menu-column> | MegaMenuColumn | One column (or one group within a column) of an st-mega-menu: a heading, an optional line of description, then its links stacked — usually st-menu-items with variant="link". Nest columns to stack several headed groups in one column, as okta.com does. |
<st-mega-menu-feature> | 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: |
<st-menu-grid> | MenuGrid | A responsive grid of st-menu-grid-items — the "rich" nav-menu layout (icon + title + description per entry, arranged in columns), typically slotted into st-dropdown's default slot. Markup is .menu-grid-container > .menu-grid.columns-N; breakpoints: at 768px, 2–4 columns become 2; at 480px, everything becomes 1 (a 1-column grid stays 1). |
<st-menu-grid-item> | MenuGridItem | One entry in an st-menu-grid — icon (via slot="icon") + title on one line, an optional description below, and an optional corner badge ("New", "Popular", ...). Effects are CSS: fades up the first time it scrolls into view, scales to 1.02 on hover / 0.98 while pressed, the icon tilts on hover, the badge pops in. Colors come from the suite theme rather than per-item utility classes. |
<st-menu-item> | MenuItem | A single flat nav row — icon (slot="icon") + title + badge on one line, an optional description below — as opposed to st-menu-grid-item's card for a multi-column grid. Effects are CSS: nudges right and scales to 1.01 on hover / 0.99 while pressed, the icon tilts on hover, the badge pops in, the description fades in. Colors come from the suite theme rather than per-item utility classes. |
<st-plan-cards> | 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. |
<st-product-nav> | ProductNav | A product sub-navigation bar for a product page, shown under the site header: a lockup (the product icon, a prefix and a name, with a tagline under it), in-page section links, an optional site-menu button and an optional external button. |
<st-promo-banner> | 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. |
<st-quote-dialog> | QuoteDialog | A quote-request dialog: radio cards for the kind of request, then name, e-mail, company, a user count, an optional message and a required consent box. It opens when a window st-quote-open event names its id (st-plan-cards does this on a button click), with that option preselected. |
<st-screenshot-tour> | ScreenshotTour | A product tour: a row of tab buttons, one per screenshot, and below it the selected screenshot in a framed figure with its step, title and caption. Only the selected screen is shown; the others are not rendered in the document flow. |
<st-section> | Section | A page band that holds other content: sets the background, the spacing above and below, and the content width, with an optional eyebrow/title/subtitle heading over its slotted children. Use it to give a run of components one dark or tinted backdrop and a consistent vertical rhythm, the way enterprise marketing pages stack full-width sections. |
<st-segmented-control> | SegmentedControl | A row of mutually exclusive segments in a grey track, one of them lifted as white. Pass the segments as options and the chosen one as value; a segment-change event fires on choice. Keyboard: arrows move between segments, Home and End jump to the ends. |
<st-select> | Select | A fully custom-styled replacement for native <select>, used everywhere the wizard needs a single-choice dropdown (template source, list, document library, admin roles, ...). |
<st-stats> | Stats | Responsive grid of headline numbers with a label and optional description. Port of React Stats. inverted puts it on the dark band (--st-cms-band-dark-bg), which stays dark in the dark theme. |
<st-steps> | Steps | A numbered process: a responsive grid of cards, each with an automatic "01", "02", ... number, a title and a description. highlightLast makes the final card a dark navy call-out, the way enterprise pages close a how-it-works sequence. inverted puts the whole block on the dark band. variant="band" sets the block on a white full-width band with hairline top and bottom borders; the cards sit on a light blue surface and the numbers are large azure. |
<st-tag-strip> | TagStrip | A single bordered band: a small uppercase label on the left and a run of bold items beside it (e.g. "Supported platforms: AWS · Azure · GCP"). Items wrap onto new lines on narrow screens. inverted puts the band on the dark band (--st-cms-band-dark-bg). |
<st-testimonials> | Testimonials | Section heading plus customer quotes or stories. Port of React Testimonials. |
<st-tooltip> | — | A small label that shows above a control: after a short rest on hover, and at once on keyboard focus. Wrap the control (a button or an icon button) in it and pass the same words as its accessible name in text. The control is still the thing that's announced; the bubble is decorative (aria-hidden), so the words aren't read twice. |