OctantisWeb.Components.Polaris.CalloutCard (octantis v0.1.3)
View SourceCallout 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;
}
}
}
}
}
}
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 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.