Be the first to try what Kajabi is building
Get early access to new unreleased features and work before they go live.

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.
Get early access to new unreleased features and work before they go live.
Get early access to new unreleased features and work before they go live.
Get early access to new unreleased features and work before they go live.
Get early access to new unreleased features and work before they go live.
Get early access to new unreleased features and work before they go live.
Get early access to new unreleased features and work before they go live.
Get early access to new unreleased features and work before they go live.
Get early access to new unreleased features and work before they go live.
Get early access to new unreleased features and work before they go live.
Get early access to new unreleased features and work before they go live.
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 |
---|---|---|---|
|
Sets the ( |
String |
|
|
Removes border from Hero. |
Boolean |
|
|
Creates the toggle button for the component. |
Sage Component |
|
|
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 |
|
|
Adjusts layout to support images that are NOT full bleed. |
Boolean |
|
|
Sets a custom background color for Hero. |
String |
|
|
Sets description text for the Hero |
String |
|
|
Image for the Hero. |
String |
|
|
Size for the hero container. |
String: ["small", "large"] |
|
|
Sets the title for the component. |
String |
|
|
Sets the heading tag ( |
String |
|
Sections |
|||
|
This area can hold buttons or other CTAs in the content area. |