---
title: "CardGroup"
description: "Organize multiple cards in responsive grid layouts for better content presentation."
canonical_url: "https://ui.nuxt.com/docs/typography/card-group"
last_updated: "2026-05-07"
---
# CardGroup

> Organize multiple cards in responsive grid layouts for better content presentation.

## Usage

Wrap your `card` components with the `card-group` component to group them together in a grid layout.

```vue
<template>
  <__flatten>
  <p>
  <strong>
  Dashboard</strong></p>
  <p>
  A dashboard with multi-column layout.</p>
  <p>
  <strong>
  SaaS</strong></p>
  <p>
  A template with landing, pricing, docs and blog.</p>
  <p>
  <strong>
  Docs</strong></p>
  <p>
  A documentation with 
  <code>
  @nuxt/content</code>
  .</p>
  <p>
  <strong>
  Landing</strong></p>
  <p>
  A landing page you can use as starting point.</p></__flatten>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=::card-group
  
  ::card
  ---
  title: Dashboard
  icon: i-simple-icons-github
  to: https://github.com/nuxt-ui-templates/dashboard
  target: _blank
  ---
  A dashboard with multi-column layout.
  ::
  
  ::card
  ---
  title: SaaS
  icon: i-simple-icons-github
  to: https://github.com/nuxt-ui-templates/saas
  target: _blank
  ---
  A template with landing, pricing, docs and blog.
  ::
  
  ::card
  ---
  title: Docs
  icon: i-simple-icons-github
  to: https://github.com/nuxt-ui-templates/docs
  target: _blank
  ---
  A documentation with `@nuxt/content`.
  ::
  
  ::card
  ---
  title: Landing
  icon: i-simple-icons-github
  to: https://github.com/nuxt-ui-templates/landing
  target: _blank
  ---
  A landing page you can use as starting point.
  ::
  
  ::
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  ::</span>
  <span class=swJcz>
  card-group
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sMK4o>
  ::</span>
  <span class=swJcz>
  card
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  ---
  </span></span>
  <span class=line>
  <span class=swJcz>
  title</span>
  <span class=sMK4o>
  :</span>
  <span class=sfazB>
   Dashboard
  </span></span>
  <span class=line>
  <span class=swJcz>
  icon</span>
  <span class=sMK4o>
  :</span>
  <span class=sfazB>
   i-simple-icons-github
  </span></span>
  <span class=line>
  <span class=swJcz>
  to</span>
  <span class=sMK4o>
  :</span>
  <span class=sfazB>
   https://github.com/nuxt-ui-templates/dashboard
  </span></span>
  <span class=line>
  <span class=swJcz>
  target</span>
  <span class=sMK4o>
  :</span>
  <span class=sfazB>
   _blank
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  ---
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  A dashboard with multi-column layout.
  </span></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sMK4o>
  ::</span>
  <span class=swJcz>
  card
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  ---
  </span></span>
  <span class=line>
  <span class=swJcz>
  title</span>
  <span class=sMK4o>
  :</span>
  <span class=sfazB>
   SaaS
  </span></span>
  <span class=line>
  <span class=swJcz>
  icon</span>
  <span class=sMK4o>
  :</span>
  <span class=sfazB>
   i-simple-icons-github
  </span></span>
  <span class=line>
  <span class=swJcz>
  to</span>
  <span class=sMK4o>
  :</span>
  <span class=sfazB>
   https://github.com/nuxt-ui-templates/saas
  </span></span>
  <span class=line>
  <span class=swJcz>
  target</span>
  <span class=sMK4o>
  :</span>
  <span class=sfazB>
   _blank
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  ---
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  A template with landing, pricing, docs and blog.
  </span></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sMK4o>
  ::</span>
  <span class=swJcz>
  card
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  ---
  </span></span>
  <span class=line>
  <span class=swJcz>
  title</span>
  <span class=sMK4o>
  :</span>
  <span class=sfazB>
   Docs
  </span></span>
  <span class=line>
  <span class=swJcz>
  icon</span>
  <span class=sMK4o>
  :</span>
  <span class=sfazB>
   i-simple-icons-github
  </span></span>
  <span class=line>
  <span class=swJcz>
  to</span>
  <span class=sMK4o>
  :</span>
  <span class=sfazB>
   https://github.com/nuxt-ui-templates/docs
  </span></span>
  <span class=line>
  <span class=swJcz>
  target</span>
  <span class=sMK4o>
  :</span>
  <span class=sfazB>
   _blank
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  ---
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  A documentation with </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  @nuxt/content</span>
  <span class=sMK4o>
  `</span>
  <span class=sTEyZ>
  .
  </span></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sMK4o>
  ::</span>
  <span class=swJcz>
  card
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  ---
  </span></span>
  <span class=line>
  <span class=swJcz>
  title</span>
  <span class=sMK4o>
  :</span>
  <span class=sfazB>
   Landing
  </span></span>
  <span class=line>
  <span class=swJcz>
  icon</span>
  <span class=sMK4o>
  :</span>
  <span class=sfazB>
   i-simple-icons-github
  </span></span>
  <span class=line>
  <span class=swJcz>
  to</span>
  <span class=sMK4o>
  :</span>
  <span class=sfazB>
   https://github.com/nuxt-ui-templates/landing
  </span></span>
  <span class=line>
  <span class=swJcz>
  target</span>
  <span class=sMK4o>
  :</span>
  <span class=sfazB>
   _blank
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  ---
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  A landing page you can use as starting point.
  </span></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span></code></pre></template>
</template>
```

## API

### Slots

```ts
/**
 * Slots for the CardGroup component
 */
interface CardGroupSlots {
  default(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    prose: {
      cardGroup: {
        base: 'grid grid-cols-1 sm:grid-cols-2 gap-5 my-5 *:my-0'
      }
    }
  }
})
```

## Changelog

See commit history for [component](https://github.com/nuxt/ui/commits/v4/src/runtime/components/prose/CardGroup.vue) and [theme](https://github.com/nuxt/ui/commits/v4/src/theme/prose/card-group.ts).


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.