Media cards provide a consistent layout to present visual information to merchants. Visual media is used to provide additional context to the written information it's paired with.

Examples

<.media_card description="description" title="title">
  <img
    alt=""
    width="100%"
    height="100%"
    style="object-fit:contain;object-position:center"
    src="https://burst.shopifycdn.com/photos/business-woman-smiling-in-office.jpg?width=1850"
  />
</.media_card>

See

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

Attributes

• portrait (:boolean) - Whether or not card content should be laid out vertically. Defaults to false.
• size (:string) - Size of the visual media in the card. Defaults to "medium".
• class (:any) - A class name to be added to the component class name. Defaults to "".
• style (:string) - Style attribute.
• align_items (:string) - Style attribute.
• align_self (:string) - Style attribute.
• display (:string) - Style attribute.
• flex_grow (:string) - Style attribute.
• grid_auto_rows (:string) - Style attribute.
• grid_template_columns (:string) - Style attribute.
• grid_template_rows (:string) - Style attribute.
• justify_content (:string) - Style attribute.
• margin (:string) - Style attribute.
• max_height (:string) - Style attribute.
• min_height (:string) - Style attribute.
• object_fit (:string) - Style attribute.
• opacity (:string) - Style attribute.

Slots

• title - Heading content.
• inner_block (required) - The visual media to display in the card.
• primary_action - Main call to action, rendered as a basic button. 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 call to action, rendered as a plain button. 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.
• description - Body content.
• card - Attributes to be sent to the Card component.
• media_container - Attributes to be sent to the MediaContainter.