Nuxt UI Pro v1.0 is out with dashboard components! Discount ends 16 hours ago.

PageColumns

A customizable column component to display cards in your pages.

Usage

Use some PageCard or anything really in the default slot to display them as columns.

Nostrud reprehenderit magna deserunt dolor.
Evan you

Evan you

Creator of Vue.js and Vite

Irure irure dolore Lorem dolor anim velit id fugiat minim cupidatat dolore nulla Lorem aliquip cillum.
Guillermo Rauch

Guillermo Rauch

Co-founder and CEO of Vercel

Magna labore amet velit eiusmod velit dolor cillum sunt est tempor ea commodo fugiat amet tempor.
Addy Osmani

Addy Osmani

Chief Engineer of Chrome

Culpa amet do sit officia non magna cillum ullamco dolore qui sunt occaecat.
Sarah Drasner

Sarah Drasner

Director of Engineering, Google

Ex veniam eu incididunt.
Dominik Angerer

Dominik Angerer

Co-founder of Storyblok

Nostrud id Lorem laborum ut eiusmod voluptate aliquip non esse sint occaecat.
Savas Vedova

Savas Vedova

Sernior Frontend Engineer at GitLab

<script setup lang="ts">
const testimonials = [{
  quote: 'Nostrud reprehenderit magna deserunt dolor.',
  author: {
    name: 'Evan you',
    job: 'Creator of Vue.js and Vite',
    src: 'https://ipx.nuxt.com/f_auto,s_40x40/gh_avatar/yyx990803'
  }
}, {
  quote: 'Irure irure dolore Lorem dolor anim velit id fugiat minim cupidatat dolore nulla Lorem aliquip cillum.',
  author: {
    name: 'Guillermo Rauch',
    job: 'Co-founder and CEO of Vercel',
    src: 'https://ipx.nuxt.com/f_auto,s_40x40/gh_avatar/rauchg'
  }
}, {
  quote: 'Magna labore amet velit eiusmod velit dolor cillum sunt est tempor ea commodo fugiat amet tempor.',
  author: {
    name: 'Addy Osmani',
    job: 'Chief Engineer of Chrome',
    src: 'https://ipx.nuxt.com/f_auto,s_40x40/gh_avatar/addyosmani'
  }
}, {
  quote: 'Culpa amet do sit officia non magna cillum ullamco dolore qui sunt occaecat.',
  author: {
    name: 'Sarah Drasner',
    job: 'Director of Engineering, Google',
    src: 'https://ipx.nuxt.com/f_auto,s_40x40/gh_avatar/sdras'
  }
}, {
  quote: 'Ex veniam eu incididunt.',
  author: {
    name: 'Dominik Angerer',
    job: 'Co-founder of Storyblok',
    src: 'https://ipx.nuxt.com/f_auto,s_40x40/gh_avatar/DominikAngerer'
  }
}, {
  quote: 'Nostrud id Lorem laborum ut eiusmod voluptate aliquip non esse sint occaecat.',
  author: {
    name: 'Savas Vedova',
    job: 'Sernior Frontend Engineer at GitLab',
    src: 'https://ipx.nuxt.com/f_auto,s_40x40/gh_avatar/svedova'
  }
}]
</script>

<template>
  <UPageColumns>
    <UPageCard v-for="(testimonial, index) in testimonials" :key="index">
      <q class="italic text-gray-500 dark:text-gray-400">
        {{ testimonial.quote }}
      </q>

      <div class="flex gap-x-3 items-center mt-3">
        <UAvatar :src="testimonial.author.src" :alt="testimonial.author.name" size="sm" />

        <div class="min-w-0 text-sm">
          <p class="font-semibold">
            {{ testimonial.author.name }}
          </p>
          <p class="truncate">
            {{ testimonial.author.job }}
          </p>
        </div>
      </div>
    </UPageCard>
  </UPageColumns>
</template>

Slots

default
{}

Props

ui
{}
{}

Config

{
  wrapper: 'column-1 md:columns-2 lg:columns-3 gap-8 space-y-8'
}