OctantisWeb.Components.Polaris.CalloutCard (octantis v0.1.17)

View Source

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 stores logo, change colors and fonts, and more.</p>
    <:primary_action content="Customize checkout" url="#" />
  </.callout_card>

See

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;
          }
        }
      }
    }
  }
}

Summary

Functions

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.

Functions

callout_card(assigns)

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 stores logo, change colors and fonts, and more.</p>
    <:primary_action content="Customize checkout" url="#" />
  </.callout_card>

See

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.