---
title: Cards
description: Cards in Click UI are used to display information in a visually consistent manner.
category: Data
related: [Panel, Container, Badge, Icon]
commonPatterns: [dashboard-cards, feature-cards, product-cards]
---

Source: https://clickhouse.design/click-ui/cards

# Cards

Cards are used to display information in a visually consistent manner. Click UI provides several card variants: Primary Card for highlighting key information, Secondary Card for supplementary content, Horizontal Card for side-by-side layouts, and Promotion Card for promotional messages.

## Primary card

Primary Card is used to highlight key information or actions, drawing attention to important content within a layout in a visually consistent manner.

## Example

## Props

| Prop          | Type                                                                                   | Default value  | Description                                               |
| ------------- | -------------------------------------------------------------------------------------- | -------------- | --------------------------------------------------------- |
| title         | `string`                                                                               | `""`           | The title text displayed in the card                      |
| description   | `string`                                                                               | `""`           | The description text displayed below the title            |
| alignContent  | `"start" \| "center" \| "end"`                                                         | `"center"`     | The horizontal alignment of the card content              |
| infoUrl       | `string`                                                                               | `""`           | URL for the info link displayed at the bottom of the card |
| infoText      | `string`                                                                               | `"Learn more"` | The text displayed for the info link                      |
| size          | `"sm" \| "md" \| "lg"`                                                                 | `"md"`         | The size of the card                                      |
| hasShadow     | `boolean`                                                                              | `false`        | If true, the card will have a drop shadow                 |
| topBadgeText  | `string`                                                                               | `""`           | Text to display in the top badge                          |
| topBadgeState | `"default" \| "success" \| "neutral" \| "danger" \| "disabled" \| "warning" \| "info"` | `"default"`    | The visual state of the top badge                         |
| icon          | `IconName`                                                                             | `""`           | Icon name to display in the card                          |

```tsx
import {CardPrimary} from '@clickhouse/click-ui'

<CardPrimary 
title="Card title"
description="A description very interesting that presumably relates to the card."
icon="building"
infoUrl="https://clickhouse.com"
infoText="Read more"
size="md"
alignContent="center"
/>
```

## Quick start

```tsx
import { CardPrimary } from '@clickhouse/click-ui'

function MyCardPrimary() {
return (
  <CardPrimary 
    title="Card title"
    description="A description that relates to the card."
    icon="building"
    infoUrl="https://clickhouse.com"
    infoText="Learn more"
  />
)
}
```

## Secondary card

Secondary Card is used for supplementary information or actions, providing a more subtle visual treatment compared to Primary Card.

## Example

## Props

| Prop          | Type                                                                                   | Default value  | Description                                               |
| ------------- | -------------------------------------------------------------------------------------- | -------------- | --------------------------------------------------------- |
| title         | `string`                                                                               | `""`           | The title text displayed in the card                      |
| description   | `string`                                                                               | `""`           | The description text displayed below the title            |
| alignContent  | `"start" \| "center" \| "end"`                                                         | `"center"`     | The horizontal alignment of the card content              |
| infoUrl       | `string`                                                                               | `""`           | URL for the info link displayed at the bottom of the card |
| infoText      | `string`                                                                               | `"Learn more"` | The text displayed for the info link                      |
| size          | `"sm" \| "md" \| "lg"`                                                                 | `"md"`         | The size of the card                                      |
| hasShadow     | `boolean`                                                                              | `false`        | If true, the card will have a drop shadow                 |
| topBadgeText  | `string`                                                                               | `""`           | Text to display in the top badge                          |
| topBadgeState | `"default" \| "success" \| "neutral" \| "danger" \| "disabled" \| "warning" \| "info"` | `"default"`    | The visual state of the top badge                         |
| icon          | `IconName`                                                                             | `""`           | Icon name to display in the card                          |
| iconUrl       | `string`                                                                               | `""`           | URL of an image to display as the icon                    |

```tsx
import {CardSecondary} from '@clickhouse/click-ui'

<CardSecondary 
title="Card title"
description="A description very interesting that presumably relates to the card."
icon="building"
infoUrl="https://clickhouse.com"
infoText="Read more"
size="md"
alignContent="center"
/>
```

## Horizontal card

Horizontal Card displays content in a side-by-side layout, ideal for showcasing items with images and descriptions.

## Example

## Props

| Prop          | Type                                                                                   | Default value  | Description                                               |
| ------------- | -------------------------------------------------------------------------------------- | -------------- | --------------------------------------------------------- |
| title         | `string`                                                                               | `""`           | The title text displayed in the card                      |
| description   | `string`                                                                               | `""`           | The description text displayed below the title            |
| alignContent  | `"start" \| "center" \| "end"`                                                         | `"start"`      | The horizontal alignment of the card content              |
| infoUrl       | `string`                                                                               | `""`           | URL for the info link displayed at the bottom of the card |
| infoText      | `string`                                                                               | `"Learn more"` | The text displayed for the info link                      |
| size          | `"sm" \| "md" \| "lg"`                                                                 | `"md"`         | The size of the card                                      |
| hasShadow     | `boolean`                                                                              | `false`        | If true, the card will have a drop shadow                 |
| topBadgeText  | `string`                                                                               | `""`           | Text to display in the top badge                          |
| topBadgeState | `"default" \| "success" \| "neutral" \| "danger" \| "disabled" \| "warning" \| "info"` | `"default"`    | The visual state of the top badge                         |
| iconUrl       | `string`                                                                               | `""`           | URL of an image to display as the icon                    |

```tsx
import {CardHorizontal} from '@clickhouse/click-ui'

<CardHorizontal 
iconUrl="https://clickhouse.com/images/horizontal-card-icon.png"
title="Horizontal card"
description="This card displays its content in a horizontal layout with an image."
alignContent="start"
infoUrl="https://clickhouse.com"
infoText="Learn more"
size="md"
hasShadow={true}
topBadgeText="Featured"
topBadgeState="primary"  
/>
```

## Promotion card

CardPromotion is a promotional card component that displays a label with an icon, often used for notifications, alerts, or important messages.

## Example

## Props

| Prop        | Type       | Default value | Description                       |
| ----------- | ---------- | ------------- | --------------------------------- |
| label       | `string`   | `""`          | The text label for the card       |
| icon        | `IconName` | `""`          | Icon name to display in the card  |
| dismissible | `boolean`  | `false`       | Whether the card can be dismissed |

```tsx
import {CardPromotion} from '@clickhouse/click-ui'

<CardPromotion 
label="Basic Promotion"
icon="star"
/>

<CardPromotion 
label="Dismissible Promotion"
icon="star"
dismissible
/>
```

## Quick start

```tsx
import { CardPrimary, CardSecondary, CardHorizontal, CardPromotion } from '@clickhouse/click-ui'

function MyCards() {
return (
  <div>
    <CardPrimary 
      title="Primary card"
      description="This is a primary card."
      icon="building"
    />
    <CardSecondary 
      title="Secondary card"
      description="This is a secondary card."
      icon="building"
    />
    <CardHorizontal 
      title="Horizontal card"
      description="This is a horizontal card."
      iconUrl="https://example.com/icon.png"
    />
    <CardPromotion 
      label="Promotion"
      icon="star"
    />
  </div>
)
}
```

## Related components

- **Panel**: For simple containers without card styling.
- **Container**: For organizing multiple cards in layouts.
- **Badge**: Often used within cards for status indicators.
- **Icon**: Used in cards for visual elements.

## Common use cases

### Dashboard cards

```tsx
import { CardPrimary, Container } from '@clickhouse/click-ui'

function DashboardCards() {
return (
  <Container orientation='horizontal' gap='md' wrap='wrap'>
    <CardPrimary 
      icon='chart' 
      title='Total Revenue' 
      description='$125,000 this month' 
    />
    <CardPrimary 
      icon='users' 
      title='Active Users' 
      description='1,234 active users' 
    />
  </Container>
)
}
```

### Feature cards

```tsx
import { CardSecondary, Container } from '@clickhouse/click-ui'

function FeatureCards() {
return (
  <Container orientation='horizontal' gap='md' wrap='wrap'>
    <CardSecondary 
      icon='feature1' 
      title='Feature 1' 
      description='Description of feature 1' 
      infoUrl='https://clickhouse.com'
      infoText='Learn more'
    />
  </Container>
)
}
```

### Product cards

```tsx
import { CardHorizontal } from '@clickhouse/click-ui'

function ProductCards() {
return (
  <CardHorizontal 
    iconUrl='https://example.com/product.png'
    title='Product Name' 
    description='Product description.' 
    infoUrl='https://clickhouse.com' 
    infoText='View Details'
    topBadgeText='New'
    topBadgeState='success'
  />
)
}
```