Page Heading

Page headings are used at the top of pages and contain the title of the page along with optional breadcrumbs, help link, action buttons, toolbar, and intro text.


React Component

Standalone Page Heading

Page Title

Page Heading with Back Link

Page Title

Page Heading with Help Link

Page Title

Help

Page Heading with Help Content

Page Title

About This Cool Thing

This is a block of content.

Page Heading with Action Buttons

Page Title

👋

Page Heading with Toolbar (Tabs)

Page Title

Page Heading w/ Toolbar + Secondary Text

Page Title

1 Email in Sequence

Page Heading w/ Intro

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo dolorum esse modi ut ipsa corporis.

Page Title

Page Heading w/ All Items

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo dolorum esse modi ut ipsa corporis.

Page Title

About This Cool Thing

This is a block of content.

1 Email in Sequence

Sage Component

SagePageHeading
<h3 class="t-sage-heading-6">Standalone Page Heading</h3>

<%= sage_component SagePageHeading, {
  title: "Page Title",
  spacer: { bottom: :xl },
} %>

<h3 class="t-sage-heading-6">Page Heading with Back Link</h3>

<%= sage_component SagePageHeading, {
  title: "Page Title",
  spacer: { bottom: :xl },
} do %>
    <% content_for :sage_breadcrumbs do %>
      <%= sage_component SageBreadcrumbs, {
        items: [
          {
            text: 'Back to Something',
            url: '#'
          }
        ]
      } %>
  <% end %>
<% end %>

<h3 class="t-sage-heading-6">Page Heading with Help Link</h3>

<%= sage_component SagePageHeading, {
  title: "Page Title",
  spacer: { bottom: :xl },
  help_title: "About This Cool Thing",
  help_link: {
    href: "#",
    name: "Help"
  },
} %>

<h3 class="t-sage-heading-6">Page Heading with Help Content</h3>

<%= sage_component SagePageHeading, {
  title: "Page Title",
  spacer: { bottom: :xl },
  help_title: "About This Cool Thing",
  help_html: "<p class=\"t-sage-body-small\">This is a block of content.</p>",
  help_link: {
    href: "#",
    name: "Learn more about cool things"
  },
} %>

<h3 class="t-sage-heading-6">Page Heading with Action Buttons</h3>

<%= sage_component SagePageHeading, {
  title: "Page Title",
  spacer: { bottom: :xl },
} do %>
    <% content_for :sage_page_heading_actions do %>
      <%= sage_component SagePopover, {
        icon: "preview-on",
        trigger_value: "Preview",
        trigger_icon_only: false,
        popover_position: "bottom-right"
      } do %>
        👋
      <% end %>
      <%= sage_component SageButton, {
        style: "primary",
        icon: { name: "add", style: "left" },
        value: "Create",
      } %>
    <% end %>
<% end %>

<h3 class="t-sage-heading-6">Page Heading with Toolbar (Tabs)</h3>

<%= sage_component SagePageHeading, {
  title: "Page Title",
  spacer: { bottom: :xl },
} do %>
    <% content_for :sage_page_heading_toolbar do %>
      <%= sage_component SageTabs, {
        items: [
          {
            text: "Active",
            active: true
          },
          {
            text: "Inactive",
          },
          {
            text: "Inactive",
          },
          {
            text: "Inactive",
          },
        ]
      } %>
    <% end %>
<% end %>

<h3 class="t-sage-heading-6">Page Heading w/ Toolbar + Secondary Text</h3>

<%= sage_component SagePageHeading, {
  title: "Page Title",
  spacer: { bottom: :xl },
  secondary_text: "1 Email in Sequence",
} do %>

    <% content_for :sage_page_heading_image do %>
      <%= image_tag "card-placeholder-sm.png" %>
    <% end %>
    <% content_for :sage_page_heading_toolbar do %>
      <%= sage_component SageButton, {
        style: "secondary",
        subtle: true,
        icon: { name: "preview-on", style: "left" },
        value: "Preview",
      }%>
      <%= sage_component SageButton, {
        style: "secondary",
        subtle: true,
        icon: { name: "chart", style: "left" },
        value: "Report",
      }%>
      <%= sage_component SageButton, {
        style: "secondary",
        subtle: true,
        icon: { name: "gear", style: "left" },
        value: "Settings",
      }%>
    <% end %>
<% end %>


<h3 class="t-sage-heading-6">Page Heading w/ Intro</h3>

<%= sage_component SagePageHeading, {
  title: "Page Title",
  spacer: { bottom: :xl },
} do %>
    <% content_for :sage_page_heading_intro do %>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo dolorum esse modi ut ipsa corporis.</p>
    <% end %>
<% end %>


<h3 class="t-sage-heading-6">Page Heading w/ All Items</h3>

<%= sage_component SagePageHeading, {
  title: "Page Title",
  spacer: { bottom: :xl },
  help_title: "About This Cool Thing",
  help_html: "<p class=\"t-sage-body-small\">This is a block of content.</p>",
  help_link: {
    href: "#",
    name: "Learn more about cool things"
  },
  secondary_text: "1 Email in Sequence",
} do %>
    <% content_for :sage_breadcrumbs do %>
      <%= sage_component SageBreadcrumbs, {
        items: [{
          text: "Back to Something",
          url: "#"
        }, {
          text: "Back to Something",
          url: "#"
        }, {
          text: "Back to Something",
          url: "#"
        }]
      } %>
    <% end %>
    <% content_for :sage_page_heading_actions do %>
      <%= sage_component SageButton, {
        style: "secondary",
        icon: { name: "preview-on", style: "only" },
        attributes: { "data-js-tooltip": "Preview" },
        subtle: true,
        value: "Preview",
      } %>
      <%= sage_component SageButton, {
        style: "primary",
        icon: { name: "add", style: "left" },
        value: "Create",
      } %>
    <% end %>
    <% content_for :sage_page_heading_toolbar do %>
      <%= sage_component SageButton, {
        style: "secondary",
        subtle: true,
        icon: { name: "preview-on", style: "left" },
        value: "Preview",
      }%>
      <%= sage_component SageButton, {
        style: "secondary",
        subtle: true,
        icon: { name: "chart", style: "left" },
        value: "Report",
      }%>
      <%= sage_component SageButton, {
        style: "secondary",
        subtle: true,
        icon: { name: "gear", style: "left" },
        value: "Settings",
      }%>
    <% end %>
    <% content_for :sage_page_heading_image do %>
      <%= image_tag "card-placeholder-sm.png" %>
    <% end %>
    <% content_for :sage_page_heading_intro do %>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo dolorum esse modi ut ipsa corporis.</p>
    <% end %>
<% end %>
Property Description Type Default

help_html

HTML that is passed to help link popover

Hash

nil

help_link

Array containing help link name and href

Hash

nil

help_title

Text for help link.

String

nil

secondary_text

Secondary text for page heading.

String

nil

title

Title text for page heading.

String

nil

Sections

Element

sage_breadcrumbs

This area holds the breadcrumbs at the top of the component.

SageBreadcrumbs

sage_page_heading_toolbar

This area holds the buttons that will navigate to subpages.

SageButton(s)

sage_page_heading_actions

This area holds the cta buttons for the component.

SageButton(s)

sage_page_heading_intro

This area holds the page intro text

<p>

sage_page_heading_image

This area holds the page heading image

image_tag()