<st-hero>
JSON type: 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).
size, content-position and overlay="gradient" give the large editorial layout (copy on the
lower left over a gradient that darkens towards it) used by enterprise marketing heroes; the
defaults keep the original centered banner. Put several heroes in an st-carousel with
indicator-style="tabs" for a tabbed hero carousel.
badge is a pill above the title; highlights is a row of check-marked points under the buttons.
cta-note is a short line with a small padlock under the buttons (e.g. "No credit card needed"), left-aligned
with the buttons, or centred in a centred layout.
button-style="pill" gives the buttons the 52px pill look (primary navy, secondary white with an arrow).
layout="split" swaps the background for a two-column layout: copy on one side, image-src as an
<img> (alt from image-alt) on the other, on normal page colours with no overlay. In the split
layout the copy sits in the page's container (--st-cms-container-max) with the same side gutter
as the other sections.
In the split layout, image-label adds a window-style bar with that text above the image, and
media-inset ({ src, alt, label? }) puts a small screenshot card on the image's bottom-right corner.
media-inset replaces media-badge when both are set, so only one card shows.
A CTA with an href is a real link (<a href>), so external URLs, #anchors and /path?x=y
work without JavaScript. Its action event is cancelable: call preventDefault() on it to stop
the browser following the link (a router does this to navigate client-side). A CTA without an
href is a <button>.
Usage
import '@sankhyatronics/sankhya-cms/hero'; // registers <st-hero>
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
title | title | string | '' | |
subtitle | subtitle | string | '' | |
imageSrc | image-src | string | '' | |
actionLabel | action-label | string | '' | |
actionLabelShort | action-label-short | string | '' | Shorter action-label for phones (< 480px), so the button fits on one line. The full label stays the link's accessible name. |
href | href | string | '' | |
textAlignment | text-alignment | 'left' | 'center' | 'right' | 'justify' | 'left' | |
padding | padding | 'none' | 'small' | 'medium' | 'large' | 'none' | |
inverted | inverted | boolean | false | |
focalPoint | focal-point | 'top' | 'left' | 'right' | 'bottom' | 'center' | 'center' | |
eyebrow | eyebrow | string | '' | Small uppercase label above the title (e.g. an event or product name). |
secondaryActionLabel | secondary-action-label | string | '' | Label of an outlined second button next to the primary one. |
secondaryActionLabelShort | secondary-action-label-short | string | '' | Shorter secondary-action-label for phones (< 480px). |
secondaryHref | secondary-href | string | '' | |
badge | badge | string | '' | Small pill above the title (e.g. "New", "Now available"). |
highlights | — | string[] | [] | Check-marked points shown in a row under the buttons. |
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. |
layout | layout | 'background' | 'split' | 'background' | background (default) puts image-src behind the copy; split puts copy and image side by side. |
imageAlt | image-alt | string | '' | Alt text of the image in layout="split". Empty marks it as decorative. |
size | size | 'auto' | 'large' | 'full' | 'auto' | auto sizes to the content; large is a tall editorial hero (--st-hero-min-height); full fills the viewport. |
contentPosition | content-position | 'center' | 'bottom' | 'center' | center keeps the copy in the middle; bottom puts it in the lower part of the hero, on the page container. |
overlay | overlay | 'even' | 'gradient' | 'none' | 'even' | even darkens the whole image; gradient darkens behind the copy only; none shows the image as is. |
titleHighlight | title-highlight | string | '' | Text of title to set in the brand azure. Only the first occurrence is highlighted. |
mediaBadge | — | HeroMediaBadge | undefined | A dark card on the corner of the image, with an optional icon. Shown with layout="split" and an image-src. | |
imageLabel | image-label | string | '' | Label of a window-style bar (three dots, then the text) above the split-layout image. Shown with layout="split" and an image-src. |
mediaInset | — | HeroMediaInset | undefined | A small screenshot card on the bottom-right corner of the split-layout image. Replaces mediaBadge when both are set. | |
buttonStyle | button-style | 'default' | 'pill' | 'default' | default keeps the plain buttons. pill gives the buttons the 52px pill style (the secondary one with an arrow). |
headingLevel | heading-level | 1 | 2 | 1 | Level of the title heading: 1 (default) for a page's main hero, 2 for a hero that is not the page heading (e.g. the slides of a hero carousel, where the page has its own <h1>). |
Events
| Event | Detail | Description |
|---|---|---|
action | Cancelable, before following the link. Detail { href, kind }, kind being primary or secondary. |
See the live examples in Storybook.