Card

Композиционные примитивы карточки, вдохновлённые shadcn/ui. Комбинируйте Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent и CardFooter.

Login to your account

Enter your email below to login to your account

vue

<script setup lang="ts">
import {
  VxCard, VxCardHeader, VxCardTitle, VxCardDescription,
  VxCardAction, VxCardContent, VxCardFooter,
  VxButton, VxInput
} from 'veloxui'
</script>

<template>
  <VxCard>
    <VxCardHeader>
      <VxCardTitle>Login to your account</VxCardTitle>
      <VxCardDescription>
        Enter your email below to login to your account
      </VxCardDescription>
      <VxCardAction>
        <VxButton variant="link">Sign Up</VxButton>
      </VxCardAction>
    </VxCardHeader>
    <VxCardContent>
      <form @submit.prevent>
        <div style="display: flex; flex-direction: column; gap: 16px;">
          <div style="display: flex; flex-direction: column; gap: 6px;">
            <label>Email</label>
            <VxInput type="email" placeholder="m@example.com" />
          </div>
          <div style="display: flex; flex-direction: column; gap: 6px;">
            <div style="display: flex; align-items: center;">
              <label>Password</label>
              <a href="#" style="margin-left: auto;">Forgot your password?</a>
            </div>
            <VxInput type="password" />
          </div>
        </div>
      </form>
    </VxCardContent>
    <VxCardFooter>
      <VxButton style="width: 100%;">Login</VxButton>
      <VxButton variant="outline" style="width: 100%;">Login with Google</VxButton>
    </VxCardFooter>
  </VxCard>
</template>

Simple Card

Notifications

You have 3 unread messages.

Your call has been confirmed.

1 hour ago

You have a new message!

2 hours ago

Your subscription is expiring soon!

5 hours ago

vue

<template>
  <VxCard>
    <VxCardHeader>
      <VxCardTitle>Notifications</VxCardTitle>
      <VxCardDescription>You have 3 unread messages.</VxCardDescription>
    </VxCardHeader>
    <VxCardContent>
      <!-- notification items -->
    </VxCardContent>
  </VxCard>
</template>

Stats Cards

Total Revenue

$45,231.89

+20.1% from last month

Subscriptions

+2,350

+180.1% from last month

Active Now

+573

+201 since last hour

vue

<template>
  <VxCard>
    <VxCardHeader>
      <VxCardDescription>Total Revenue</VxCardDescription>
      <VxCardTitle style="font-size: 24px;">$45,231.89</VxCardTitle>
    </VxCardHeader>
    <VxCardContent>
      <div>+20.1% from last month</div>
    </VxCardContent>
  </VxCard>
</template>

With Action

Используйте VxCardAction внутри VxCardHeader, чтобы поместить кнопку в правый верхний угол. Заголовок автоматически переключается на 2-колоночный grid-макет.

Team Members

Invite your team members to collaborate.

Sofia Davis

sofia@example.com

Owner

Jackson Lee

jackson@example.com

Member

vue

<template>
  <VxCard>
    <VxCardHeader>
      <VxCardTitle>Team Members</VxCardTitle>
      <VxCardDescription>Invite your team members to collaborate.</VxCardDescription>
      <VxCardAction>
        <VxButton size="sm">Invite</VxButton>
      </VxCardAction>
    </VxCardHeader>
    <VxCardContent>
      <!-- team member list -->
    </VxCardContent>
  </VxCard>
</template>

Create project

Deploy your new project in one-click.

Name

Description

vue

<template>
  <VxCard>
    <VxCardHeader>
      <VxCardTitle>Create project</VxCardTitle>
      <VxCardDescription>Deploy your new project in one-click.</VxCardDescription>
    </VxCardHeader>
    <VxCardContent>
      <VxInput placeholder="Name of your project" />
      <VxInput placeholder="Describe your project" />
    </VxCardContent>
    <VxCardFooter>
      <div style="display: flex; justify-content: flex-end; gap: 8px; width: 100%;">
        <VxButton variant="outline">Cancel</VxButton>
        <VxButton>Deploy</VxButton>
      </div>
    </VxCardFooter>
  </VxCard>
</template>

Accent Border

Добавьте цветную акцентную полосу по левому или верхнему краю.

Info

Blue left accent

Success

Green left accent

Error

Red left accent

Warning

Yellow left accent

vue

<template>
  <VxCard accent="#3b82f6">
    <VxCardHeader>
      <VxCardTitle>Info</VxCardTitle>
      <VxCardDescription>Blue left accent</VxCardDescription>
    </VxCardHeader>
  </VxCard>

  <!-- Top accent -->
  <VxCard accent="#ef4444" accent-position="top">
    <VxCardHeader>
      <VxCardTitle>Error</VxCardTitle>
    </VxCardHeader>
  </VxCard>
</template>

Top Accent

Purple top

Accent on the top edge

Pink top

Accent on the top edge

vue

<template>
  <VxCard accent="#8b5cf6" accent-position="top">...</VxCard>
</template>

Divider

Используйте VxCardDivider для разделения секций внутри карточки.

Account Settings

Manage your account preferences.

Email notifications

Receive emails about activity

Marketing emails

Receive promotional content

vue

<script setup lang="ts">
import {
  VxCard, VxCardHeader, VxCardTitle, VxCardDescription,
  VxCardContent, VxCardDivider, VxCardFooter,
  VxButton, VxSwitch
} from 'veloxui'
</script>

<template>
  <VxCard>
    <VxCardHeader>
      <VxCardTitle>Account Settings</VxCardTitle>
      <VxCardDescription>Manage your account preferences.</VxCardDescription>
    </VxCardHeader>
    <VxCardDivider />
    <VxCardContent>
      <!-- settings rows -->
    </VxCardContent>
    <VxCardDivider />
    <VxCardFooter>
      <VxButton variant="outline">Cancel</VxButton>
      <VxButton>Save</VxButton>
    </VxCardFooter>
  </VxCard>
</template>

Components

Component	Element	Description
`VxCard`	`<div>`	Корень — рамка, rounded-xl, тень, gap 24px, py 24px
`VxCardHeader`	`<div>`	CSS grid — переключается на 2 колонки при наличии `VxCardAction`
`VxCardTitle`	`<h3>`	Заголовок 16px полужирный
`VxCardDescription`	`<p>`	Приглушённое описание 14px
`VxCardAction`	`<div>`	Действие в правом верхнем углу — автоматически позиционируется через grid
`VxCardContent`	`<div>`	Тело — горизонтальный padding 24px
`VxCardDivider`	`<hr>`	Горизонтальная разделительная линия
`VxCardFooter`	`<div>`	Футер — flex-column, gap 8px, горизонтальный padding 24px

Card Props

Prop	Type	Default	Description
`accent`	`string`	`''`	Цвет акцентной рамки (любой CSS-цвет)
`accentPosition`	`'left' \| 'top'`	`'left'`	К какому краю применяется акцент

Все вложенные компоненты — это примитивы без props, стилизуйте их через классы или inline-стили.

Card ​

Login Card ​

Login to your account

Simple Card ​

Notifications

Stats Cards ​