Hero

A Hero can be used to call call attention to new features or content. The hero is flexible in size and can contain text, illustrations, full bleed images, and a full bleed video thumbnail.


React Component

Small

Be the first to try what Kajabi is building

Get early access to new unreleased features and work before they go live.

Well done alt text

Small Contained

Be the first to try what Kajabi is building

Get early access to new unreleased features and work before they go live.

Well done alt text

Small w/ CTA

Be the first to try what Kajabi is building

Get early access to new unreleased features and work before they go live.

Well done alt text

Small Contained w/ CTA

Be the first to try what Kajabi is building

Get early access to new unreleased features and work before they go live.

Well done alt text

Small - Borderless with Custom Background

Be the first to try what Kajabi is building

Get early access to new unreleased features and work before they go live.

Well done alt text

Large

Be the first to try what Kajabi is building before anyone else

Get early access to new unreleased features and work before they go live.

Large Contained

Be the first to try what Kajabi is building before anyone else

Get early access to new unreleased features and work before they go live.

Large w/ CTA

Be the first to try what Kajabi is building before anyone else

Get early access to new unreleased features and work before they go live.

Large Contained w/ CTA

Be the first to try what Kajabi is building before anyone else

Get early access to new unreleased features and work before they go live.

Large Contained - Borderless with Custom Background

Be the first to try what Kajabi is building before anyone else

Get early access to new unreleased features and work before they go live.

Well done alt text

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",
  description: "Get early access to new unreleased features and work before they go live.",
  image: "card-placeholder-hero.jpg",
  size: "small",
  title: "Be the first to try what Kajabi is building",
} do %>
  <% content_for :sage_hero_footer_actions do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Primary action",
    } %>
  <% end %>
<% end %>

<h2 class="t-sage-heading-6">Small Contained</h2>

<%= sage_component SageHero, {
  alt_text: "Well done alt text",
  description: "Get early access to new unreleased features and work before they go live.",
  image: "hero-contained-placeholder.png",
  size: "small",
  title: "Be the first to try what Kajabi is building",
  contained: true,
} do %>
  <% content_for :sage_hero_footer_actions do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Primary action",
    } %>
  <% end %>
<% end %>

<h2 class="t-sage-heading-6">Small w/ CTA</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 before they go live.",
  image: "card-placeholder-hero.jpg",
  size: "small",
  title: "Be the first to try what Kajabi is building",
} do %>
  <% content_for :sage_hero_footer_actions do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Primary action",
    } %>
  <% end %>
<% end %>

<h2 class="t-sage-heading-6">Small Contained w/ CTA</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 before they go live.",
  image: "hero-contained-placeholder.png",
  size: "small",
  title: "Be the first to try what Kajabi is building",
  contained: true,
} do %>
  <% content_for :sage_hero_footer_actions do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Primary action",
    } %>
  <% end %>
<% end %>

<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 before they go live.",
  image: "card-placeholder-hero.jpg",
  size: "small",
  title: "Be the first to try what Kajabi is building",
} do %>
  <% content_for :sage_hero_footer_actions do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Primary action",
    } %>
  <% end %>
<% end %>

<h2 class="t-sage-heading-6">Large</h2>

<%= sage_component SageHero, {
  alt_text: "",
  description: "Get early access to new unreleased features and work before they go live.",
  image: "card-placeholder-hero.jpg",
  title: "Be the first to try what Kajabi is building before anyone else",
  title_tag: "h3",
  size: "large"
} do %>
  <% content_for :sage_hero_footer_actions do %>
    <%= sage_component SageButtonGroup, { gap: :md } do %>
        <%= sage_component SageButton, {
          value: "Primary",
          style: "primary",
        } %>
      <%= sage_component SageButton, {
        value: "Dismiss",
        style: "primary",
        subtle: true,
        attributes: {
          "data-js-hero--dismiss": ""
        }
      } %>
    <% end %>
  <% end %>
<% end %>

<h2 class="t-sage-heading-6">Large Contained</h2>

<%= sage_component SageHero, {
  alt_text: "",
  description: "Get early access to new unreleased features and work before they go live.",
  image: "hero-contained-placeholder.png",
  title: "Be the first to try what Kajabi is building before anyone else",
  title_tag: "h3",
  contained: true,
  size: "large"
} do %>
  <% content_for :sage_hero_footer_actions do %>
    <%= sage_component SageButtonGroup, { gap: :md } do %>
        <%= sage_component SageButton, {
          value: "Primary",
          style: "primary",
        } %>
      <%= sage_component SageButton, {
        value: "Dismiss",
        style: "primary",
        subtle: true,
        attributes: {
          "data-js-hero--dismiss": ""
        }
      } %>
    <% end %>
  <% end %>
<% end %>

<h2 class="t-sage-heading-6">Large w/ CTA</h2>

<%= sage_component SageHero, {
  alt_text: "",
  cta_attributes: {
    "data-js-modaltrigger": "cool-modal",
    href: "#",
  },
  description: "Get early access to new unreleased features and work before they go live.",
  image: "card-placeholder-hero.jpg",
  title: "Be the first to try what Kajabi is building before anyone else",
  title_tag: "h3",
  size: "large"
} do %>
  <% content_for :sage_hero_footer_actions do %>
    <%= sage_component SageButtonGroup, { gap: :md } do %>
        <%= sage_component SageButton, {
          value: "Primary",
          style: "primary",
        } %>
      <%= sage_component SageButton, {
        value: "Dismiss",
        style: "primary",
        subtle: true,
        attributes: {
          "data-js-hero--dismiss": ""
        }
      } %>
    <% end %>
  <% end %>
<% end %>

<h2 class="t-sage-heading-6">Large Contained w/ CTA</h2>

<%= sage_component SageHero, {
  alt_text: "",
  cta_attributes: {
    "data-js-modaltrigger": "cool-modal",
    href: "#",
  },
  description: "Get early access to new unreleased features and work before they go live.",
  image: "hero-contained-placeholder.png",
  title: "Be the first to try what Kajabi is building before anyone else",
  title_tag: "h3",
  contained: true,
  size: "large"
} do %>
  <% content_for :sage_hero_footer_actions do %>
    <%= sage_component SageButtonGroup, { gap: :md } do %>
        <%= sage_component SageButton, {
          value: "Primary",
          style: "primary",
        } %>
      <%= sage_component SageButton, {
        value: "Dismiss",
        style: "primary",
        subtle: true,
        attributes: {
          "data-js-hero--dismiss": ""
        }
      } %>
    <% end %>
  <% end %>
<% end %>

<h2 class="t-sage-heading-6">Large Contained - Borderless with Custom Background</h2>

<%= sage_component SageHero, {
  alt_text: "Well done alt text",
  borderless: true,
  custom_background_color: "#E6F4FE",
  description: "Get early access to new unreleased features and work before they go live.",
  image: "hero-contained-placeholder.png",
  size: "large",
  title: "Be the first to try what Kajabi is building before anyone else",
  contained: true,
} do %>
  <% content_for :sage_hero_footer_actions do %>
    <%= sage_component SageButtonGroup, { gap: :md } do %>
        <%= sage_component SageButton, {
          value: "Primary",
          style: "primary",
        } %>
      <%= sage_component SageButton, {
        value: "Dismiss",
        style: "primary",
        subtle: true,
        attributes: {
          "data-js-hero--dismiss": ""
        }
      } %>
    <% end %>
  <% end %>
<% end %>

<%# 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

borderless

Removes border from Hero.

Boolean

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

contained

Adjusts layout to support images that are NOT full bleed.

Boolean

custom_background_color

Sets a custom background color for Hero.

String

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

Sections

sage_hero_footer_actions

This area can hold buttons or other CTAs in the content area.