estel_docs/content/docs/1.简单文档/5.components/card-group.md

title, icon, badges

title	icon	badges
Card Group	lucide:layout-grid	value to target Nuxt UI Pro https://ui.nuxt.com/pro/prose/card-group _blank value icon to target Source lucide:code https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/CardGroup.vue _blank

Usage

::stack ::div{class="p-4"} ::card-group ::card --- title: Components icon: lucide:box 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: lucide:arrow-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: lucide: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: lucide:square-terminal to: https://nuxt.com/docs/api/commands/add target: _blank --- List of Nuxt CLI commands to init, analyze, build, and preview your application. :: :: ::

::card-group
  ::card
  ---
  title: Components
  icon: lucide:box
  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: lucide:arrow-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: lucide: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: lucide:square-terminal
  to: https://nuxt.com/docs/api/commands/add
  target: _blank
  ---
  List of Nuxt CLI commands to init, analyze, build, and preview your application.
  ::
::

::

Cols

::stack ::div{class="p-4"} ::card-group{:cols="3"} ::card --- title: Components icon: lucide:box 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: lucide:arrow-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: lucide:scissors to: https://nuxt.com/docs/api/utils/dollarfetch target: _blank --- Learn about Nuxt utility functions for navigation, error handling and more. :: :: ::

::card-group{:cols="3"}
  ::card
  ---
  title: Components
  icon: lucide:box
  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: lucide:arrow-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: lucide:scissors
  to: https://nuxt.com/docs/api/utils/dollarfetch
  target: _blank
  ---
  Learn about Nuxt utility functions for navigation, error handling and more.
  ::
::

::

Props

::field-group :field{name="cols" type="1 | 2 | 3 | 4 | 5 | 6" default-value="2"}[Number of columns (only for desktop)] ::