nuxt-v-cards

A Nuxt 4 layer providing 17 pre-built VCard components for Veristone Capital's website ecosystem. These components implement the Veristone design system and cover every card pattern needed across landing pages, loan program pages, location pages, team directories, and conversion flows.

Installation

1. Add the layer to your Nuxt project

In your consuming app's nuxt.config.ts, extend the layer:

// nuxt.config.ts
export default defineNuxtConfig({
  extends: [
    '../modules/cards/nuxt-v-cards' // adjust path to your project structure
  ]
})

2. Install required dependencies

npm install @nuxt/ui nuxt

3. Configure your app.config.ts (optional)

Override default card settings in your app's app.config.ts:

// app.config.ts
export default defineAppConfig({
  v: {
    cards: {
      // your overrides here
    }
  }
})

4. Use components directly

All 17 VCard components are auto-imported with the VCard prefix. No manual registration required:

<template>
  <VCardHero
    title="Fast, Flexible Private Lending"
    image-url="/images/hero.jpg"
    layout="fullscreen"
  />
</template>

Quick Reference

When to Use Each Card

| Component | Use When | Typical Placement | |-----------|----------|-------------------| | VCardHero | You need a prominent banner with title, subtitle, and CTAs | Page tops, section headers | | VCardFeature | Presenting product features, benefits, or service highlights | Feature sections, benefit grids | | VCardContent | General-purpose content blocks with flexible layouts | Blog posts, about pages, service descriptions | | VCardCta | Driving conversion with clear call-to-action | Section bottoms, banner areas | | VCardLoan | Displaying loan programs with rates, terms, and details | Loan program pages, product listings | | VCardLoanStats | Showing metrics like LTV, rates, or financial data | Program pages, comparison sections | | VCardTestimonial | Customer quotes, reviews, or endorsements | Social proof sections | | VCardGoogleReview | Displaying Google reviews with ratings | Review sections, trust areas | | VCardEvent | Listing webinars, seminars, or community events | Events pages | | VCardForm | Container for application or contact forms | Application pages, contact sections | | VCardSalesPerson | Team member profiles with photos and contact info | Team pages, branch listings | | VCardRecentlyFunded | Showcasing closed deals or success stories | Portfolio pages, social proof | | VCardLocationsHero | Location-focused hero with regional details | Regional landing pages | | VCardLenderComparison | Side-by-side comparison of lending options | Comparison pages | | VCardSocialProof | Trust indicators, stats, certifications | Trust sections, footers | | VCardCallOut | Highlight boxes, alerts, or featured info | Feature callouts, sidebars | | VCardWrapper | Generic container for custom content | Flexible layouts |

Component API

VCardHero

Full-bleed hero sections with multiple layout options.

<VCardHero
  title="Fast, Flexible Private Lending"
  subtitle="Get funded in as little as 48 hours"
  eyebrow="VERISTONE CAPITAL"
  image-url="/images/hero.jpg"
  layout="fullscreen"
  :primary-cta="{ label: 'Get Pre-Qualified', to: '/apply' }"
  :secondary-cta="{ label: 'View Programs', to: '/loans' }"
/>

Props:

• title (string, required) - Main headline
• subtitle (string) - Supporting text
• eyebrow (string) - Small uppercase label
• imageUrl (string, required) - Background image URL
• layout ('fullscreen' | 'split' | 'portrait') - Layout variant
• splitSide ('left-image' | 'right-image') - Image position for split layout
• height ('full' | 'tall' | 'medium') - Height for fullscreen layout
• primaryCta ({ label: string, to: string }) - Primary CTA button
• secondaryCta ({ label: string, to: string }) - Secondary CTA button

VCardFeature

Product features, program highlights, or service benefits.

<VCardFeature
  title="Fast Closings"
  description="Close in as little as 48 hours with streamlined underwriting."
  icon="i-lucide-zap"
  variant="icon"
/>

Props:

• title (string, required) - Feature title
• description (string) - Supporting text
• eyebrow (string) - Small uppercase label
• icon (string) - Iconify icon name
• imageUrl (string) - Feature image
• variant ('default' | 'icon' | 'stat' | 'minimal' | 'detailed') - Visual style
• statValue (string) - Numeric value for stat variant
• statLabel (string) - Label for stat variant
• cta ({ label: string, to: string }) - Call-to-action

VCardContent

General-purpose content card with flexible layout options.

<VCardContent
  title="Flexible Financing Solutions"
  description="Tailored loan programs designed for your specific needs."
  eyebrow="WHY VERISTONE"
  image-url="/images/content.jpg"
  image-position="top"
  image-aspect="3:2"
  :cta="{ label: 'Learn More', to: '/about' }"
/>

Props:

• title (string) - Card headline
• description (string) - Body text
• eyebrow (string) - Small uppercase label
• imageUrl (string) - Image URL
• imageAlt (string) - Image alt text
• imagePosition ('top' | 'left' | 'right' | 'background') - Image placement
• imageAspect ('3:2' | '9:16' | '1:1') - Image aspect ratio
• cta ({ label: string, to: string }) - Call-to-action
• variant ('default' | 'dark' | 'outlined') - Visual style

VCardLoan

Loan program card with structured data display.

<VCardLoan
  program-name="Fix & Flip"
  description="Short-term financing for renovation projects."
  rate-range="12-15%"
  ltv-max="90%"
  term-range="12-18 months"
  min-loan="$100K"
  max-loan="$5M"
  :property-types="['Single Family', 'Multi-Family', 'Condo']"
  :highlights="['Cash-out options', 'No prepayment penalty']"
  :cta="{ label: 'Apply Now', to: '/apply' }"
/>

Props:

• programName (string, required) - Loan program name
• description (string) - Short description
• rateRange (string) - Interest rate range (e.g., "12-15%")
• ltvMax (string) - Maximum LTV (e.g., "90%")
• termRange (string) - Loan term (e.g., "12-18 months")
• minLoan (string) - Minimum loan amount
• maxLoan (string) - Maximum loan amount
• propertyTypes (string[]) - Accepted property types
• highlights (string[]) - Key features/benefits
• cta ({ label: string, to: string }) - Call-to-action
• featured (boolean) - Whether to show as featured/dark variant

VCardLoanStats

Display financial metrics in a grid or row layout.

<VCardLoanStats
  :stats="[
    { label: 'Max LTV', value: '90%' },
    { label: 'Min Credit', value: '680', description: 'FICO score' },
    { label: 'Funding Time', value: '48', suffix: 'hrs' },
    { label: 'Rates From', value: '12%', suffix: 'APR' }
  ]"
  layout="row"
/>

Props:

• stats (array, required) - Array of stat objects with label, value, suffix, description
• layout ('row' | 'grid') - Display layout
• variant ('default' | 'dark') - Visual style

VCardTestimonial

Customer quotes and endorsements.

<VCardTestimonial
  quote="Veristone closed my loan in 5 days. Incredible service!"
  author="John Smith"
  title="Real Estate Investor"
  company="Smith Properties"
/>

Props:

• quote (string, required) - Testimonial text
• author (string, required) - Person's name
• title (string) - Person's title/role
• company (string) - Company name
• avatarUrl (string) - Photo URL
• variant ('default' | 'card' | 'split' | 'minimal') - Visual style

VCardGoogleReview

Display Google reviews with ratings.

<VCardGoogleReview
  review-text="Excellent lender! Very professional and fast."
  reviewer-name="Jane Doe"
  :rating="5"
  relative-date="2 weeks ago"
  profile-url="https://google.com/maps/..."
/>

Props:

• reviewText (string, required) - Review content
• reviewerName (string, required) - Reviewer name
• reviewerAvatar (string) - Avatar image URL
• rating (1-5, required) - Star rating
• date (string) - Review date
• relativeDate (string) - Relative time (e.g., "2 weeks ago")
• reviewUrl (string) - Link to full review
• profileUrl (string) - Link to reviewer profile
• imageUrl (string) - Background image for featured variant
• variant ('default' | 'featured' | 'minimal') - Visual style

VCardCallOut

Highlight boxes, alerts, or featured information.

<VCardCallOut
  title="Pre-Qualify in Minutes"
  description="Get a preliminary decision without affecting your credit."
  icon="i-lucide-clock"
  variant="glass"
  :cta="{ label: 'Start Application', to: '/apply' }"
/>

Props:

• title (string, required) - Callout headline
• description (string) - Supporting text
• icon (string) - Iconify icon name
• variant ('default' | 'accent' | 'muted' | 'glass') - Visual style
• imageUrl (string) - Background image
• imageAlt (string) - Image alt text
• cta ({ label: string, to: string }) - Call-to-action

VCardSalesPerson

Team member profile card.

<VCardSalesPerson
  name="Mike Johnson"
  title="Senior Loan Officer"
  bio="15+ years in private lending..."
  email="[email protected]"
  phone="(555) 123-4567"
  avatar-url="/team/mike.jpg"
  nmls="12345"
/>

Props:

• name (string, required) - Person's name
• title (string) - Job title
• bio (string) - Short biography
• email (string) - Email address
• phone (string) - Phone number
• avatarUrl (string) - Photo URL
• nmls (string) - NMLS license number
• variant ('default' | 'detailed' | 'compact') - Visual style

VCardForm

Container for application or contact forms.

<VCardForm
  title="Get Funded Today"
  description="Complete the form below and we'll be in touch."
  variant="card"
/>

Props:

• title (string, required) - Form headline
• description (string) - Supporting text
• variant ('default' | 'card' | 'landscape') - Visual style

VCardEvent

Event listing card.

<VCardEvent
  title="Investor Webinar"
  description="Learn about our fix & flip financing options."
  date="March 15, 2026"
  time="2:00 PM EST"
  location="Online"
  image-url="/events/webinar.jpg"
  :cta="{ label: 'Register', to: '/events/webinar' }"
/>

Props:

• title (string, required) - Event name
• description (string) - Event description
• date (string) - Event date
• time (string) - Event time
• location (string) - Venue or "Online"
• imageUrl (string) - Event image
• cta ({ label: string, to: string }) - Registration link

VCardSocialProof

Trust indicators, stats, certifications.

<VCardSocialProof
  :stats="[
    { value: '$2.1B+', label: 'Total Funded' },
    { value: '1,800+', label: 'Loans Closed' },
    { value: '48 hrs', label: 'Avg Close Time' }
  ]"
  variant="stats"
/>

Props:

• logos (string[]) - Client/partner logo URLs
• stats (array) - Statistics array
• badges (array) - Certification/trust badge data
• variant ('logos' | 'stats' | 'badges') - Display type

VCardRecentlyFunded

Showcase of funded deals or success stories.

<VCardRecentlyFunded
  property="The Marina Resort"
  location="San Diego, CA"
  funded-amount="$2.5M"
  loan-type="Bridge Loan"
  image-url="/deals/marina.jpg"
/>

Props:

• property (string, required) - Property name
• location (string, required) - Property location
• fundedAmount (string) - Loan amount funded
• loanType (string) - Type of loan
• imageUrl (string) - Property image

VCardLocationsHero

Regional location showcase with location chips.

<VCardLocationsHero
  title="Arizona Lending"
  subtitle="Serving investors across the Grand Canyon State"
  region="ARIZONA"
  :locations="['Phoenix', 'Tucson', 'Scottsdale', 'Sedona']"
  image-url="/locations/arizona.jpg"
  :cta="{ label: 'Find Your Branch', to: '/locations/arizona' }"
/>

Props:

• title (string, required) - Region title
• subtitle (string) - Subtitle text
• region (string, required) - Region label
• locations (string[], required) - Array of city/area names
• imageUrl (string, required) - Hero image
• cta ({ label: string, to: string }) - Call-to-action

VCardLenderComparison

Side-by-side comparison table.

<VCardLenderComparison
  :lenders="[
    { name: 'Veristone', rate: '12%', ltv: '90%', terms: 'Flexible', highlights: ['48hr close', 'No prepayment'] },
    { name: 'Competitor A', rate: '15%', ltv: '80%', terms: 'Standard', highlights: ['21-day close'] }
  ]"
  highlighted="Veristone"
/>

Props:

• lenders (array, required) - Array of lender comparison data
• highlighted (string) - Name of lender to highlight

VCardWrapper

Generic container for custom slotted content.

<VCardWrapper variant="muted" padding="lg">
  <h3>Custom Title</h3>
  <p>Your custom content here...</p>
</VCardWrapper>

Props:

• variant ('muted' | 'dark' | 'outline' | 'glass') - Visual style
• imageUrl (string) - Background image
• imageAlt (string) - Image alt text
• padding ('sm' | 'md' | 'lg') - Padding level

Page Assembly Patterns

Homepage

┌─────────────────────────────────────┐
│ VCardHero (layout="fullscreen")    │ ← Full-bleed hero
├─────────────────────────────────────┤
│ VCardFeature (variant="stat") × 3-4 │ ← Key metrics/features
├─────────────────────────────────────┤
│ VCardSocialProof (variant="stats")  │ ← Trust indicators
├─────────────────────────────────────┤
│ VCardLoan (featured=true) × 3       │ ← Featured programs
├─────────────────────────────────────┤
│ VCardTestimonial (variant="split")  │ ← Social proof
├─────────────────────────────────────┤
│ VCardRecentlyFunded × 4 (grid)      │ ← Deal showcase
├─────────────────────────────────────┤
│ VCardCta (variant="banner")         │ ← Final CTA
└─────────────────────────────────────┘

Loan Program Page

┌─────────────────────────────────────┐
│ VCardHero (layout="split")          │ ← Program intro
├─────────────────────────────────────┤
│ VCardLoanStats (layout="row")      │ ← Key metrics
├─────────────────────────────────────┤
│ VCardLoan × 3-5                    │ ← Program options
├─────────────────────────────────────┤
│ VCardLenderComparison               │ ← Competitive comparison
├─────────────────────────────────────┤
│ VCardCallOut (variant="accent")     │ ← Key benefit highlight
├─────────────────────────────────────┤
│ VCardTestimonial (variant="card")×3 │ ← Client stories
├─────────────────────────────────────┤
│ VCardCta (variant="banner")         │ ← Apply CTA
└─────────────────────────────────────┘

Location/Branch Page

┌─────────────────────────────────────┐
│ VCardLocationsHero                  │ ← Location hero
├─────────────────────────────────────┤
│ VCardLoanStats                      │ ← Regional stats
├─────────────────────────────────────┤
│ VCardRecentlyFunded × 4 (grid)     │ ← Local deals
├─────────────────────────────────────┤
│ VCardFeature (variant="icon") × 3  │ ← Branch benefits
├─────────────────────────────────────┤
│ VCardGoogleReview × 3               │ ← Local reviews
├─────────────────────────────────────┤
│ VCardSalesPerson × 2-4             │ ← Local team
├─────────────────────────────────────┤
│ VCardForm (variant="landscape")      │ ← Contact/deposit form
└─────────────────────────────────────┘

Team / About Page

┌─────────────────────────────────────┐
│ VCardHero (layout="portrait")      │ ← Team/About hero
├─────────────────────────────────────┤
│ VCardContent                       │ ← About narrative
├─────────────────────────────────────┤
│ VCardSalesPerson × 6+ (grid)       │ ← Team members
├─────────────────────────────────────┤
│ VCardSocialProof (variant="badges") │ ← Certifications
├─────────────────────────────────────┤
│ VCardTestimonial (variant="minimal")│ ← Client quotes
├─────────────────────────────────────┤
│ VCardCta (variant="banner")         │ ⟨ Contact CTA
└─────────────────────────────────────┘

Contact / Apply Page

┌─────────────────────────────────────┐
│ VCardHero (layout="split", height="medium") │
├─────────────────────────────────────┤
│ VCardForm (variant="landscape")     │ ← Application form
├─────────────────────────────────────┤
│ VCardSocialProof (variant="logos") │ ← Trust logos
├─────────────────────────────────────┤
│ VCardCallOut (variant="muted")      │ ← What to expect
├─────────────────────────────────────┤
│ VCardSalesPerson × 2                │ ← Assigned officer
└─────────────────────────────────────┘

Design System Reference

Color Palette

Brand Green (vgreen-*)

The primary brand color used for CTAs, accents, and positive indicators.

| Token | Value | Usage | |-------|-------|-------| | vgreen-50 | #F0F7E6 | Subtle backgrounds | | vgreen-100 | #DFF0C8 | Light backgrounds | | vgreen-300 | #9DD162 | Hover states | | vgreen-500 | #68A519 | Primary brand green | | vgreen-700 | #527F18 | Dark accents | | vgreen-900 | #2D4216 | Text on light |

Stone Neutrals (vn-*)

Warm neutral palette for text, backgrounds, and borders.

| Token | Value | Usage | |-------|-------|-------| | vn-50 | #FAFAFA | Page backgrounds | | vn-100 | #F5F5F5 | Card backgrounds | | vn-200 | #E8E8E8 | Borders, dividers | | vn-400 | #A3A3A3 | Secondary text | | vn-500 | #737373 | Placeholders | | vn-700 | #404040 | Body text | | vn-900 | #171717 | Headings | | vn-950 | #0A0A0A | Dark backgrounds |

Accent Colors

| Token | Value | Usage | |-------|-------|-------| | vlime | #A3E635 | Vivid accent on dark | | vaccent | #FFAC00 | Gold for stars, highlights |

Typography Classes

| Class | Size Range | Usage | |-------|-----------|-------| | vc-type-display | 3.5rem - 5.5rem | Hero headlines | | vc-type-stat | 2.5rem - 4rem | Large stat numbers | | vc-type-h1 | 2.5rem - 4rem | Section headings | | vc-type-h2 | 2rem - 3rem | Sub-section headings | | vc-type-h3 | 1.5rem - 1.75rem | Card titles | | vc-type-body-lg | 1.125rem - 1.25rem | Lead paragraphs | | vc-type-body | 15px | Default body text | | vc-eyebrow | 12px uppercase | Section eyebrows |

Button Classes

<!-- Primary (dark) -->
<NuxtLink to="/apply" class="vc-btn-primary">Apply Now</NuxtLink>

<!-- Primary Green (conversion) -->
<NuxtLink to="/apply" class="vc-btn-primary-green">Get Started</NuxtLink>

<!-- Secondary (outlined) -->
<NuxtLink to="/programs" class="vc-btn-secondary">View Programs</NuxtLink>

<!-- Ghost (over images) -->
<NuxtLink to="/learn" class="vc-btn-ghost">Learn More</NuxtLink>

<!-- Text (inline) -->
<NuxtLink to="/details" class="vc-btn-text">See Details →</NuxtLink>

Card Base Classes

| Class | Appearance | |-------|-----------| | vc-card | White background, rounded corners | | vc-card-elevated | White, elevated shadow | | vc-card-dark | Dark background (vn-950) | | vc-card-muted | Light background (vn-50) |

Utility Classes

Hover Effects:

• vc-card-lift - Card lifts on hover
• vc-img-zoom - Image zooms on hover

Overlays:

• vc-overlay-hero - Dark gradient for heroes
• vc-overlay-bottom - Bottom gradient for portrait cards
• vc-overlay-full - Full coverage dark overlay

Scroll Animations:

• vc-reveal - Ready for scroll animation
• vc-reveal-visible - Revealed state (added by composable)

Composables

useVCardsScrollReveal()

Scroll-triggered reveal animation.

const { revealRef } = useVCardsScrollReveal({
  threshold: 0.15,
  rootMargin: '0px 0px -40px 0px',
  once: true
})

useVCards()

Access merged VCard configuration.

const config = useVCards()
// Returns: { colors, fonts, radius, spacing, brand }

File Structure

nuxt-v-cards/
├── nuxt.config.ts           # Layer configuration
├── package.json
├── app.config.ts            # Default app configuration
├── app.vue                 # Layer root app
├── assets/
│   └── css/main.css       # Design system styles
├── components/            # 17 VCard components
│   ├── VCardHero.vue
│   ├── VCardFeature.vue
│   ├── VCardContent.vue
│   ├── VCardCta.vue
│   ├── VCardLoan.vue
│   ├── VCardLoanStats.vue
│   ├── VCardTestimonial.vue
│   ├── VCardGoogleReview.vue
│   ├── VCardEvent.vue
│   ├── VCardForm.vue
│   ├── VCardSalesPerson.vue
│   ├── VCardRecentlyFunded.vue
│   ├── VCardLocationsHero.vue
│   ├── VCardLenderComparison.vue
│   ├── VCardSocialProof.vue
│   ├── VCardCallOut.vue
│   └── VCardWrapper.vue
├── composables/
│   ├── useVCardsScrollReveal.ts
│   └── useVCards.ts
├── types/
│   └── v-cards.ts
├── .playground/            # Development environment
└── README.md               # This file