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