Hero

Pending


Small

Be the first to try what Kajabi is building 1

Get early access to new unreleased features and work along side our team by beta testing features before they go live.

Well done alt text

Small with no CTA

Be the first to try what Kajabi is building 1

Get early access to new unreleased features and work along side our team by beta testing features before they go live.

Well done alt text

Small - Borderless with Custom Background

Be the first to try what Kajabi is building 1

Get early access to new unreleased features and work along side our team by beta testing features before they go live.

Well done alt text

Large - with dismiss button

Be the first to try what Kajabi is building 2

Get early access to new unreleased features and work along side our team by beta testing features before they go live.

Example Sage Modal

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Sage Component

SageHero
<h2 class="t-sage-heading-6">Small</h2>
<%= sage_component SageHero, {
  alt_text: "Well done alt text",
  cta_attributes: {
    "data-js-modaltrigger": "cool-modal",
    href: "#",
  },
  description: "Get early access to new unreleased features and work along side our team by beta testing features before they go live.",
  image: "card-placeholder-hero.jpeg",
  size: "small",
  title: "Be the first to try what Kajabi is building 1",
} %>

<h2 class="t-sage-heading-6">Small with no CTA</h2>
<%= sage_component SageHero, {
  alt_text: "Well done alt text",
  description: "Get early access to new unreleased features and work along side our team by beta testing features before they go live.",
  image: "card-placeholder-hero.jpeg",
  size: "small",
  title: "Be the first to try what Kajabi is building 1",
} %>

<h2 class="t-sage-heading-6">Small - Borderless with Custom Background</h2>
<%= sage_component SageHero, {
  alt_text: "Well done alt text",
  borderless: true,
  cta_attributes: {
    "data-js-modaltrigger": "cool-modal",
    href: "#",
  },
  custom_background_color: "#E6F4FE",
  description: "Get early access to new unreleased features and work along side our team by beta testing features before they go live.",
  image: "card-placeholder-hero.jpeg",
  size: "small",
  title: "Be the first to try what Kajabi is building 1",
} %>

<h2 class="t-sage-heading-6">Large - with dismiss button</h2>
<%= sage_component SageHero, {
  alt_text: "",
  cta_attributes: {
    "data-js-modaltrigger": "cool-modal",
    href: "#",
  },
  description: "Get early access to new unreleased features and work along side our team by beta testing features before they go live.",
  image: "card-placeholder-hero.jpeg",
  title: "Be the first to try what Kajabi is building 2",
  title_tag: "h3",
  button: sage_component(SageButton, {
    subtle: true,
    style: "secondary",
    value: "Dismiss",
    icon: {
      name: "remove",
      style: "left"
    },
    attributes: {
      "data-js-hero--dismiss": ""
    }
  })
} %>

<%# Video player modal %>
<%= sage_component SageModal, { id: "cool-modal" } do %>
  <header class="sage-modal__header">
    <h1 class="t-sage-heading-4">Example Sage Modal</h1>
    <aside class="sage-modal__header-aside">
      <button class="sage-btn sage-btn--secondary sage-btn--subtle sage-btn--icon-only-dot-menu-horizontal">
        <span class="visually-hidden">Menu</span>
      </button>
    </aside>
  </header>
  <div class="sage-modal__content">
    <p class="t-sage-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <footer class="sage-modal__footer">
    <aside class="sage-modal__footer-aside">
      <button class="sage-btn sage-btn--subtle sage-btn--secondary" data-js-modal-close>Close Modal</button>
    </aside>
    <button class="sage-btn sage-btn--primary sage-btn--icon-left-check">Take An Action</button>
  </footer>
<% end %>
Property Description Type Default

alt_text

Sets the (alt) text for the Hero's artwork image.

String

nil

button

Creates the toggle button for the component.

Sage Component

nil

cta_attributes

Include this property in order to activate a "play button" action on the image. This property allows for adding attributes to the Hero CTA artwork.

Hash

description

Sets description text for the Hero

String

nil

image

Image for the Hero.

String

nil

size

Size for the hero container.

String: ["small", "large"]

large

title

Sets the title for the component.

String

h2

title_tag

Sets the heading tag (h1 - h6) for the Hero's title

String

h2