Stat Box

Stat Boxes, for use in the CRM Dashboard, display important statistics for users to make informed decisions about their business.

React Component

Default with Data

1,342 in last 30 days

30%

Default with Legend Dot - Sage Color

1,342 in last 30 days

30%

Default with Legend Dot - Custom Color

1,342 in last 30 days

30%

Default with Data - Raised

1,342 in last 30 days

30%

Simple with Image

No insights to show

Simple with Icon

No insights to show

Null View

No insights to show

Sage Component

SageStatBox


<h3 class="t-sage-heading-6">Default with Data</h3>
<%= sage_component SageStatBox, {
  change: {
    type: "positive",
    value: "30%",
  },
  data: "1,342",
  has_data: true,

  link: {
    href: "#",
    value: "View More",
  },
  timeframe: "in last 30 days",
  title: "Completed",
} %>

<h3 class="t-sage-heading-6">Default with Legend Dot - Sage Color</h3>
<%= sage_component SageStatBox, {
  change: {
    type: "positive",
    value: "30%",
  },
  data: "1,342",
  has_data: true,
  legend_dot_color: "purple",
  link: {
    href: "#",
    value: "View More",
  },
  timeframe: "in last 30 days",
  title: "Completed",
} %>

<h3 class="t-sage-heading-6">Default with Legend Dot - Custom Color</h3>
<%= sage_component SageStatBox, {
  change: {
    type: "positive",
    value: "30%",
  },
  data: "1,342",
  has_data: true,
  legend_dot_custom_color: "#4fc9c5",
  link: {
    href: "#",
    value: "View More",
  },
  timeframe: "in last 30 days",
  title: "Completed",
} %>

<h3 class="t-sage-heading-6">Default with Data - Raised</h3>
<%= sage_component SageStatBox, {
  change: {
    type: "positive",
    value: "30%",
  },
  data: "1,342",
  has_data: true,
  link: {
    href: "#",
    value: "View More",
  },
  timeframe: "in last 30 days",
  title: "Completed",
} %>

<h3 class="t-sage-heading-6">Simple with Image</h3>
<%= sage_component SageStatBox, {
  data: "No insights to show",
  has_data: false,
  image: {
    src: "card-placeholder-sm.png"
  },
  title: "Completed",
} %>

<h3 class="t-sage-heading-6">Simple with Icon</h3>
<%= sage_component SageStatBox, {
  data: "No insights to show",
  has_data: false,
  icon: {
    name: "check",
    card_color: "published"
  },
  title: "Completed",
} %>

<h3 class="t-sage-heading-6">Null View</h3>
<%= sage_component SageStatBox, {
  data: "No insights to show",
  has_data: false,
  title: "Completed",
} %>

Property	Description	Type	Default
`change`	Sets the `type` and `value` properties for the label.	`{ type: "positive, negative, neutral", value: String }`	`nil`
`custom_label`	Custom label or content.	String	`nil`
`data` required	Numeric data displayed.	String	`nil`
`has_data`	Boolean that determines styling for `data`.	Bool	`nil`
`icon`	Shows icon to the left of data.	`{ card_color: Sage system statuses (optional) color: Sage system colors (optional) name: String }`	`nil`
`image`	Shows image to the left of data.	`{ alt: String (optional) value: String }`	`nil`
`legend_dot_color`	Show Legend dot with preset Sage system colors.	Sage system colors	`nil`
`legend_dot_custom_color`	Show Legend dot with any custom color.	String	`nil`
`link`	Sets the `href` and `value` properties for a given link.	`{ href: String, value: String }`	`nil`
`raised`	Sets "raised panel" styling.	Boolean	`nil`
`popover`	Slot for popover or custom content.	String	`nil`
`timeframe`	Timeframe for data.	String	`nil`
`title` required	Text displayed as the title.	String	`nil`

Don't