Feature Cards
Grid
Responsive CSS grid wrapper for card collections with configurable columns and gap.
Feature Cards
XCardFeature and XCardGrid are designed to work together. Use XCardGrid as the outer container to control column count and spacing, then place XCardFeature (or any other card) inside the default slot.
Components
<XCardGrid />
A lightweight CSS grid wrapper. Place any card components inside its default slot. Column breakpoints follow a mobile-first pattern: always 1 column on mobile, then expanding at md and lg.
<XCardGrid :columns="3" gap="md">
<XCardFeature
v-for="item in features"
:key="item.title"
:title="item.title"
:description="item.description"
:icon="item.icon"
/>
</XCardGrid>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
columns | 1 | 2 | 3 | 4 | 3 | Maximum number of columns at the largest breakpoint |
gap | 'sm' | 'md' | 'lg' | 'md' | Gap between grid items |
Gap reference (4px grid):
| Value | Mobile | Desktop |
|---|---|---|
sm | 16px | 16px |
md | 24px | 32px |
lg | 32px | 48px |
Column breakpoint reference:
columns | Mobile | md | lg |
|---|---|---|---|
1 | 1 col | 1 col | 1 col |
2 | 1 col | 2 col | 2 col |
3 | 1 col | 2 col | 3 col |
4 | 1 col | 2 col | 4 col |
Slots
| Slot | Description |
|---|---|
default | Card components to render in the grid |
AI Context
category: FeatureCards
package: "@xenterprises/nuxt-x-cards"
components:
- XCardGrid
use-when: >
Use XCardGrid as the outer container for any XCard component collection.
It is a generic slot-based wrapper that works with any XCard component,
not just XCardFeature.
notes:
- Always 1 column on mobile, expanding at md and lg breakpoints