Skip to content
Svelte Polaris Svelte Polaris

MediaCard

MediaCard displays content with a prominent media element like images or videos alongside text and actions. It’s perfect for showcasing products, articles, or any content where visual elements are important.

Examples

Section titled “Examples”

Basic media card

Section titled “Basic media card”

Use MediaCard to display content with prominent visual elements.

<script>
  import { MediaCard, Button } from 'svelte-polaris';


  function handleViewProduct() {
    console.log('View product details');
  }
</script>


<MediaCard
  title="Wireless Bluetooth Headphones"
  primaryAction={{
    content: 'View product',
    onAction: handleViewProduct
  }}
  description="Premium wireless headphones with active noise cancellation and 30-hour battery life. Perfect for music lovers and professionals."
  portrait={false}
>
  <img
    src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=300&fit=crop"
    alt="Wireless headphones"
    style="width: 100%; height: 200px; object-fit: cover;"
  />
</MediaCard>

Portrait media card

Section titled “Portrait media card”

Use portrait orientation for content that works better in a vertical layout.

<script>
  import { MediaCard, InlineGrid } from 'svelte-polaris';


  const products = [
    {
      id: 1,
      title: 'Organic Cotton T-Shirt',
      description: 'Comfortable and sustainable cotton t-shirt in various colors.',
      image: 'https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=300&h=400&fit=crop',
      price: '$29.99'
    },
    {
      id: 2,
      title: 'Denim Jacket',
      description: 'Classic denim jacket with modern fit and premium quality.',
      image: 'https://images.unsplash.com/photo-1544966503-7cc5ac882d5f?w=300&h=400&fit=crop',
      price: '$89.99'
    },
    {
      id: 3,
      title: 'Sneakers',
      description: 'Comfortable running sneakers with advanced cushioning technology.',
      image: 'https://images.unsplash.com/photo-1549298916-b41d501d3772?w=300&h=400&fit=crop',
      price: '$119.99'
    }
  ];


  function handleViewProduct(productId) {
    console.log('View product:', productId);
  }
</script>


<InlineGrid columns={3} gap="400">
  {#each products as product}
    <MediaCard
      title={product.title}
      primaryAction={{
        content: 'View details',
        onAction: () => handleViewProduct(product.id)
      }}
      description={product.description}
      portrait={true}
    >
      <img
        src={product.image}
        alt={product.title}
        style="width: 100%; height: 250px; object-fit: cover;"
      />
    </MediaCard>
  {/each}
</InlineGrid>

Media card with secondary actions

Section titled “Media card with secondary actions”

Add multiple actions to provide users with various options.

<script>
  import { MediaCard, BlockStack } from 'svelte-polaris';


  function handleReadMore() {
    console.log('Read full article');
  }


  function handleShare() {
    console.log('Share article');
  }


  function handleBookmark() {
    console.log('Bookmark article');
  }


  const secondaryActions = [
    {
      content: 'Share',
      onAction: handleShare
    },
    {
      content: 'Bookmark',
      onAction: handleBookmark
    }
  ];
</script>


<BlockStack gap="400">
  <MediaCard
    title="10 Tips for Better E-commerce Photography"
    primaryAction={{
      content: 'Read more',
      onAction: handleReadMore
    }}
    secondaryActions={secondaryActions}
    description="Learn professional techniques to showcase your products with stunning photography that converts browsers into buyers."
    portrait={false}
  >
    <img
      src="https://images.unsplash.com/photo-1554774853-719586f82d77?w=400&h=250&fit=crop"
      alt="Photography equipment"
      style="width: 100%; height: 200px; object-fit: cover;"
    />
  </MediaCard>


  <MediaCard
    title="Building Customer Loyalty in 2024"
    primaryAction={{
      content: 'Read more',
      onAction: handleReadMore
    }}
    secondaryActions={secondaryActions}
    description="Discover proven strategies to build lasting relationships with your customers and increase repeat purchases."
    portrait={false}
  >
    <img
      src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=400&h=250&fit=crop"
      alt="Customer service"
      style="width: 100%; height: 200px; object-fit: cover;"
    />
  </MediaCard>
</BlockStack>

Video media card

Section titled “Video media card”

Use MediaCard with video content for rich media experiences.

<script>
  import { MediaCard } from 'svelte-polaris';


  function handleWatchVideo() {
    console.log('Watch full video');
  }


  function handleDownload() {
    console.log('Download video');
  }
</script>


<MediaCard
  title="Product Demo: Smart Home Hub"
  primaryAction={{
    content: 'Watch full video',
    onAction: handleWatchVideo
  }}
  secondaryActions={[
    {
      content: 'Download',
      onAction: handleDownload
    }
  ]}
  description="See how our smart home hub can transform your living space with voice control, automation, and seamless device integration."
  portrait={false}
>
  <video
    controls
    style="width: 100%; height: 250px; object-fit: cover;"
    poster="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=250&fit=crop"
  >
    <source src="/demo-video.mp4" type="video/mp4">
    <track kind="captions" src="/captions.vtt" srclang="en" label="English">
    Your browser does not support the video tag.
  </video>
</MediaCard>

Props

Section titled “Props”

MediaCard props

Section titled “MediaCard props”
PropTypeDefaultDescription
titlestringTitle displayed in the card
descriptionstringDescription text below the title
portraitbooleanfalseUse portrait orientation (media above content)
primaryActionActionPrimary action button
secondaryActionsAction[]Array of secondary actions
size'small' | 'medium''medium'Size of the media card

Action type

Section titled “Action type”
type Action = {
  content: string;
  onAction: () => void;
  disabled?: boolean;
  destructive?: boolean;
  external?: boolean;
  url?: string;
}

Best practices

Section titled “Best practices”
  • Use high-quality, relevant media that supports your content
  • Keep titles concise but descriptive
  • Write descriptions that provide clear value propositions
  • Use portrait orientation for product showcases and catalogs
  • Use landscape orientation for articles and detailed content
  • Limit secondary actions to avoid overwhelming users
  • Ensure media has appropriate alt text for accessibility
  • Test cards with different content lengths
  • Use consistent card sizes within the same layout
  • Optimize media files for web performance

Accessibility

Section titled “Accessibility”
  • Media elements have descriptive alt text or captions
  • Card titles are properly structured as headings
  • Actions are keyboard accessible and clearly labeled
  • Focus management works correctly with interactive elements
  • Screen readers can navigate card content effectively
  • Color is not the only way to convey information
  • Interactive elements have sufficient touch targets
  • Video content includes captions when necessary
  • High contrast mode displays cards clearly
  • Card structure is announced to assistive technologies

Performance considerations

Section titled “Performance considerations”
  • Optimize images for web (WebP, appropriate sizing)
  • Use lazy loading for images below the fold
  • Provide appropriate video poster images
  • Consider using responsive images for different screen sizes
  • Minimize the number of media cards on a single page
  • Use efficient video formats and compression
  • Implement proper caching strategies for media
  • Consider progressive image loading techniques
Section titled “Related components”
  • Use Card for content without prominent media
  • Use Thumbnail for smaller media representations
  • Use Image for standalone media display
  • Use Button for card actions
  • Use InlineGrid to layout multiple media cards
  • Use BlockStack to stack media cards vertically