Utilities — Vectra UI Kit

Color Tokens

CSS custom properties defined on :root. Use them in your overrides or components.

--v-accent

--v-accent-2

--v-bg

--v-bg-2

--v-surface

--v-surface-2

--v-success

--v-warning

--v-danger

--v-info

Text Utilities

Colour, size, weight, alignment, and transform helpers.

Colour

v-text-accent v-text-muted v-text-faint v-text-success (custom)

Size

v-text-xs — 0.72 rem v-small — 0.8125 rem body (default) — 0.9375 rem slightly larger

Class reference

Class	Property
`v-text-accent`	color: var(--v-accent)
`v-text-muted`	color: var(--v-text-2)
`v-text-faint`	color: var(--v-text-3)
`v-text-xs`	font-size: .72rem
`v-small`	font-size: .8125rem
`v-mono`	font-family: var(--v-mono)

Backgrounds

Surface and semantic background helpers.

Class	Value
`v-bg`	background: var(--v-bg)
`v-bg-alt`	background: var(--v-bg-2)
`v-surface`	background: var(--v-surface)
`v-surface-2`	background: var(--v-surface-2)
`v-gradient`	background: var(--v-accent-grad); -webkit-background-clip: text; color: transparent

Spacing

Vectra uses Bootstrap's spacing scale (m-*, p-*, gap-*). Additionally, .v-section provides page-section padding.

Class	Value
`v-section`	padding: 80px 0 (desktop) / 56px 0 (tablet) / 40px 0 (mobile)
`v-section-sm`	padding: 48px 0

For granular control use Bootstrap utilities: mt-3, px-4, gap-2, etc.

Flex Helpers

Shortcuts built on top of Bootstrap's flex utilities.

Class	Equivalent
`v-flex-between`	display:flex; align-items:center; justify-content:space-between
`v-flex-center`	display:flex; align-items:center; justify-content:center
`v-flex-col`	display:flex; flex-direction:column

Live example — `v-flex-between`

Left content

Borders

Consistent border utilities.

Class	Value
`v-border`	border: 1px solid var(--v-border)
`v-border-t`	border-top: 1px solid var(--v-border)
`v-border-b`	border-bottom: 1px solid var(--v-border)
`v-rounded`	border-radius: var(--v-r)
`v-rounded-lg`	border-radius: var(--v-r-lg)
`v-rounded-pill`	border-radius: var(--v-r-pill)

Shadows

Box-shadow utilities, auto-scaled for light and dark themes.

shadow-xs

shadow-sm

shadow

shadow-lg

Token	Usage
`--v-shadow-xs`	Subtle lift (chips, badges)
`--v-shadow-sm`	Low elevation (inputs, inline cards)
`--v-shadow`	Cards, panels
`--v-shadow-lg`	Modals, dropdowns
`--v-shadow-xl`	Full-screen overlays

Sizing

Width / height helpers. For granular sizing, Bootstrap provides w-25, w-50, w-100, h-100, etc.

Class	Value
`v-avatar`	48×48 px inline circle, uses accent background
`v-avatar-lg`	72×72 px variant
`v-icon-box`	40×40 px soft accent square

Display

Use Bootstrap's d-* and d-{bp}-* utilities. They're already in scope via the Bootstrap CDN link.

Class	CSS
`d-none`	display: none
`d-block`	display: block
`d-flex`	display: flex
`d-grid`	display: grid
`d-lg-none`	display: none (≥ 992 px)
`d-none d-lg-block`	hidden on mobile, visible on desktop

Dividers

Horizontal and labelled dividers.

or

html

<div class="v-divider"></div>

<div class="v-divider-label">or continue with</div>

Labels & Chips

.v-label is an uppercase category tag. Use it above headings to add context.

New feature Deprecated Beta