# CardPreview

Preview region of a Card for prominent media or content.

## Default

Source: CoreAI.

[Download source](/coreai-design-system/source/examples/components-card-cardpreview--default.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { CardPreview } from "@coreai-ds/react-components";
import * as React from 'react';

// Inline wrapper — see CardFooter.stories.tsx.
const resolveAsset = (asset: string) => {
    const ASSET_URL = 'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/stories/src/assets/';
    return `${ASSET_URL}${asset}`;
};

export const Default = (): JSXElement => (<CardPreview logo={<img src={resolveAsset('docx.png')} alt="Microsoft Word logo"/>}>
    <img src={resolveAsset('doc_template.png')} alt="Preview of a Word document"/>
  </CardPreview>);

export default Default;
```

## API

Generated CoreAI prop summaries, not replacement type declarations. Most native DOM/event and ARIA props are omitted. `?` means optional; JSDoc shows defaults, deprecations, and conditional requirements. Defaults assume the standard CoreAI provider.

### CardPreview API

Component to render image previews of documents or articles in a Card component.

```ts
interface CardPreviewProps {
  as?: "div";

  children?: any;

  className?: string;

  /**
   * Container that holds a logo related to the image preview provided.
   */
  logo?: WithSlotShorthandValue<{ as?: "div"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, "children"> & { children?: any; }> | ({ as: "img"; } & Omit<Omit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & { ref?: ((instance: HTMLImageElement | null) => void) | RefObject<HTMLImageElement> | null | undefined; }, "children"> & { children?: undefined; }) | null | undefined;

  ref?: Ref<HTMLDivElement>;

  style?: CSSProperties;
}
```

## Implementation

CoreAI 0.12.0; Fluent 9.74.9.

[Setup and dependencies](/coreai-design-system/guides/Package.md).

Import components from `@coreai-ds/react-components`. CoreAI guidance above takes precedence over API demonstration examples.