CardGroup

Group cards together in a grid.

Usage

Here’s an example of using the CardGroup component:

::card-group
  ::card
  ---
  title: Components
  icon: i-heroicons-cube
  to: https://nuxt.com/docs/api/components/client-only
  target: _blank
  ---
  Explore Nuxt built-in components for pages, layouts, head, and more.
  ::
  ::card
  ---
  title: Composables
  icon: i-heroicons-arrows-right-left
  to: https://nuxt.com/docs/api/composables/use-app-config
  target: _blank
  ---
  Discover Nuxt composable functions for data-fetching, head management and more.
  ::
  ::card
  ---
  title: Utils
  icon: i-heroicons-scissors
  to: https://nuxt.com/docs/api/utils/dollarfetch
  target: _blank
  ---
  Learn about Nuxt utility functions for navigation, error handling and more.
  ::
  ::card
  ---
  title: Commands
  icon: i-heroicons-command-line
  to: https://nuxt.com/docs/api/commands/add
  target: _blank
  ---
  List of Nuxt CLI commands to init, analyze, build, and preview your application.
  ::
::

Config

{
  wrapper: 'grid sm:grid-cols-2 gap-4'
}

The component supports the following configuration options:

• wrapper: CSS classes for the grid wrapper element that contains the cards. Default is grid sm:grid-cols-2 gap-4 which creates a 2-column grid on small screens and above with 1rem gaps.