Callout cards are used to encourage merchants to take an action related to a new feature or opportunity. They are most commonly displayed in the sales channels section of Shopify.

Examples

<.callout_card title="Customize the style of your checkout" illustration="https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg">
  <p>Upload your store’s logo, change colors and fonts, and more.</p>
  <:primary_action content="Customize checkout" url="#" />
</.callout_card>

See

• https://polaris.shopify.com/components/layout-and-structure/callout-card
• https://github.com/Shopify/polaris/blob/main/polaris-react/src/components/CalloutCard/CalloutCard.tsx

Expanded CSS

To size the Callout Card body to align the buttons to the bottom:

.Octantis-CalloutCard.Polaris-Box{
  height:100%;
  .Polaris-CalloutCard__Container{
    height:100%;
    .Polaris-LegacyCard__Section{
      height:100%;
      .Polaris-CalloutCard{
        height:100%;
        .Polaris-CalloutCard__Content{
          height:100%;
          display: flex;
          flex-direction: column;
          .Polaris-CalloutCard__Body{
            flex-grow: 1;
          }
        }
      }
    }
  }
}

Attributes

• title (:string) - The title of the card.
• illustration (:string) - URL to the card illustration.

Slots

• primary_action - Primary action for the card. Accepts attributes:
  • content (:string) - Content the action displays.
  • disabled (:boolean) - Whether or not the action is disabled.
  • variant (:string) - Changes the visual appearance of the Button.Must be one of "plain", "primary", "secondary", "tertiary", or "monochromePlain".
  • tone (:string) - Sets the color treatment of the Button.Must be one of "critical", or "success".
  • full_width (:boolean) - Allows the button to grow to the width of its container.
  • size (:string) - Changes the size of the button, giving it more or less padding.Must be one of "micro", "slim", "medium", or "large".
  • navigate (:string) - Passes through to .link component.
  • patch (:string) - Passes through to .link component.
  • href (:string) - Passes through to .link component.
  • target (:string) - Passes through to .link component.
  • icon (:any) - Source of the icon.Examples include &OctantisWeb.Components.Polaris.Icons.arrow_right/1.
  • phx_click (:any) - Click function passed through to the button.
• secondary_action - Secondary action for the card. Accepts attributes:
  • content (:string) - Content the action displays.
  • disabled (:boolean) - Whether or not the action is disabled.
  • variant (:string) - Changes the visual appearance of the Button.Must be one of "plain", "primary", "secondary", "tertiary", or "monochromePlain".
  • tone (:string) - Sets the color treatment of the Button.Must be one of "critical", or "success".
  • full_width (:boolean) - Allows the button to grow to the width of its container.
  • size (:string) - Changes the size of the button, giving it more or less padding.Must be one of "micro", "slim", "medium", or "large".
  • navigate (:string) - Passes through to .link component.
  • patch (:string) - Passes through to .link component.
  • href (:string) - Passes through to .link component.
  • target (:string) - Passes through to .link component.
  • icon (:any) - Source of the icon.Examples include &OctantisWeb.Components.Polaris.Icons.arrow_right/1.
  • phx_click (:any) - Click function passed through to the button.