The <CardGrid.StackedCard> component is composed of two sections: one has a title and description and the other holds media content like an image or video.

It automatically adjusts its layout and element sizes depending on the available width. The sections can be arranged either vertically or horizontally.

<CardGrid.StackedCard
  maxWidth="half"
  title="..."
  description="..."
  media={
    <CardGrid.StackedCard.Image
      src="/screenshot.png"
      bezel="iPhone 17 Black"
      alt=""
    />
  }
  layoutDirection="forward"
  textAlignment="leading"
/>

Layout direction

The layoutDirection property controls the arrangement of the text and media sections within the card. It accepts two values:

Changing the layout direction from card to card is a good way to create visual variety in a card grid.

Text alignment

The textAlignment property controls the alignment of the title and description within the text section. It accepts three values:

Title font styles

The titleFontStyle property allows you to customize the font style of the title text. Besides the default sans value which uses the system font (SF Pro on macOS and iOS), it also accepts the following values:

Using one of the alternative font styles on a couple of cards in a grid adds a great visual treat and breaks the monotony. Don’t go overboard though, stick to the default sans style for most cards and use an alternative when it makes sense in the context of the card’s content.

Screenshots and screen recordings

<CardGrid.StackedCard> has two sub-components to display media content:

• <CardGrid.StackedCard.Image>
• <CardGrid.StackedCard.Video>

iPhone bezels

You can use any images or videos to display in the card, but most often you’ll use screenshots and screen recordings of your app either from the Simulator or a physical device.

For this use case, both media sub-components support device bezels to automatically wrap your screenshots and screen recordings with an iPhone frame. AppView will apply a proper mask to your media according to the selected iPhone model, so you don’t need to do any additional cropping or rounding.

The only requirement is to choose the same iPhone model for the bezel as the model you used to capture the screenshot or screen recording either on Simulator or a device. This way the media will fit perfectly without any distortions due to screen size mismatch.

<CardGrid.StackedCard.Image
  bezel="iPhone 17 Pro Black"
  src="/screenshot.png"
  alt=""
/>

Bezel cropping

When using iPhone bezel with a screenshot or screen recording, you have an option to crop it either from the top or bottom edge with an adjustable crop ratio.

<CardGrid.StackedCard.Image
  src="/screenshot.png"
  bezel="iPhone 17 Black"
  bezelCrop={{ edge: "top", croppedRatio: 0.5 }}
  alt=""
/>

This is useful when you want to focus attention on a specific part of the UI, plus it makes the grid look more dynamic when top and bottom crops are present on different cards.

It looks best when the cropped side is on the edge of the card, so make sure to combine bezelCrop with appropriate layoutDirection to achieve the best result.

bezelCrop works with both images and videos. It’s an object that has two properties:

Alternative media for dark and light modes

When using <CardGrid.StackedCard.Image> and <CardGrid.StackedCard.Video> components, you can provide separate media for dark and light modes. This is useful, for example, when you want to show your app’s UI in dark mode when the user is viewing your website also in dark mode.

<CardGrid.StackedCard.Image
  src="/screenshot_light.png"
  srcset={{ src: "/screenshot_dark.png", theme: "dark" }}
  bezel="iPhone 17 Black"
  alt=""
/>

<CardGrid.StackedCard.Video
  src="/recording_light.mov"
  srcset={{ src: "/recording_dark.mov", theme: "dark" }}
  bezel="iPhone 17 Black"
  alt=""
/>

Properties

<CardGrid.StackedCard>

<CardGrid.StackedCard.Image>

<CardGrid.StackedCard.Video>