## Classes These are the classes that are available in Volvo Cars CSS. Comma separated {} groups identify available prefixes for that class. Use breakpoint prefixes md:,lg:,xl: for responsive design and use the associated aria-attribute for state prefixes like selected: or checked:. Utility classes may be combined with other classes and include the CSS rules they apply to help you understand their purpose.Other classes may not be combined with each other. ### Layer: blocks .backdrop .backdrop:opacity-0 .icon-button-filled .icon-button-outlined .icon-button-clear .spinner .dialog-large .dialog-small .sheet .radio .checkbox .wordmark .icon-sprite .icon-mask .img .label .input .custom-select .chip-selectable .chip-dismissible .link-inline .link-underlined .link-plain .list-item .navigation-list-item .pagination-dots .range .double-range .selectable-card .statement-signature .switch .tab .tap-area .media-tile .text-tile .text-card .media-card .text-banner .media-banner .media-hero .text-hero .message-bar .tooltip .skeleton .toast-message .inline-message .pill-filled .pill-outlined .pill-soft .tablist .tablist-stretched .table .resize-handle .title-page .title-section ### Layer: layout .button-filled .button-outlined .button-text .heading-1 .heading-2 .input-floating-label .list .statement-1 .statement-2 .statement-3 .button-group .container-xs .container-sm .container-md .container-lg .container .container-xl .container-max .max-w-prose .reel .stack-4 .stack-8 .stack-16 .stack-24 .stack-32 .stack-48 .stack-64 .stack-s .stack-m .stack-l .stack-text .heading-3 .layout-4-5 .layout-5-4 .layout-6-4 .layout-4-6 .pagelayout .navigation-bar ### Layer: utilities .{lg,md,xl}:w-16 width: 1rem .{lg,md,xl}:w-24 width: 1.5rem .{lg,md,xl}:w-32 width: 2rem .{lg,md,xl}:w-40 width: 2.5rem .{lg,md,xl}:w-48 width: 3rem .{lg,md}:font-20 font-size: var(--v-font-20-size) line-height: var(--v-font-20-lineheight) .{lg,md}:font-16 font-size: var(--v-font-16-size) line-height: var(--v-font-16-lineheight) .micro font-size: var(--v-font-12-size) line-height: var(--v-font-12-lineheight) letter-spacing: .02em .font-medium font-weight: var(--v-font-emphasis-weight) .{lg,md}:font-24 font-size: var(--v-font-24-size) line-height: var(--v-font-24-lineheight) .{lg,md}:font-14 font-size: var(--v-font-14-size) line-height: var(--v-font-14-lineheight) .fade-in animation: v-fade-in var(--v-transition-notable) .fade-out animation: v-fade-out var(--v-transition-notable) .slide-in-from-bottom --animate-from-translate-y: 100% animation: v-slide-in var(--v-transition-micro) .{lg,md,xl}:aspect-1/1 aspect-ratio: 1 .{lg,md,xl}:aspect-4/5 aspect-ratio: 4 / 5 .{lg,md,xl}:aspect-2/3 aspect-ratio: 2 / 3 .{lg,md,xl}:aspect-9/16 aspect-ratio: 9 / 16 .{lg,md,xl}:aspect-4/3 aspect-ratio: 4 / 3 .{lg,md,xl}:aspect-3/2 aspect-ratio: 3 / 2 .{lg,md,xl}:aspect-16/9 aspect-ratio: 16 / 9 .{lg,md,xl}:aspect-21/9 aspect-ratio: 21 / 9 .{lg,md,xl}:basis-auto flex-basis: auto .{lg,md,xl}:basis-0 flex-basis: 0 .{lg,md,xl}:basis-8 flex-basis: .5rem .{lg,md,xl}:basis-16 flex-basis: 1rem .{lg,md,xl}:basis-24 flex-basis: 1.5rem .{lg,md,xl}:basis-32 flex-basis: 2rem .{lg,md,xl}:basis-40 flex-basis: 2.5rem .{lg,md,xl}:basis-48 flex-basis: 3rem .{lg,md,xl}:basis-64 flex-basis: 4rem .{lg,md,xl}:basis-1/2 flex-basis: 50% .{lg,md,xl}:basis-full flex-basis: 100% .{lg,md,xl}:basis-xs flex-basis: var(--v-size-grid-xs) .{lg,md,xl}:basis-sm flex-basis: var(--v-size-grid-sm) .{lg,md,xl}:basis-md flex-basis: var(--v-size-grid-md) .{lg,md,xl}:basis-lg flex-basis: var(--v-size-grid-lg) .{lg,md,xl}:basis-xl flex-basis: var(--v-size-grid-xl) .bg-inherit background-color: inherit .bg-transparent background-color: #0000 .bg-always-black --background-color: var(--v-color-always-black) background-color: var(--background-color) .bg-always-white --background-color: var(--v-color-always-white) background-color: var(--background-color) .bg-primary --background-color: var(--v-color-background-primary) background-color: var(--background-color) .odd:bg-secondary --background-color: var(--v-color-background-secondary) background-color: var(--background-color) .{checked,current,selected}:bg-surface-neutral --background-color: var(--v-color-surface-neutral) background-color: var(--background-color) .bg-surface-accent-blue --background-color: var(--v-color-surface-accent-blue) background-color: var(--background-color) .bg-surface-feedback-green --background-color: var(--v-color-surface-feedback-green) background-color: var(--background-color) .bg-surface-feedback-orange --background-color: var(--v-color-surface-feedback-orange) background-color: var(--background-color) .bg-surface-feedback-red --background-color: var(--v-color-surface-feedback-red) background-color: var(--background-color) .bg-feedback-gray --background-color: var(--v-color-background-feedback-gray) background-color: var(--background-color) .bg-feedback-green --background-color: var(--v-color-background-feedback-green) background-color: var(--background-color) .bg-feedback-orange --background-color: var(--v-color-background-feedback-orange) background-color: var(--background-color) .bg-feedback-red --background-color: var(--v-color-background-feedback-red) background-color: var(--background-color) .{expanded,selected}:bg-accent-blue-medium .{lg,md,xl}:border-0 border-width: 0 .{checkbox-checked,checked,lg,link-current,md,radio-checked,selected,tab-selected,xl}:border border-width: 1px .{checkbox-checked,checked,lg,link-current,md,radio-checked,selected,tab-selected,xl}:border-2 border-width: 2px .{lg,md,xl}:border-t-0 border-top-width: 0 .{lg,md,xl}:border-t border-top-width: 1px .{lg,md,xl}:border-t-2 border-top-width: 2px .{lg,md,xl}:border-r-0 border-inline-end-width: 0 .{lg,md,xl}:border-r border-inline-end-width: 1px .{lg,md,xl}:border-r-2 border-inline-end-width: 2px .{lg,md,xl}:border-b-0 border-bottom-width: 0 .{lg,md,xl}:border-b border-bottom-width: 1px .{lg,md,xl}:border-b-2 border-bottom-width: 2px .{lg,md,xl}:border-l-0 border-inline-start-width: 0 .{lg,md,xl}:border-l border-inline-start-width: 1px .{lg,md,xl}:border-l-2 border-inline-start-width: 2px .{lg,md,xl}:border-x-0 border-inline-width: 0 .{lg,md,xl}:border-x border-inline-width: 1px .{lg,md,xl}:border-x-2 border-inline-width: 2px .{lg,md,xl}:border-y-0 border-block-width: 0 .{lg,md,xl}:border-y border-block-width: 1px .{lg,md,xl}:border-y-2 border-block-width: 2px .border-ornament --_border-color: var(--v-color-ornament-primary) .border-always-black --_border-color: var(--v-color-always-black) .border-always-white --_border-color: var(--v-color-always-white) .{button-expanded,checkbox-checked,checked,current,expanded,hover,link-current,open,radio-checked,selected,tab-selected}:border-primary --_border-color: var(--v-color-foreground-primary) .border-secondary --_border-color: var(--v-color-foreground-secondary) .border-tertiary --_border-color: var(--v-color-foreground-tertiary) .{button-expanded,checkbox-checked,checked,current,expanded,focus,link-current,radio-checked,selected,tab-selected}:border-accent-blue --_border-color: var(--v-color-foreground-accent-blue) .border-feedback-green --_border-color: var(--v-color-foreground-feedback-green) .border-feedback-orange --_border-color: var(--v-color-foreground-feedback-orange) .border-feedback-red --_border-color: var(--v-color-foreground-feedback-red) .border-transparent --_border-color: transparent .border-inherit --_border-color: inherit .{checked,selected}:border-ring box-shadow: inset 0 0 0 1px var(--_border-color, var(--v-color-ornament-primary)) .{checked,selected}:border-ring-2 box-shadow: inset 0 0 0 2px var(--_border-color, var(--v-color-ornament-primary)) .shape-default border-radius: var(--v-shape-default) .shape-emphasis border-radius: var(--v-shape-emphasis) .rounded-none border-radius: 0 .rounded-full border-radius: var(--v-shape-emphasis) .contain-none contain: none .contain-content contain: content .{lg,md,xl}:flow-root --_display-inner: flow-root display: var(--_display-outer) var(--_display-inner) .{lg,md,xl}:block --_display-outer: block display: var(--_display-outer) var(--_display-inner) .{lg,md,xl}:inline --_display-outer: inline display: var(--_display-outer) var(--_display-inner) .{lg,md,xl}:inline-flex --_display-outer: inline --_display-inner: flex display: var(--_display-outer) var(--_display-inner) .{lg,md,xl}:inline-grid --_display-outer: inline --_display-inner: grid display: var(--_display-outer) var(--_display-inner) .{lg,md,xl}:contents display: contents .{lg,md,xl}:flex --_display-inner: flex display: var(--_display-outer) flex .{lg,md,xl}:flex-row --_display-inner: flex display: var(--_display-outer) flex flex-direction: row .{lg,md,xl}:flex-col --_display-inner: flex display: var(--_display-outer) flex flex-direction: column .{lg,md,xl}:flex-row-reverse --_display-inner: flex display: var(--_display-outer) flex flex-direction: row-reverse .{lg,md,xl}:flex-col-reverse --_display-inner: flex display: var(--_display-outer) flex flex-direction: column-reverse .{lg,md,xl}:flex-wrap flex-wrap: wrap .{lg,md,xl}:flex-nowrap flex-wrap: nowrap .{lg,md,xl}:flex-grow flex-grow: 1 .{lg,md,xl}:flex-grow-0 flex-grow: 0 .{lg,md,xl}:flex-shrink flex-shrink: 1 .{lg,md,xl}:flex-shrink-0 flex-shrink: 0 .{lg,md,xl}:flex-1 flex: 1 .{lg,md,xl}:flex-none flex: none .{lg,md,xl}:items-start align-items: flex-start .{lg,md,xl}:items-end align-items: flex-end .{lg,md,xl}:items-center align-items: center .{lg,md,xl}:items-stretch align-items: stretch .{lg,md,xl}:items-baseline align-items: baseline .{lg,md,xl}:self-start align-self: flex-start align-self: start .{lg,md,xl}:self-end align-self: flex-end .{lg,md,xl}:self-center align-self: center .{lg,md,xl}:self-stretch align-self: stretch .{lg,md,xl}:justify-start justify-content: flex-start .{lg,md,xl}:justify-end justify-content: flex-end .{lg,md,xl}:justify-around justify-content: space-around .{lg,md,xl}:justify-between justify-content: space-between .{lg,md,xl}:justify-evenly justify-content: space-evenly .{lg,md,xl}:justify-center justify-content: center .italic --_font-variation-ital: 1 font-variation-settings: "DRKM" var(--_font-variation-drkm, 0), "ital" var(--_font-variation-ital, 1) font-synthesis-style: none font-style: italic .tabular-nums font-variant-numeric: tabular-nums .font-light font-weight: var(--v-font-regular-weight) .{lg,md,xl}:gap-0 gap: 0 .{lg,md,xl}:gap-y-0 row-gap: 0 .{lg,md,xl}:gap-x-0 column-gap: 0 .{lg,md,xl}:gap-y-l row-gap: var(--v-space-l) .{lg,md,xl}:gap-y-m row-gap: var(--v-space-m) .{lg,md,xl}:gap-y-s row-gap: var(--v-space-s) .{lg,md,xl}:gap-x-gutter column-gap: var(--v-space-gutter) .{lg,md,xl}:gap-2 gap: .125rem .{lg,md,xl}:gap-y-2 row-gap: .125rem .{lg,md,xl}:gap-x-2 column-gap: .125rem .{lg,md,xl}:gap-4 gap: .25rem .{lg,md,xl}:gap-y-4 row-gap: .25rem .{lg,md,xl}:gap-x-4 column-gap: .25rem .{lg,md,xl}:gap-8 gap: .5rem .{lg,md,xl}:gap-y-8 row-gap: .5rem .{lg,md,xl}:gap-x-8 column-gap: .5rem .{lg,md,xl}:gap-12 gap: .75rem .{lg,md,xl}:gap-y-12 row-gap: .75rem .{lg,md,xl}:gap-x-12 column-gap: .75rem .{lg,md,xl}:gap-16 gap: 1rem .{lg,md,xl}:gap-y-16 row-gap: 1rem .{lg,md,xl}:gap-x-16 column-gap: 1rem .{lg,md,xl}:gap-24 gap: 1.5rem .{lg,md,xl}:gap-y-24 row-gap: 1.5rem .{lg,md,xl}:gap-x-24 column-gap: 1.5rem .{lg,md,xl}:gap-32 gap: 2rem .{lg,md,xl}:gap-y-32 row-gap: 2rem .{lg,md,xl}:gap-x-32 column-gap: 2rem .{lg,md,xl}:gap-48 gap: 3rem .{lg,md,xl}:gap-y-48 row-gap: 3rem .{lg,md,xl}:gap-x-48 column-gap: 3rem .{lg,md,xl}:gap-64 gap: 4rem .{lg,md,xl}:gap-y-64 row-gap: 4rem .{lg,md,xl}:gap-x-64 column-gap: 4rem .{lg,md,xl}:gap-gridded-element gap: var(--v-space-gridded-element-gap) .{lg,md,xl}:gap-y-gridded-element row-gap: var(--v-space-gridded-element-gap) .{lg,md,xl}:gap-x-gridded-element column-gap: var(--v-space-gridded-element-gap) .{lg,md,xl}:gap-y-xs row-gap: var(--v-space-xs) .{lg,md,xl}:gap-y-sm row-gap: var(--v-space-sm) .{lg,md,xl}:gap-y-md row-gap: var(--v-space-md) .{lg,md,xl}:gap-y-lg row-gap: var(--v-space-lg) .{lg,md,xl}:gap-y-xl row-gap: var(--v-space-xl) .{lg,md,xl}:gap-y-2xl row-gap: var(--v-space-2xl) .{lg,md,xl}:grid --_display-inner: grid display: var(--_display-outer) grid .{lg,md,xl}:grid-cols-1 --_display-inner: grid display: var(--_display-outer) grid grid-template-columns: repeat(1, minmax(0, 1fr)) .{lg,md,xl}:grid-cols-2 --_display-inner: grid display: var(--_display-outer) grid grid-template-columns: repeat(2, minmax(0, 1fr)) .{lg,md,xl}:grid-cols-3 --_display-inner: grid display: var(--_display-outer) grid grid-template-columns: repeat(3, minmax(0, 1fr)) .{lg,md,xl}:grid-cols-4 --_display-inner: grid display: var(--_display-outer) grid grid-template-columns: repeat(4, minmax(0, 1fr)) .{lg,md,xl}:col-span-1 grid-column: span 1 / span 1 .{lg,md,xl}:col-span-2 grid-column: span 2 / span 2 .{lg,md,xl}:col-span-3 grid-column: span 3 / span 3 .{lg,md,xl}:col-span-4 grid-column: span 4 / span 4 .{lg,md,xl}:col-span-full grid-column: 1 / -1 .{lg,md,xl}:h-0 height: 0 .{lg,md,xl}:h-8 height: .5rem .{lg,md,xl}:h-16 height: 1rem .{lg,md,xl}:h-24 height: 1.5rem .{lg,md,xl}:h-32 height: 2rem .{lg,md,xl}:h-40 height: 2.5rem .{lg,md,xl}:h-48 height: 3rem .{lg,md,xl}:h-64 height: 4rem .h-1lh height: 1lh .{lg,md,xl}:h-full height: 100% .{lg,md,xl}:h-fit height: fit-content .{lg,md,xl}:h-auto height: auto .{lg,md,xl}:min-h-0 min-height: 0 .{lg,md,xl}:min-h-8 min-height: .5rem .{lg,md,xl}:min-h-16 min-height: 1rem .{lg,md,xl}:min-h-24 min-height: 1.5rem .{lg,md,xl}:min-h-32 min-height: 2rem .{lg,md,xl}:min-h-40 min-height: 2.5rem .{lg,md,xl}:min-h-48 min-height: 3rem .{lg,md,xl}:min-h-64 min-height: 4rem .{lg,md,xl}:min-h-full min-height: 100% .{lg,md,xl}:min-h-fit min-height: fit-content .{lg,md,xl}:max-h-0 max-height: 0 .{lg,md,xl}:max-h-8 max-height: .5rem .{lg,md,xl}:max-h-16 max-height: 1rem .{lg,md,xl}:max-h-24 max-height: 1.5rem .{lg,md,xl}:max-h-32 max-height: 2rem .{lg,md,xl}:max-h-40 max-height: 2.5rem .{lg,md,xl}:max-h-48 max-height: 3rem .{lg,md,xl}:max-h-64 max-height: 4rem .{lg,md,xl}:max-h-full max-height: 100% .{lg,md,xl}:max-h-fit max-height: fit-content .max-h-inherit max-height: inherit .{empty,lg,lg:until-xl,md,md:until-lg,md:until-xl,until-lg,until-md,until-xl,xl}:hidden display: none .hyphens hyphens: auto .{lg,md,xl}:end-0 inset-inline-end: 0 .{lg,md,xl}:start-0 inset-inline-start: 0 .{lg,md,xl}:top-0 top: 0 .{lg,md,xl}:bottom-0 bottom: 0 .{lg,md,xl}:end-2 inset-inline-end: .125rem .{lg,md,xl}:start-2 inset-inline-start: .125rem .{lg,md,xl}:top-2 top: .125rem .{lg,md,xl}:bottom-2 bottom: .125rem .{lg,md,xl}:end-4 inset-inline-end: .25rem .{lg,md,xl}:start-4 inset-inline-start: .25rem .{lg,md,xl}:top-4 top: .25rem .{lg,md,xl}:bottom-4 bottom: .25rem .{lg,md,xl}:end-8 inset-inline-end: .5rem .{lg,md,xl}:start-8 inset-inline-start: .5rem .{lg,md,xl}:top-8 top: .5rem .{lg,md,xl}:bottom-8 bottom: .5rem .{lg,md,xl}:end-12 inset-inline-end: .75rem .{lg,md,xl}:start-12 inset-inline-start: .75rem .{lg,md,xl}:top-12 top: .75rem .{lg,md,xl}:bottom-12 bottom: .75rem .{lg,md,xl}:end-16 inset-inline-end: 1rem .{lg,md,xl}:start-16 inset-inline-start: 1rem .{lg,md,xl}:top-16 top: 1rem .{lg,md,xl}:bottom-16 bottom: 1rem .{lg,md,xl}:end-24 inset-inline-end: 1.5rem .{lg,md,xl}:start-24 inset-inline-start: 1.5rem .{lg,md,xl}:top-24 top: 1.5rem .{lg,md,xl}:bottom-24 bottom: 1.5rem .{lg,md,xl}:end-32 inset-inline-end: 2rem .{lg,md,xl}:start-32 inset-inline-start: 2rem .{lg,md,xl}:top-32 top: 2rem .{lg,md,xl}:bottom-32 bottom: 2rem .{lg,md,xl}:end-48 inset-inline-end: 3rem .{lg,md,xl}:start-48 inset-inline-start: 3rem .{lg,md,xl}:top-48 top: 3rem .{lg,md,xl}:bottom-48 bottom: 3rem .{lg,md,xl}:end-64 inset-inline-end: 4rem .{lg,md,xl}:start-64 inset-inline-start: 4rem .{lg,md,xl}:top-64 top: 4rem .{lg,md,xl}:bottom-64 bottom: 4rem .{lg,md,xl}:end-1/2 inset-inline-end: 50% .{lg,md,xl}:start-1/2 inset-inline-start: 50% .{lg,md,xl}:end-full inset-inline-end: 100% .{lg,md,xl}:start-full inset-inline-start: 100% .{lg,md,xl}:end-auto inset-inline-end: auto .{lg,md,xl}:start-auto inset-inline-start: auto .{lg,md,xl}:top-1/2 top: 50% .{lg,md,xl}:bottom-1/2 bottom: 50% .{lg,md,xl}:top-full top: 100% .{lg,md,xl}:bottom-full bottom: 100% .{lg,md,xl}:top-auto top: auto .{lg,md,xl}:bottom-auto bottom: auto .{lg,md,xl}:m-auto margin: auto .{lg,md,xl}:my-auto margin-top: auto margin-bottom: auto .{lg,md,xl}:mt-auto margin-top: auto .{lg,md,xl}:mb-auto margin-bottom: auto .{lg,md,xl}:mx-auto margin-inline-end: auto margin-inline-start: auto .{lg,md,xl}:mr-auto margin-inline-end: auto .{lg,md,xl}:ml-auto margin-inline-start: auto .{lg,md,xl}:m-0 margin: 0 .{lg,md,xl}:my-0 margin-top: 0 margin-bottom: 0 .{lg,md,xl}:mt-0 margin-top: 0 .{lg,md,xl}:mb-0 margin-bottom: 0 .{lg,md,xl}:mx-0 margin-inline-end: 0 margin-inline-start: 0 .{lg,md,xl}:mr-0 margin-inline-end: 0 .{lg,md,xl}:ml-0 margin-inline-start: 0 .{lg,md,xl}:my-l margin-top: var(--v-space-l) margin-bottom: var(--v-space-l) .{lg,md,xl}:mt-l margin-top: var(--v-space-l) .{lg,md,xl}:mb-l margin-bottom: var(--v-space-l) .{lg,md,xl}:my-m margin-top: var(--v-space-m) margin-bottom: var(--v-space-m) .{lg,md,xl}:mt-m margin-top: var(--v-space-m) .{lg,md,xl}:mb-m margin-bottom: var(--v-space-m) .{lg,md,xl}:my-s margin-top: var(--v-space-s) margin-bottom: var(--v-space-s) .{lg,md,xl}:mt-s margin-top: var(--v-space-s) .{lg,md,xl}:mb-s margin-bottom: var(--v-space-s) .{lg,md,xl}:mx-pageoffset margin-inline-end: var(--v-space-pageoffset) margin-inline-start: var(--v-space-pageoffset) .{lg,md,xl}:mr-pageoffset margin-inline-end: var(--v-space-pageoffset) .{lg,md,xl}:ml-pageoffset margin-inline-start: var(--v-space-pageoffset) .{lg,md,xl}:mx-pagemargin margin-inline-end: var(--v-space-pagemargin) margin-inline-start: var(--v-space-pagemargin) .{lg,md,xl}:mr-pagemargin margin-inline-end: var(--v-space-pagemargin) .{lg,md,xl}:ml-pagemargin margin-inline-start: var(--v-space-pagemargin) .{lg,md,xl}:m-2 margin: .125rem .{lg,md,xl}:-m-2 margin: -.125rem .{lg,md,xl}:my-2 margin-top: .125rem margin-bottom: .125rem .{lg,md,xl}:mt-2 margin-top: .125rem .{lg,md,xl}:mb-2 margin-bottom: .125rem .{lg,md,xl}:-my-2 margin-top: -.125rem margin-bottom: -.125rem .{lg,md,xl}:-mt-2 margin-top: -.125rem .{lg,md,xl}:-mb-2 margin-bottom: -.125rem .{lg,md,xl}:mx-2 margin-inline-end: .125rem margin-inline-start: .125rem .{lg,md,xl}:mr-2 margin-inline-end: .125rem .{lg,md,xl}:ml-2 margin-inline-start: .125rem .{lg,md,xl}:-mx-2 margin-inline-end: -.125rem margin-inline-start: -.125rem .{lg,md,xl}:-mr-2 margin-inline-end: -.125rem .{lg,md,xl}:-ml-2 margin-inline-start: -.125rem .{lg,md,xl}:m-4 margin: .25rem .{lg,md,xl}:-m-4 margin: -.25rem .{lg,md,xl}:my-4 margin-top: .25rem margin-bottom: .25rem .{lg,md,xl}:mt-4 margin-top: .25rem .{lg,md,xl}:mb-4 margin-bottom: .25rem .{lg,md,xl}:-my-4 margin-top: -.25rem margin-bottom: -.25rem .{lg,md,xl}:-mt-4 margin-top: -.25rem .{lg,md,xl}:-mb-4 margin-bottom: -.25rem .{lg,md,xl}:mx-4 margin-inline-end: .25rem margin-inline-start: .25rem .{lg,md,xl}:mr-4 margin-inline-end: .25rem .{lg,md,xl}:ml-4 margin-inline-start: .25rem .{lg,md,xl}:-mx-4 margin-inline-end: -.25rem margin-inline-start: -.25rem .{lg,md,xl}:-mr-4 margin-inline-end: -.25rem .{lg,md,xl}:-ml-4 margin-inline-start: -.25rem .{lg,md,xl}:m-8 margin: .5rem .{lg,md,xl}:-m-8 margin: -.5rem .{lg,md,xl}:my-8 margin-top: .5rem margin-bottom: .5rem .{lg,md,xl}:mt-8 margin-top: .5rem .{lg,md,xl}:mb-8 margin-bottom: .5rem .{lg,md,xl}:-my-8 margin-top: -.5rem margin-bottom: -.5rem .{lg,md,xl}:-mt-8 margin-top: -.5rem .{lg,md,xl}:-mb-8 margin-bottom: -.5rem .{lg,md,xl}:mx-8 margin-inline-end: .5rem margin-inline-start: .5rem .{lg,md,xl}:mr-8 margin-inline-end: .5rem .{lg,md,xl}:ml-8 margin-inline-start: .5rem .{lg,md,xl}:-mx-8 margin-inline-end: -.5rem margin-inline-start: -.5rem .{lg,md,xl}:-mr-8 margin-inline-end: -.5rem .{lg,md,xl}:-ml-8 margin-inline-start: -.5rem .{lg,md,xl}:m-12 margin: .75rem .{lg,md,xl}:-m-12 margin: -.75rem .{lg,md,xl}:my-12 margin-top: .75rem margin-bottom: .75rem .{lg,md,xl}:mt-12 margin-top: .75rem .{lg,md,xl}:mb-12 margin-bottom: .75rem .{lg,md,xl}:-my-12 margin-top: -.75rem margin-bottom: -.75rem .{lg,md,xl}:-mt-12 margin-top: -.75rem .{lg,md,xl}:-mb-12 margin-bottom: -.75rem .{lg,md,xl}:mx-12 margin-inline-end: .75rem margin-inline-start: .75rem .{lg,md,xl}:mr-12 margin-inline-end: .75rem .{lg,md,xl}:ml-12 margin-inline-start: .75rem .{lg,md,xl}:-mx-12 margin-inline-end: -.75rem margin-inline-start: -.75rem .{lg,md,xl}:-mr-12 margin-inline-end: -.75rem .{lg,md,xl}:-ml-12 margin-inline-start: -.75rem .{lg,md,xl}:m-16 margin: 1rem .{lg,md,xl}:-m-16 margin: -1rem .{lg,md,xl}:my-16 margin-top: 1rem margin-bottom: 1rem .{lg,md,xl}:mt-16 margin-top: 1rem .{lg,md,xl}:mb-16 margin-bottom: 1rem .{lg,md,xl}:-my-16 margin-top: -1rem margin-bottom: -1rem .{lg,md,xl}:-mt-16 margin-top: -1rem .{lg,md,xl}:-mb-16 margin-bottom: -1rem .{lg,md,xl}:mx-16 margin-inline-end: 1rem margin-inline-start: 1rem .{lg,md,xl}:mr-16 margin-inline-end: 1rem .{lg,md,xl}:ml-16 margin-inline-start: 1rem .{lg,md,xl}:-mx-16 margin-inline-end: -1rem margin-inline-start: -1rem .{lg,md,xl}:-mr-16 margin-inline-end: -1rem .{lg,md,xl}:-ml-16 margin-inline-start: -1rem .{lg,md,xl}:m-24 margin: 1.5rem .{lg,md,xl}:-m-24 margin: -1.5rem .{lg,md,xl}:my-24 margin-top: 1.5rem margin-bottom: 1.5rem .{lg,md,xl}:mt-24 margin-top: 1.5rem .{lg,md,xl}:mb-24 margin-bottom: 1.5rem .{lg,md,xl}:-my-24 margin-top: -1.5rem margin-bottom: -1.5rem .{lg,md,xl}:-mt-24 margin-top: -1.5rem .{lg,md,xl}:-mb-24 margin-bottom: -1.5rem .{lg,md,xl}:mx-24 margin-inline-end: 1.5rem margin-inline-start: 1.5rem .{lg,md,xl}:mr-24 margin-inline-end: 1.5rem .{lg,md,xl}:ml-24 margin-inline-start: 1.5rem .{lg,md,xl}:-mx-24 margin-inline-end: -1.5rem margin-inline-start: -1.5rem .{lg,md,xl}:-mr-24 margin-inline-end: -1.5rem .{lg,md,xl}:-ml-24 margin-inline-start: -1.5rem .{lg,md,xl}:m-32 margin: 2rem .{lg,md,xl}:-m-32 margin: -2rem .{lg,md,xl}:my-32 margin-top: 2rem margin-bottom: 2rem .{lg,md,xl}:mt-32 margin-top: 2rem .{lg,md,xl}:mb-32 margin-bottom: 2rem .{lg,md,xl}:-my-32 margin-top: -2rem margin-bottom: -2rem .{lg,md,xl}:-mt-32 margin-top: -2rem .{lg,md,xl}:-mb-32 margin-bottom: -2rem .{lg,md,xl}:mx-32 margin-inline-end: 2rem margin-inline-start: 2rem .{lg,md,xl}:mr-32 margin-inline-end: 2rem .{lg,md,xl}:ml-32 margin-inline-start: 2rem .{lg,md,xl}:-mx-32 margin-inline-end: -2rem margin-inline-start: -2rem .{lg,md,xl}:-mr-32 margin-inline-end: -2rem .{lg,md,xl}:-ml-32 margin-inline-start: -2rem .{lg,md,xl}:m-48 margin: 3rem .{lg,md,xl}:-m-48 margin: -3rem .{lg,md,xl}:my-48 margin-top: 3rem margin-bottom: 3rem .{lg,md,xl}:mt-48 margin-top: 3rem .{lg,md,xl}:mb-48 margin-bottom: 3rem .{lg,md,xl}:-my-48 margin-top: -3rem margin-bottom: -3rem .{lg,md,xl}:-mt-48 margin-top: -3rem .{lg,md,xl}:-mb-48 margin-bottom: -3rem .{lg,md,xl}:mx-48 margin-inline-end: 3rem margin-inline-start: 3rem .{lg,md,xl}:mr-48 margin-inline-end: 3rem .{lg,md,xl}:ml-48 margin-inline-start: 3rem .{lg,md,xl}:-mx-48 margin-inline-end: -3rem margin-inline-start: -3rem .{lg,md,xl}:-mr-48 margin-inline-end: -3rem .{lg,md,xl}:-ml-48 margin-inline-start: -3rem .{lg,md,xl}:m-64 margin: 4rem .{lg,md,xl}:-m-64 margin: -4rem .{lg,md,xl}:my-64 margin-top: 4rem margin-bottom: 4rem .{lg,md,xl}:mt-64 margin-top: 4rem .{lg,md,xl}:mb-64 margin-bottom: 4rem .{lg,md,xl}:-my-64 margin-top: -4rem margin-bottom: -4rem .{lg,md,xl}:-mt-64 margin-top: -4rem .{lg,md,xl}:-mb-64 margin-bottom: -4rem .{lg,md,xl}:mx-64 margin-inline-end: 4rem margin-inline-start: 4rem .{lg,md,xl}:mr-64 margin-inline-end: 4rem .{lg,md,xl}:ml-64 margin-inline-start: 4rem .{lg,md,xl}:-mx-64 margin-inline-end: -4rem margin-inline-start: -4rem .{lg,md,xl}:-mr-64 margin-inline-end: -4rem .{lg,md,xl}:-ml-64 margin-inline-start: -4rem .{lg,md,xl}:my-xs margin-top: var(--v-space-xs) margin-bottom: var(--v-space-xs) .{lg,md,xl}:mt-xs margin-top: var(--v-space-xs) .{lg,md,xl}:mb-xs margin-bottom: var(--v-space-xs) .{lg,md,xl}:my-sm margin-top: var(--v-space-sm) margin-bottom: var(--v-space-sm) .{lg,md,xl}:mt-sm margin-top: var(--v-space-sm) .{lg,md,xl}:mb-sm margin-bottom: var(--v-space-sm) .{lg,md,xl}:my-md margin-top: var(--v-space-md) margin-bottom: var(--v-space-md) .{lg,md,xl}:mt-md margin-top: var(--v-space-md) .{lg,md,xl}:mb-md margin-bottom: var(--v-space-md) .{lg,md,xl}:my-lg margin-top: var(--v-space-lg) margin-bottom: var(--v-space-lg) .{lg,md,xl}:mt-lg margin-top: var(--v-space-lg) .{lg,md,xl}:mb-lg margin-bottom: var(--v-space-lg) .{lg,md,xl}:my-xl margin-top: var(--v-space-xl) margin-bottom: var(--v-space-xl) .{lg,md,xl}:mt-xl margin-top: var(--v-space-xl) .{lg,md,xl}:mb-xl margin-bottom: var(--v-space-xl) .{lg,md,xl}:my-2xl margin-top: var(--v-space-2xl) margin-bottom: var(--v-space-2xl) .{lg,md,xl}:mt-2xl margin-top: var(--v-space-2xl) .{lg,md,xl}:mb-2xl margin-bottom: var(--v-space-2xl) .object-fill object-fit: fill .object-cover object-fit: cover .object-contain object-fit: contain .{lg,md,xl}:overflow-auto overflow: auto .{lg,md,xl}:overflow-hidden overflow: hidden .{lg,md,xl}:overflow-visible overflow: visible .{lg,md,xl}:overflow-clip overflow: clip .{lg,md,xl}:overflow-x-auto overflow-x: auto .{lg,md,xl}:overflow-x-hidden overflow-x: hidden .{lg,md,xl}:overflow-x-visible overflow-x: visible .{lg,md,xl}:overflow-x-clip overflow-x: clip .{lg,md,xl}:overflow-y-auto overflow-y: auto .{lg,md,xl}:overflow-y-hidden overflow-y: hidden .{lg,md,xl}:overflow-y-visible overflow-y: visible .{lg,md,xl}:overflow-y-clip overflow-y: clip .{lg,md,xl}:p-0 padding: 0 .{lg,md,xl}:py-0 padding-top: 0 padding-bottom: 0 .{lg,md,xl}:pt-0 padding-top: 0 .{lg,md,xl}:pb-0 padding-bottom: 0 .{lg,md,xl}:px-0 padding-inline-end: 0 padding-inline-start: 0 .{lg,md,xl}:pr-0 padding-inline-end: 0 .{lg,md,xl}:pl-0 padding-inline-start: 0 .{lg,md,xl}:py-l padding-top: var(--v-space-l) padding-bottom: var(--v-space-l) .{lg,md,xl}:pt-l padding-top: var(--v-space-l) .{lg,md,xl}:pb-l padding-bottom: var(--v-space-l) .{lg,md,xl}:py-m padding-top: var(--v-space-m) padding-bottom: var(--v-space-m) .{lg,md,xl}:pt-m padding-top: var(--v-space-m) .{lg,md,xl}:pb-m padding-bottom: var(--v-space-m) .{lg,md,xl}:py-s padding-top: var(--v-space-s) padding-bottom: var(--v-space-s) .{lg,md,xl}:pt-s padding-top: var(--v-space-s) .{lg,md,xl}:pb-s padding-bottom: var(--v-space-s) .{lg,md,xl}:px-pageoffset padding-inline-end: var(--v-space-pageoffset) padding-inline-start: var(--v-space-pageoffset) .{lg,md,xl}:pr-pageoffset padding-inline-end: var(--v-space-pageoffset) .{lg,md,xl}:pl-pageoffset padding-inline-start: var(--v-space-pageoffset) .{lg,md,xl}:px-pagemargin padding-inline-end: var(--v-space-pagemargin) padding-inline-start: var(--v-space-pagemargin) .{lg,md,xl}:pr-pagemargin padding-inline-end: var(--v-space-pagemargin) .{lg,md,xl}:pl-pagemargin padding-inline-start: var(--v-space-pagemargin) .{lg,md,xl}:p-2 padding: .125rem .{lg,md,xl}:py-2 padding-top: .125rem padding-bottom: .125rem .{lg,md,xl}:pt-2 padding-top: .125rem .{lg,md,xl}:pb-2 padding-bottom: .125rem .{lg,md,xl}:px-2 padding-inline-end: .125rem padding-inline-start: .125rem .{lg,md,xl}:pr-2 padding-inline-end: .125rem .{lg,md,xl}:pl-2 padding-inline-start: .125rem .{lg,md,xl}:p-4 padding: .25rem .{lg,md,xl}:py-4 padding-top: .25rem padding-bottom: .25rem .{lg,md,xl}:pt-4 padding-top: .25rem .{lg,md,xl}:pb-4 padding-bottom: .25rem .{lg,md,xl}:px-4 padding-inline-end: .25rem padding-inline-start: .25rem .{lg,md,xl}:pr-4 padding-inline-end: .25rem .{lg,md,xl}:pl-4 padding-inline-start: .25rem .{lg,md,xl}:p-8 padding: .5rem .{lg,md,xl}:py-8 padding-top: .5rem padding-bottom: .5rem .{lg,md,xl}:pt-8 padding-top: .5rem .{lg,md,xl}:pb-8 padding-bottom: .5rem .{lg,md,xl}:px-8 padding-inline-end: .5rem padding-inline-start: .5rem .{lg,md,xl}:pr-8 padding-inline-end: .5rem .{lg,md,xl}:pl-8 padding-inline-start: .5rem .{lg,md,xl}:p-12 padding: .75rem .{lg,md,xl}:py-12 padding-top: .75rem padding-bottom: .75rem .{lg,md,xl}:pt-12 padding-top: .75rem .{lg,md,xl}:pb-12 padding-bottom: .75rem .{lg,md,xl}:px-12 padding-inline-end: .75rem padding-inline-start: .75rem .{lg,md,xl}:pr-12 padding-inline-end: .75rem .{lg,md,xl}:pl-12 padding-inline-start: .75rem .{lg,md,xl}:p-16 padding: 1rem .{lg,md,xl}:py-16 padding-top: 1rem padding-bottom: 1rem .{lg,md,xl}:pt-16 padding-top: 1rem .{lg,md,xl}:pb-16 padding-bottom: 1rem .{lg,md,xl}:px-16 padding-inline-end: 1rem padding-inline-start: 1rem .{lg,md,xl}:pr-16 padding-inline-end: 1rem .{lg,md,xl}:pl-16 padding-inline-start: 1rem .{lg,md,xl}:p-24 padding: 1.5rem .{lg,md,xl}:py-24 padding-top: 1.5rem padding-bottom: 1.5rem .{lg,md,xl}:pt-24 padding-top: 1.5rem .{lg,md,xl}:pb-24 padding-bottom: 1.5rem .{lg,md,xl}:px-24 padding-inline-end: 1.5rem padding-inline-start: 1.5rem .{lg,md,xl}:pr-24 padding-inline-end: 1.5rem .{lg,md,xl}:pl-24 padding-inline-start: 1.5rem .{lg,md,xl}:p-32 padding: 2rem .{lg,md,xl}:py-32 padding-top: 2rem padding-bottom: 2rem .{lg,md,xl}:pt-32 padding-top: 2rem .{lg,md,xl}:pb-32 padding-bottom: 2rem .{lg,md,xl}:px-32 padding-inline-end: 2rem padding-inline-start: 2rem .{lg,md,xl}:pr-32 padding-inline-end: 2rem .{lg,md,xl}:pl-32 padding-inline-start: 2rem .{lg,md,xl}:p-48 padding: 3rem .{lg,md,xl}:py-48 padding-top: 3rem padding-bottom: 3rem .{lg,md,xl}:pt-48 padding-top: 3rem .{lg,md,xl}:pb-48 padding-bottom: 3rem .{lg,md,xl}:px-48 padding-inline-end: 3rem padding-inline-start: 3rem .{lg,md,xl}:pr-48 padding-inline-end: 3rem .{lg,md,xl}:pl-48 padding-inline-start: 3rem .{lg,md,xl}:p-64 padding: 4rem .{lg,md,xl}:py-64 padding-top: 4rem padding-bottom: 4rem .{lg,md,xl}:pt-64 padding-top: 4rem .{lg,md,xl}:pb-64 padding-bottom: 4rem .{lg,md,xl}:px-64 padding-inline-end: 4rem padding-inline-start: 4rem .{lg,md,xl}:pr-64 padding-inline-end: 4rem .{lg,md,xl}:pl-64 padding-inline-start: 4rem .{lg,md,xl}:py-xs padding-top: var(--v-space-xs) padding-bottom: var(--v-space-xs) .{lg,md,xl}:pt-xs padding-top: var(--v-space-xs) .{lg,md,xl}:pb-xs padding-bottom: var(--v-space-xs) .{lg,md,xl}:py-sm padding-top: var(--v-space-sm) padding-bottom: var(--v-space-sm) .{lg,md,xl}:pt-sm padding-top: var(--v-space-sm) .{lg,md,xl}:pb-sm padding-bottom: var(--v-space-sm) .{lg,md,xl}:py-md padding-top: var(--v-space-md) padding-bottom: var(--v-space-md) .{lg,md,xl}:pt-md padding-top: var(--v-space-md) .{lg,md,xl}:pb-md padding-bottom: var(--v-space-md) .{lg,md,xl}:py-lg padding-top: var(--v-space-lg) padding-bottom: var(--v-space-lg) .{lg,md,xl}:pt-lg padding-top: var(--v-space-lg) .{lg,md,xl}:pb-lg padding-bottom: var(--v-space-lg) .{lg,md,xl}:py-xl padding-top: var(--v-space-xl) padding-bottom: var(--v-space-xl) .{lg,md,xl}:pt-xl padding-top: var(--v-space-xl) .{lg,md,xl}:pb-xl padding-bottom: var(--v-space-xl) .{lg,md,xl}:py-2xl padding-top: var(--v-space-2xl) padding-bottom: var(--v-space-2xl) .{lg,md,xl}:pt-2xl padding-top: var(--v-space-2xl) .{lg,md,xl}:pb-2xl padding-bottom: var(--v-space-2xl) .pointer-events-none pointer-events: none .pointer-events-auto pointer-events: auto .cursor-pointer cursor: pointer .cursor-auto cursor: auto .static position: static .fixed position: fixed .absolute position: absolute .relative position: relative .sticky position: sticky .rotate-0 rotate: 0deg .rotate-90 rotate: 90deg .{button-expanded,details-open}:rotate-180 rotate: 180deg .-rotate-90 rotate: -90deg .active:scale-pressed scale: .96 .scale-96 scale: .96 .scale-100 scale: 1 .{button-hover,hover,link-hover}:scale-zoomed scale: 1.1 .scale-110 scale: 1.1 .select-none user-select: none .scrollbar-none .snap-start scroll-snap-align: start .snap-end scroll-snap-align: end .snap-center scroll-snap-align: center .snap-y scroll-snap-type: y mandatory .snap-x scroll-snap-type: x mandatory .{lg,md,xl}:text-start text-align: start .{lg,md,xl}:text-end text-align: end .{lg,md,xl}:text-center text-align: center .trim-cap text-box: trim-both cap alphabetic .text-inherit color: inherit .text-always-black --color: var(--v-color-always-black) color: var(--v-color-always-black) .text-always-white --color: var(--v-color-always-white) color: var(--v-color-always-white) .{checked,current,selected}:text-inverted --color: var(--v-color-foreground-inverted) color: var(--v-color-foreground-inverted) .{checked,current,hover,lg,md,selected,xl}:text-primary --color: var(--v-color-foreground-primary) color: var(--v-color-foreground-primary) .{lg,md,xl}:text-secondary --color: var(--v-color-foreground-secondary) color: var(--v-color-foreground-secondary) .text-accent-blue --color: var(--v-color-foreground-accent-blue) color: var(--v-color-foreground-accent-blue) .text-feedback-green --color: var(--v-color-foreground-feedback-green) color: var(--v-color-foreground-feedback-green) .text-feedback-orange --color: var(--v-color-foreground-feedback-orange) color: var(--v-color-foreground-feedback-orange) .text-feedback-red --color: var(--v-color-foreground-feedback-red) color: var(--v-color-foreground-feedback-red) .uppercase text-transform: uppercase .capitalize text-transform: capitalize .truncate text-overflow: ellipsis white-space: nowrap overflow: hidden .text-balance text-wrap: balance .text-wrap text-wrap: wrap .transition-colors transition: color, background-color, border-color, box-shadow, text-decoration-color, fill, stroke transition-duration: var(--_v-transition-speed-default) .transition-opacity transition: opacity transition-duration: var(--_v-transition-speed-default) .transition-transform transition: transform, scale, rotate, translate, skew transition-duration: var(--_v-transition-speed-default) .transition-none transition: none .translate-x-0 --translate-x: 0px --translate-y: 0px translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y) .translate-y-0 --translate-x: 0px --translate-y: 0px translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y) .translate-x-1/2 --translate-x: 0px --translate-y: 0px translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y) --translate-x: 50% .translate-y-1/2 --translate-x: 0px --translate-y: 0px translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y) --translate-y: 50% .-translate-x-1/2 --translate-x: 0px --translate-y: 0px translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y) --translate-x: -50% .-translate-y-1/2 --translate-x: 0px --translate-y: 0px translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y) --translate-y: -50% .translate-x-full --translate-x: 0px --translate-y: 0px translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y) --translate-x: 100% .translate-y-full --translate-x: 0px --translate-y: 0px translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y) --translate-y: 100% .-translate-x-full --translate-x: 0px --translate-y: 0px translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y) --translate-x: -100% .-translate-y-full --translate-x: 0px --translate-y: 0px translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y) --translate-y: -100% .whitespace-normal white-space: normal .whitespace-nowrap white-space: nowrap .whitespace-pre white-space: pre .whitespace-pre-line white-space: pre-line .whitespace-break-spaces white-space: break-spaces .sr-only clip: rect(0, 0, 0, 0) white-space: nowrap border-width: 0 width: 1px height: 1px margin: -1px padding: 0 position: absolute overflow: hidden .{empty,lg,lg:until-xl,md,md:until-lg,md:until-xl,until-lg,until-md,until-xl,xl}:invisible visibility: hidden .{lg,md,xl}:w-0 width: 0 .{lg,md,xl}:w-8 width: .5rem .{lg,md,xl}:w-64 width: 4rem .{lg,md,xl}:w-1/2 width: 50% .{lg,md,xl}:w-full width: 100% .{lg,md,xl}:w-min width: min-content .{lg,md,xl}:w-fit width: fit-content .{lg,md,xl}:w-auto width: auto .{lg,md,xl}:min-w-0 min-width: 0 .{lg,md,xl}:min-w-fit min-width: fit-content .{lg,md,xl}:min-w-min min-width: min-content .{lg,md,xl}:max-w-1/2 max-width: 50% .{lg,md,xl}:max-w-full max-width: 100% .{lg,md,xl}:max-w-fit max-width: fit-content .{lg,md,xl}:max-w-min max-width: min-content .w-xs width: var(--v-size-grid-xs) .w-sm width: var(--v-size-grid-sm) .w-md width: var(--v-size-grid-md) .w-lg width: var(--v-size-grid-lg) .w-xl width: var(--v-size-grid-xl) .z-spinner z-index: var(--v-index-spinner) .z-overlay z-index: var(--v-index-overlay) .z-navigation z-index: var(--v-index-navigation) .z-default z-index: var(--v-index-default) .z-deep z-index: var(--v-index-deep) .hover:bg-primary-subtle ## Design tokens When writing CSS, use these CSS custom properties for relevant properties. Don't use custom fonts, spacing or colors outside of these values. --v-space-l: --v-space-{l,m,s} will be deprecated. These are fallbacks for the new spacing system --v-space-m--v-space-s--v-size-grid-column: The width of a single grid column. --v-size-grid-maxwidth: The maximum width of the 12 column grid. --v-size-pagemax: The maximum width a page is allowed to grow to. --v-space-pageoffset: The inline offset from the viewport edge to the content area, matching the page layout. On viewports within pagemax this equals pagemargin; on wider viewports it adds the extra centering space. --v-size-grid-xs: Width based on the colspan of the grid for the current viewport size (4 / 6 / 4) --v-size-grid-sm: Width based on the colspan of the grid for the current viewport size (6 / 8 / 6) --v-size-grid-md: Width based on the colspan of the grid for the current viewport size (8 / 10 / 8) --v-size-grid-lg: Width based on the colspan of the grid for the current viewport size (8 / 10 / 12) --v-size-grid-xl: Width based on the colspan of the grid for the current viewport size (8 / 12 / 12) --v-size-grid-max: Width based on the maximum extent of a `max` container --v-size-contentmax: The maximum width a block of content should be allowed to grow to while maintaining readability https://baymard.com/blog/line-length-readability --v-radius-sm--v-radius-md--v-radius-lg--v-radius-full--v-index-spinner--v-index-overlay--v-index-navigation--v-index-default--v-index-deep--v-size-navigation-bar-height--v-grid-columns: The total number of grid columns at the current breakpoint. --v-transition-default--v-transition-micro--v-transition-notable--v-color-foreground-primary: Use for primary text, icons and borders. --v-color-foreground-secondary: Use for secondary text, icons and borders. --v-color-foreground-tertiary: The lightest possible foreground color acceptable for UI fills. Should not be used for body text. --v-color-foreground-inverted: The inverse of the primary foreground color. For use on filled surfaces. --v-color-foreground-accent-blue: For emphasized selection borders and graphic accents (icons, illustrations). --v-color-foreground-feedback-green: Use as a foreground or border color to highlight successful states and positive actions. --v-color-foreground-feedback-red: Use as a foreground or border color to highlight errors, invalid data, and destructive actions. --v-color-foreground-feedback-orange: Use as a foreground or border color to highlight warnings, invalid or missing data, and actions that require caution. --v-color-surface-neutral: Used as a surface fill for UI elements like buttons and form controls. Combine with Foreground / Inverted foreground color. --v-color-surface-gray: Used as surface fill. --v-color-surface-accent-blue: Used as an emphasized surface fill for UI elements like buttons and form controls. --v-color-surface-accent-safety: Used as an emphasized surface fill for UI elements like buttons and form controls. --v-color-surface-feedback-green: Used as a surface fill for UI elements like buttons and form controls to signify positive actions. Combine with Always White foreground color. --v-color-surface-feedback-orange: [Deprecated] --v-color-surface-feedback-red: Used as a surface fill for UI elements like buttons and form controls to signify destructive actions. Combine with Always White foreground color. --v-color-background-primary: Use as a primary background color. --v-color-background-secondary: Use as a secondary background color for elevated sections. --v-color-background-feedback-gray: Use as a background color to indicate informational messages. --v-color-background-feedback-green: Use as a background color to highlight successful and positive states. --v-color-background-feedback-red: Use as a background color to highlight errors, invalid data, and destructive states. --v-color-background-feedback-orange: Use as a background color to highlight warnings, invalid or missing data, and states that require caution. --v-color-always-white: Always white regardless of color mode. --v-color-always-black: Always black regardless of colour mode. --v-color-ornament-primary: Use for strokes or dividers to visually group or separate elements. --v-color-ornament-scrim: Used as a backdrop that usually sits behind a Side sheet or Dialog component. --v-color-ornament-overlay: Use as strokes or dividers for overlaying UI, like Listbox, Dropdown menu components. --v-color-state-primary-strong: Use for state layers with foreground/primary. --v-color-state-primary-medium: Use for state layers with foreground/primary. --v-color-state-primary-subtle: Use for state layers with foreground/primary. --v-color-state-inverted-strong: Use for state layers with foreground/inverted. --v-color-state-inverted-medium: Use for state layers with foreground/inverted. --v-color-state-inverted-subtle: Use for state layers with foreground/inverted. --v-color-state-accent-blue-strong: Use for state layers with foreground/accent/blue. --v-color-state-accent-blue-medium: Use for state layers with foreground/accent/blue. --v-color-state-accent-blue-subtle: Use for state layers with foreground/accent/blue. --v-color-state-feedback-red-strong: Use for state layers with foreground/feedback/red. --v-color-state-feedback-red-medium: Use for state layers with foreground/feedback/red. --v-color-state-feedback-red-subtle: Use for state layers with foreground/feedback/red. --v-color-state-always-black-strong: Use for state layers with an always/black foreground color. --v-color-state-always-black-medium: Use for state layers with an always/black foreground color. --v-color-state-always-black-subtle: Use for state layers with an always/black foreground color. --v-color-state-always-white-strong: Use for state layers with an always/white foreground color. --v-color-state-always-white-medium: Use for state layers with an always/white foreground color. --v-color-state-always-white-subtle: Use for state layers with an always/white foreground color. --v-border-width-default: Use for any UI element that needs a border in the default state. --v-border-width-selected: Use for any UI element that needs a border in the selected state. --v-space-2: Fixed 2px spacing --v-space-4: Fixed 4px spacing --v-space-8: Fixed 8px spacing --v-space-12: Fixed 12px spacing --v-space-16: Fixed 16px spacing --v-space-24: Fixed 24px spacing --v-space-32: Fixed 32px spacing --v-space-48: Fixed 48px spacing --v-space-64: Fixed 64px spacing --v-space-gridded-element-gap: Divider between gridded elements. Do not use for text. --v-space-pagemargin: The fluid outer horizontal margins of the main page container. 402 - 16px 1600 - 64px --v-space-xs: Fluid spacing between 8px-20px. --v-space-sm: Fluid spacing between 16px-32px. --v-space-md: Fluid spacing between 24px-48px. --v-space-lg: Fluid spacing between 32px-56px. --v-space-xl: Fluid spacing between 48px-72px. --v-space-2xl: Fluid spacing between 64px-128px. --v-space-gutter: The horizontal gap between grid columns. Fluid between 16px-32px. --v-size-overlay-narrow: Used to set the width of small overlays such as small dialogs, toasts --v-size-overlay-wide: Used to set the width of large overlays such as sheet, large dialogs --v-size-sidebar-narrow: Narrow sidebar width is 240 to 304 between lg and xl --v-size-sidebar-wide: Wide sidebar width is 368 to 464 between lg and xl --v-shape-default: Use as default value for all all non-interactive UI elements. --v-shape-emphasis: Use for interactive UI, and elements that need to draw attention and create visual contrast from the rest of the page. --v-effect-shadow-default: Drop shadow for overlaying UI elements. --v-font-12-size--v-font-12-lineheight--v-font-14-size--v-font-14-lineheight--v-font-16-size--v-font-16-lineheight--v-font-20-size--v-font-20-lineheight--v-font-24-size--v-font-24-lineheight--v-font-heading-2-weight--v-font-heading-2-size--v-font-heading-2-size-min--v-font-heading-2-size-max--v-font-heading-2-lineheight--v-font-heading-1-weight--v-font-heading-1-size--v-font-heading-1-lineheight--v-font-heading-1-size-min--v-font-heading-1-size-max--v-font-statement-3-weight--v-font-statement-3-size--v-font-statement-3-size-min--v-font-statement-3-size-max--v-font-statement-3-lineheight--v-font-statement-2-weight--v-font-statement-2-size--v-font-statement-2-size-min--v-font-statement-2-size-max--v-font-statement-2-lineheight--v-font-statement-1-weight--v-font-statement-1-size--v-font-statement-1-size-min--v-font-statement-1-size-max--v-font-statement-1-lineheight--v-font-statement-signature-weight--v-font-statement-signature-size--v-font-statement-signature-size-min--v-font-statement-signature-size-max--v-font-statement-signature-lineheight--v-font-regular-weight--v-font-emphasis-weight--v-font-sans-family--v-font-broad-family--v-font-mono-family