# Card

A card is a container that groups related content and actions into a visually distinct unit.

When to use Card :

* group related content
* interactive element
* collection or grids

When to avoid Card :

* simple or minimal content
* large or complex layouts
* repetitive layouts

> For deeper reference, check out [Mobbin](https://mobbin.com/glossary/card) guide on Card.

## Basic Example

<figure><img src="/files/mYzIfiSagQ7csOTGnTVG" alt="Basic Card Example"><figcaption></figcaption></figure>

Because the `content` parameter provides a `ColumnScope`, any elements you place inside the Card will automatically stack vertically.

| Slot      | Description                                                           |
| --------- | --------------------------------------------------------------------- |
| `content` | The core visual elements of the card. Arranged vertically by default. |

```kotlin
Card(
    modifier = Modifier.fillMaxWidth(),
    contentPaddingValues = PaddingValues(KoreTheme.sizes.md)
) {
    Text(
        text = "The Elder Scrolls V: Skyrim",
        color = KoreTheme.colorScheme.onBackground,
        textStyle = KoreTheme.typography.title1
    )

    Spacer(modifier = Modifier.height(KoreTheme.sizes.sm))

    Text(
        text = "A dragon has returned to the ancient land of Skyrim. You are the Dragonborn  the only one who can absorb their souls and stop the apocalypse. Your legend begins now.",
        textStyle = KoreTheme.typography.body2
    )
}

```

## Styling

The Card exposes several parameters to customize its elevation, shape, internal padding, and colors to fit different hierarchy needs.

### Parameters

| Parameter              | Type                                 | Default                                        | Description                                                                 |
| ---------------------- | ------------------------------------ | ---------------------------------------------- | --------------------------------------------------------------------------- |
| `modifier`             | `Modifier`                           | `Modifier`                                     | Applied to the root container of the card.                                  |
| `shape`                | `Shape`                              | `CardDefaults.defaultCardShape`                | Defines the clipping shape of the card (typically rounded corners).         |
| `colors`               | `CardColors`                         | `CardDefaults.defaultCardColors()`             | The resolved colors used for the background and content of the card.        |
| `elevation`            | `Dp`                                 | `CardDefaults.defaultCardElevation`            | Controls the shadow cast by the card to communicate depth.                  |
| `contentPaddingValues` | `PaddingValues`                      | `CardDefaults.defaultCardContentPaddingValues` | The spacing applied internally between the card boundaries and the content. |
| `content`              | `@Composable ColumnScope.() -> Unit` | —                                              | The main content. Elements placed here are arranged vertically.             |

## Outlined Card

If your screen is already complex and elevated shadows would create too much visual noise, use an `OutlinedCard`. This variant drops the heavy shadow and relies on a clean, customizable border stroke to define its boundaries.

### Basic Example

<figure><img src="/files/rpCKJcIgvULFUc1emv1b" alt="Basic Outlined Card Example"><figcaption></figcaption></figure>

```kotlin
OutlinedCard(
    modifier = Modifier.fillMaxWidth(),
    contentPaddingValues = PaddingValues(KoreTheme.sizes.md)
) {
    Text(
        text = "Fus Ro Dah",
        color = KoreTheme.colorScheme.onBackground,
        textStyle = KoreTheme.typography.title1
    )

    Spacer(modifier = Modifier.height(KoreTheme.sizes.xxs))

    Text(
        text = "The Thu'um — the ancient dragon language. Masters of the Voice can shout the very fabric of reality into submission.",
        textStyle = KoreTheme.typography.body2
    )
}
```

### Parameters

The `OutlinedCard` shares the same anatomy as the standard `Card`, but introduces a `borderStroke` parameter and uses a different default color scheme.

| Parameter              | Type                                 | Default                                        | Description                                                                      |
| ---------------------- | ------------------------------------ | ---------------------------------------------- | -------------------------------------------------------------------------------- |
| `modifier`             | `Modifier`                           | `Modifier`                                     | Applied to the root container of the card.                                       |
| `shape`                | `Shape`                              | `CardDefaults.defaultCardShape`                | Defines the clipping shape of the card.                                          |
| `colors`               | `CardColors`                         | `CardDefaults.defaultOutlinedCardColors()`     | The resolved colors. Typically uses a transparent or surface-matched background. |
| `borderStroke`         | `BorderStroke`                       | `CardDefaults.defaultOutlinedBorderStroke`     | The stroke drawn around the perimeter of the card container.                     |
| `elevation`            | `Dp`                                 | `CardDefaults.defaultCardElevation`            | Controls shadow. Usually left at 0.dp for outlined variants.                     |
| `contentPaddingValues` | `PaddingValues`                      | `CardDefaults.defaultCardContentPaddingValues` | The spacing applied internally.                                                  |
| `content`              | `@Composable ColumnScope.() -> Unit` | —                                              | The main content.                                                                |

### Custom Border

You can easily override the `borderStroke` to emphasize the card, indicate a selection state, or match a specific brand color.

```kotlin
OutlinedCard(
    borderStroke = BorderStroke(width = 2.dp, color = KoreTheme.colorScheme.primary),
    modifier = Modifier.fillMaxWidth()
) {
    Text("Selected Item", style = KoreTheme.typography.display1, color = KoreTheme.colorScheme.primary)
    Text("The thicker, colored border indicates this card is currently selected.")
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://kore-1.gitbook.io/kore/documentation/data-display/card.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.