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.

Pending
Get early access to new unreleased features and work along side our team by beta testing features before they go live.
Get early access to new unreleased features and work along side our team by beta testing features before they go live.
Get early access to new unreleased features and work along side our team by beta testing features before they go live.
Get early access to new unreleased features and work along side our team by beta testing features before they go live.
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.jpg",
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.jpg",
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.jpg",
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.jpg",
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 |
---|---|---|---|
|
Sets the ( |
String |
|
|
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 |
|
|
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 |
|