Documentation
Getting Started
Getting StartedCard Component ExampleVS Code ExtensionBase Styles
Spacing
Sizing System
Colours
Colour PaletteBackground Gradients
Box
Box ShadowBorder RadiusBorder WidthOutlineOutline OffsetOpacityZ-Index
Typography
Font FamilyFont SizeLine HeightFont WeightLetter Spacing
Helpers
Media body classes
Transitions and Animations
TransitionTransition DurationTransition Timing FunctionTransition Delay
Animation (WIP)
Customizing
Customizing (WIP)
Custom Export (WIP)
Module
JS Variables (WIP)
Generate CSS (WIP)

Font Family

Dashvar provides a few utility variables for your font-family needs.

The quick brown fox jumped over the lazy dog.
var(--font-family-sans)
ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
The quick brown fox jumped over the lazy dog.
var(--font-family-serif)
ui-serif, Georgia, Cambria, "Times New Roman", Times, serif
The quick brown fox jumped over the lazy dog.
var(--font-family-mono)
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace

Interactive Example

Feel free to play with this interactive example to get comfortable with the tool.

Made with (you name it) by Carlos Baraza