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
css
/* Override tokens in your own stylesheet */
:root {
--v-accent: #00c2cb; /* Primary teal */
--v-accent-2: #0ea5e9; /* Secondary blue */
--v-success: #22c55e;
--v-warning: #f59e0b;
--v-danger: #ef4444;
}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) |
html
<span class="v-text-accent">Accent text</span>
<span class="v-text-muted">Muted text</span>
<span class="v-text-faint">Faint text</span>
<span class="v-text-xs">Extra small (0.72 rem)</span>
<span class="v-small">Small (0.8125 rem)</span>
<span class="v-mono">Monospace text</span>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 |
html
<div class="v-bg">Base background</div>
<div class="v-bg-alt">Alternate background</div>
<div class="v-surface">Surface level 1</div>
<div class="v-surface-2">Surface level 2</div>
<span class="v-gradient">Gradient text</span>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.
html
<section class="v-section">
<!-- 80px vertical padding on desktop -->
</section>
<section class="v-section-sm">
<!-- 48px vertical padding -->
</section>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
html
<div class="v-flex-between">
<span>Left content</span>
<button class="v-btn v-btn-sm v-btn-soft">Action</button>
</div>
<div class="v-flex-center">
<span>Centered content</span>
</div>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) |
html
<div class="v-border p-3">Full border</div>
<div class="v-border-t pt-3">Top border only</div>
<div class="v-border-b pb-3">Bottom border only</div>
<div class="v-rounded p-3">Rounded corners</div>
<div class="v-rounded-pill px-4 py-2">Pill shape</div>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 |
css
/* Use shadow tokens in your own CSS */
.my-card {
box-shadow: var(--v-shadow);
}
.my-modal {
box-shadow: var(--v-shadow-lg);
}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 |
html
<div class="v-avatar">AJ</div>
<div class="v-avatar v-avatar-lg">AJ</div>
<div class="v-icon-box"><i class="fa-solid fa-star"></i></div>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 |
html
<!-- Hide on mobile, show on desktop -->
<div class="d-none d-lg-block">Desktop only</div>
<!-- Show on mobile, hide on desktop -->
<div class="d-lg-none">Mobile only</div>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
html
<span class="v-label">New feature</span>Miscellaneous
Additional single-purpose helpers.
| Class | Purpose |
|---|---|
v-truncate | Single-line overflow ellipsis |
v-cursor-pointer | cursor: pointer |
v-no-select | user-select: none |
v-gradient | Accent gradient text (applies background-clip) |
html
<p class="v-truncate">This text will truncate with an ellipsis if too long…</p>
<span class="v-gradient">Gradient text effect</span>
<div class="v-no-select">User cannot select this text</div>