# Specification

## Overview

A card is a container of content. Cards are often a summary of a larger set of content with links that drive visitors to the full content.

This specification is an extension of [SDS Card Specification →](https://github.com/salesforce-ux/salesforce-design-system/blob/main/packages/sds-components/src/card/card.spec.md)

---

### Anatomy and Appearance

#### DOM Structure

[SDS Card - DOM Structure →](https://github.com/salesforce-ux/salesforce-design-system/blob/main/packages/sds-components/src/card/card.spec.md#dom-structure)

## API

### Properties & Attributes

[SDS Card - Properties & Attributes →](https://github.com/salesforce-ux/salesforce-design-system/blob/main/packages/sds-components/src/card/card.spec.md#properties--attributes)

Below are the list of attributes from WES card in addition to sds card.

| Attribute   | Type                  | Default Value | Description                                    |
| ----------- | --------------------- | ------------- | ---------------------------------------------- |
| `direction` | `horizontal/vertical` | `vertical`    | Determines the layout of the card              |
| `media`     | `fill/no-fill`        | `fill`        | Determines the spread of the image in the card |
| `depth`     | `0/1/2`               | `2`           | Determines the elevation depth of the card     |

#### Styling Hooks

[SDS Card - Styling Hooks →](https://github.com/salesforce-ux/salesforce-design-system/blob/main/packages/sds-components/src/card/card.spec.md#styling-hooks)

Use the following Styling Hooks to customize the appearance of the card component. See [How to Use CSS in Your Web Component](https://github.com/salesforce-ux/salesforce-design-system/docs/subsystems/CSS_USAGE.md) for more details.

## Accessibility

[SDS Card - Accessibility →](https://github.com/salesforce-ux/salesforce-design-system/blob/main/packages/sds-components/src/card/card.spec.md#accessibility)

## Internationalization

[SDS Card - Internationalization →](https://github.com/salesforce-ux/salesforce-design-system/blob/main/packages/sds-components/src/card/card.spec.md#internationalization)

## Test Plan

[SDS Card - Test Plan →](https://github.com/salesforce-ux/salesforce-design-system/blob/main/packages/sds-components/src/card/card.spec.md#test-plan)