feat: add span prop to NqCard component and update grid layout for mixed spans

Author: onmax

docs/vitepress-theme/components/card.md

@@ -4,14 +4,15 @@ A simple card that can turn any boring content into something that looks intenti
 
 ## Props
 
-| Name          | Type     | Default     | Description                                          |
-| ------------- | -------- | ----------- | ---------------------------------------------------- |
-| `href`        | `string` | `undefined` | Where your card wants to teleport users to           |
-| `bg-color`    | `string` | `undefined` | The mood lighting for your card                      |
-| `icon`        | `string` | `undefined` | The tiny picture that makes your card feel important |
-| `title`       | `string` | `undefined` | The card's title                                     |
-| `description` | `string` | `undefined` | The card's description                               |
-| `label`       | `string` | `undefined` | Optional label displayed above the title             |
+| Name          | Type                          | Default     | Description                                          |
+| ------------- | ----------------------------- | ----------- | ---------------------------------------------------- |
+| `href`        | `string`                      | `undefined` | Where your card wants to teleport users to           |
+| `bg-color`    | `string`                      | `undefined` | The mood lighting for your card                      |
+| `icon`        | `string`                      | `undefined` | The tiny picture that makes your card feel important |
+| `title`       | `string`                      | `undefined` | The card's title                                     |
+| `description` | `string`                      | `undefined` | The card's description                               |
+| `label`       | `string`                      | `undefined` | Optional label displayed above the title             |
+| `span`        | `'full' \| 'half' \| 'default'` | `undefined` | Controls how many columns the card spans in a grid   |
 
 The component also supports using slots for custom content instead of props.
 

docs/vitepress-theme/components/grid.md

@@ -131,3 +131,52 @@ cards:
 </NqGrid>
 
 </ComponentPreview>
+
+## Grid with Mixed Spans
+
+<ComponentPreview>
+
+<NqGrid>
+
+<NqCard
+  span="full"
+  bg-color="blue"
+  icon="i-nimiq:icons-lg-browsermesh"
+  title="Full Width Feature"
+  description="I'm a special card that spans the entire width of the grid. Perfect for featured content or important announcements!"
+/>
+
+<NqCard
+  span="half"
+  bg-color="green"
+  icon="i-nimiq:tools"
+  title="Half Width Card"
+  description="I take up half the grid width, making me stand out more than standard cards."
+/>
+
+<NqCard
+  span="half"
+  bg-color="orange"
+  icon="i-nimiq:fire"
+  title="Another Half"
+  description="Together with my friend, we make a perfect pair across the row."
+/>
+
+<NqCard
+  title="Regular Card"
+  description="I'm a standard card, happy with my default width."
+/>
+
+<NqCard
+  title="Another Regular"
+  description="Me too! Default width is cozy."
+/>
+
+<NqCard
+  title="Last But Not Least"
+  description="Completing this mixed layout showcase."
+/>
+
+</NqGrid>
+
+</ComponentPreview>

packages/nimiq-vitepress-theme/src/components/NqCard.vue

@@ -3,13 +3,14 @@ import { computed } from 'vue';
 
 export type CardColor = 'green' | 'blue' | 'red' | 'gold' | 'orange'
 
-const { bgColor, icon, href } = defineProps<{
+const { bgColor, icon, href, span } = defineProps<{
   icon?: string
   bgColor?: CardColor
   href?: string
   title?: string
   description?: string
   label?: string
+  span?: 'full' | 'half' | 'default'
 }>()
 
 const hasLink = computed(() => !!href)
@@ -18,7 +19,7 @@ const colors: Partial<Record<CardColor, string>> = { blue: '#0E65C9', green: '#1
 </script>
 
 <template>
-  <component :is="hasLink ? 'a' : 'div'" :href group :data-inverted="bgColor ? '' : undefined" class="vp-raw nq-raw"
+  <component :is="hasLink ? 'a' : 'div'" :href group :data-span="span" :data-inverted="bgColor ? '' : undefined" class="vp-raw nq-raw"
     f-mt-md relative :style="`background-image: ${bgColor ? `var(--nq-${bgColor}-gradient)` : ''}`" :data-card="bgColor ? 'colored' : 'default'"
     :target="hasLink && href?.startsWith('http') ? '_blank' : undefined"
     :class="{ 'nq-hoverable': hasLink, 'nq-card': !hasLink, 'children:max-w-[max(50%,240px)]': bgColor, 'bg-neutral-300': !bgColor }">

packages/nimiq-vitepress-theme/src/components/NqGrid.vue

@@ -32,6 +32,14 @@ const {cards} = defineProps<{
   --uno: 'col-span-2';
 }
 
+:global(.nq-grid [data-card][data-span="full"]) {
+  --uno: 'col-span-6';
+}
+
+:global(.nq-grid [data-card][data-span="half"]) {
+  --uno: 'col-span-3';
+}
+
 :global(.nq-grid [data-card]) {
   --uno: 'mt-0';
 }