Catalog Item

The Catalog Item displays Products, Offers, and other resources with a large amount of detail to display in list form.


Sage Component

SageCatalogItem
<%= sage_component SageCardList, {} do %>
  <% 2.times do %>
    <%= sage_component SageCatalogItem, {
      title: "Fun For All – The Children Call: Their Favorite Time Of Year",
      image: "card-placeholder-sm.png",
      href: "#"
    } do %>
      <%= sage_component SageButton, {
        style: "secondary",
        subtle: true,
        small: true,
        icon: { name: "comment", style: "left" },
        value: "5 Golden Eggs",
      } %>
      <%= sage_component SageButton, {
        style: "secondary",
        subtle: true,
        small: true,
        icon: { name: "users", style: "left" },
        value: "3 Geese A-Laying",
      } %>
      <%= content_for :sage_aside do %>
        <%= sage_component SageDropdown, {
          align: "right",
          items: [{
            value: sage_component(SageBadge, { color: "published", value: "Publish" }),
            attributes: { "href": "#" },
          }, {
            value: sage_component(SageBadge, { color: "info", value: "Drip" }),
            attributes: { "href": "#" },
          }, {
            value: sage_component(SageBadge, { color: "draft", value: "Draft" }),
            attributes: { "href": "#" },
          }, {
            value: "Delete Category",
            icon: "trash",
            style: "danger",
            attributes: { "href": "#" },
          }]
        } do %>
          <%= sage_component SageBadge, {
            color: "info",
            interactive_type: :dropdown,
            value: "Drip",
          } %>
        <% end %>
        <%= sage_component SageDropdown, {
          align: "right",
          items: [{
            value: "Edit Item",
            icon: "pen",
            attributes: {
              "href": "#",
            },
          }]
        } do %>
          <%= sage_component SageButton, {
            style: "secondary",
            icon: { name: "dot-menu-horizontal", style: "only" },
            value: "Edit",
            align: "end",
            subtle: true,
          } %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
  <% 2.times do %>
    <%= sage_component SageCatalogItem, {
      title: "Fun For All – The Children Call: Their Favorite Time Of Year",
      icon: "sage-icon-mail-xl",
      href: "#"
    } do %>
      <%= sage_component SageButton, {
        style: "secondary",
        subtle: true,
        small: true,
        icon: { name: "comment", style: "left" },
        value: "5 Golden Eggs",
      } %>
      <%= sage_component SageButton, {
        style: "secondary",
        subtle: true,
        small: true,
        icon: { name: "users", style: "left" },
        value: "3 Geese A-Laying",
      } %>
      <%= sage_component SageButton, {
        style: "secondary",
        subtle: true,
        small: true,
        icon: { name: "coupon", style: "left" },
        value: "1 Partridge In A Pear Tree",
      } %>
      <%= content_for :sage_aside do %>
        <%= sage_component SageDropdown, {
          align: "right",
          items: [{
            value: sage_component(SageBadge, { color: "published", value: "Publish" }),
            attributes: { "href": "#" },
          }, {
            value: sage_component(SageBadge, { color: "info", value: "Drip" }),
            attributes: { "href": "#" },
          }, {
            value: sage_component(SageBadge, { color: "draft", value: "Draft" }),
            attributes: { "href": "#" },
          }, {
            value: "Delete Category",
            icon: "trash",
            style: "danger",
            attributes: { "href": "#" },
          }]
        } do %>
          <%= sage_component SageBadge, {
            color: "info",
            interactive_type: :dropdown,
            value: "Drip",
          } %>
        <% end %>
        <%= sage_component SageDropdown, {
          align: "right",
          items: [{
            value: "Edit Item",
            icon: "pen",
            attributes: {
              "href": "#",
            },
          }]
        } do %>
          <%= sage_component SageButton, {
            style: "secondary",
            icon: { name: "dot-menu-horizontal", style: "only" },
            value: "Edit",
            align: "end",
            subtle: true,
          } %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
  <% 2.times do %>
    <%= sage_component SageCatalogItem, {
      title: "Fun For All – The Children Call: Their Favorite Time Of Year",
      href: "#"
    } do %>
      <%= sage_component SageButton, {
        style: "secondary",
        subtle: true,
        small: true,
        icon: { name: "comment", style: "left" },
        value: "5 Golden Eggs",
      } %>
      <%= sage_component SageButton, {
        style: "secondary",
        subtle: true,
        small: true,
        icon: { name: "users", style: "left" },
        value: "3 Geese A-Laying",
      } %>
      <%= sage_component SageButton, {
        style: "secondary",
        subtle: true,
        small: true,
        icon: { name: "coupon", style: "left" },
        value: "1 Partridge In A Pear Tree",
      } %>
      <%= content_for :sage_aside do %>
        <%= sage_component SageDropdown, {
          align: "right",
          items: [{
            value: sage_component(SageBadge, { color: "published", value: "Publish" }),
            attributes: { "href": "#" },
          }, {
            value: sage_component(SageBadge, { color: "info", value: "Drip" }),
            attributes: { "href": "#" },
          }, {
            value: sage_component(SageBadge, { color: "draft", value: "Draft" }),
            attributes: { "href": "#" },
          }, {
            value: "Delete Category",
            icon: "trash",
            style: "danger",
            attributes: { "href": "#" },
          }]
        } do %>
          <%= sage_component SageBadge, {
            color: "info",
            interactive_type: :dropdown,
            value: "Drip",
          } %>
        <% end %>
        <%= sage_component SageDropdown, {
          align: "right",
          items: [{
            value: "Edit Item",
            icon: "pen",
            attributes: {
              "href": "#",
            },
          }]
        } do %>
          <%= sage_component SageButton, {
            style: "secondary",
            icon: { name: "dot-menu-horizontal", style: "only" },
            value: "Edit",
            align: "end",
            subtle: true,
          } %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
<% end %>
Property Description Type Default

href

Applies link to the title

String

nil

image

Image for the catalog item

String

nil

title

Title text of the catalog item

String

nil

icon

Icon for the catalog item

String

nil

Sections

Element

sage_aside

This area holds the dropdown menu for this component.

SageDropdown