@visa/nova-styles/data.json

Visa Product Design System Nova HTML+CSS library

{"name":"@visa/nova-styles","version":"1.6.1","datetime":"2025/03/26 11:16:51:5770","entries":{"abstracts":{"action-primary":[{"name":"Alternate Disabled","description":"Disabled alternate action","order":4,"classes":[".v-alternate"],"tags":["alternate"],"markup":"\n<div class=\"v-surface v-alternate\" style=\"padding: var(--size-responsive-16); \">\n  <button class=\"v-action\" disabled=\"\" type=\"button\">\n    Alternate\n  </button>\n</div>\n","example":"abstracts/action-primary/example/alternate-disabled","section":"default"},{"name":"Alternate Stateless","description":"Primary Stateless Alternate action.","order":5,"classes":[".v-alternate"],"tags":["alternate"],"markup":"\n<div class=\"v-surface v-alternate\" style=\"padding: var(--size-responsive-10);\">\n  <div class=\"v-action-stateless\">\n    Alternate\n  </div>\n  <br/>\n  <span class=\"v-action-stateless\">\n    Alternate\n  </span>\n</div>\n","example":"abstracts/action-primary/example/alternate-stateless","section":"default"},{"name":"Alternate","description":"Alternate action.","order":3,"classes":["v-alternate"],"tags":["alternate"],"markup":"\n<div class=\"v-surface v-alternate\" style=\"padding: var(--size-responsive-16); \">\n  <button class=\"v-action\">\n    Alternate\n  </button>\n</div>\n","example":"abstracts/action-primary/example/alternate","section":"default"},{"name":"Default","description":"Primary action class.","order":0,"classes":[".v-action","%action","action($root)"],"tags":[],"markup":"\n<button class=\"v-action\">\n  Primary action\n</button>\n","example":"abstracts/action-primary/example/default","section":"default"},{"name":"Disabled","description":"Default disabled action.","order":1,"classes":[".v-action[disabled]"],"tags":[],"markup":"\n<button class=\"v-action\" disabled=\"\" type=\"button\">\n  Primary action\n</button>\n","example":"abstracts/action-primary/example/disabled","section":"default"},{"name":"Stateless","description":"Primary stateless action class.","order":2,"classes":[".v-action",".v-action-stateless","%action-stateless","action-stateless($root)"],"tags":[],"markup":"\n<div class=\"v-action-stateless\">\n  Primary\n</div>\n<br/>\n<span class=\"v-action-stateless\">\n  Primary\n</span>\n","example":"abstracts/action-primary/example/stateless","section":"default"}],"action-secondary":[{"name":"Action Secondary Panel","description":"Checkbox within action secondary abstract class.","order":3,"classes":[".v-action",".v-action-secondary",".v-checkbox"],"tags":["docs"],"markup":"\n<div class=\"v-action v-action-secondary v-flex-col v-align-items-start\">\n  <div class=\"v-flex v-align-items-center\" style=\"inline-size: 100%\">\n    <input class=\"v-checkbox v-flex-shrink-0\" id=\"checkbox-panel-1\" type=\"checkbox\"/>\n    <label class=\"v-label\" for=\"checkbox-panel-1\">\n      Label\n    </label>\n  </div>\n</div>\n","example":"abstracts/action-secondary/example/action-secondary-panel","section":"default"},{"name":"Alternate Disabled","description":"Disabled alternate action","order":5,"classes":[".v-alternate"],"tags":["alternate"],"markup":"\n<div class=\"v-surface v-surface-secondary v-alternate\" style=\"padding: var(--size-responsive-16); \">\n  <button class=\"v-action v-action-secondary\" disabled=\"\" type=\"button\">\n    Alternate\n  </button>\n</div>\n","example":"abstracts/action-secondary/example/alternate-disabled","section":"default"},{"name":"Alternate Stateless","description":"Secondary Stateless Alternate action.","order":6,"classes":[".v-alternate"],"tags":["alternate"],"markup":"\n<div class=\"v-surface v-alternate\" style=\"padding: var(--size-responsive-10);\">\n  <div class=\"v-action-stateless v-action-secondary\">\n    Alternate\n  </div>\n  <br/>\n  <span class=\"v-action-stateless v-action-secondary\">\n    Alternate\n  </span>\n</div>\n","example":"abstracts/action-secondary/example/alternate-stateless","section":"default"},{"name":"Alternate","description":"Alternate action.","order":4,"classes":[".v-alternate"],"tags":["alternate"],"markup":"\n<div class=\"v-surface v-alternate\" style=\"padding: var(--size-responsive-16); \">\n  <button class=\"v-action v-action-secondary\">\n    Alternate\n  </button>\n</div>\n","example":"abstracts/action-secondary/example/alternate","section":"default"},{"name":"Default","description":"Secondary action class.","order":0,"classes":[".v-action-secondary","%action-secondary","action-secondary($root)"],"tags":[],"markup":"\n<button class=\"v-action v-action-secondary\">\n  Secondary action\n</button>\n","example":"abstracts/action-secondary/example/default","section":"default"},{"name":"Disabled","description":"Default disabled action.","order":1,"classes":[".v-action[disabled]"],"tags":[],"markup":"\n<button class=\"v-action v-action-secondary\" disabled=\"\" type=\"button\">\n  Secondary action\n</button>\n","example":"abstracts/action-secondary/example/disabled","section":"default"},{"name":"Stateless","description":"Secondary stateless action class.","order":2,"classes":[".v-action-secondary",".v-action-stateless","%action-secondary-stateless","action-secondary-stateless($root)"],"tags":[],"markup":"\n<div class=\"v-action-stateless v-action-secondary\">\n  Secondary\n</div>\n<br/>\n<span class=\"v-action-stateless v-action-secondary\">\n  Secondary\n</span>\n","example":"abstracts/action-secondary/example/stateless","section":"default"}],"input":[{"name":"Contained Label","description":"Example with a label inside the input container.","order":13,"classes":[],"tags":["custom"],"markup":"\n<div class=\"v-flex v-flex-col v-gap-4\">\n  <div class=\"v-input-container v-surface v-flex-col v-align-items-start\">\n    <label class=\"v-label\" for=\"input-test-13\">\n      Label (required)\n    </label>\n    <input aria-describedby=\"input-message-test-13\" class=\"v-input\" id=\"input-test-13\" name=\"text-input-field\" type=\"text\"/>\n  </div>\n  <span class=\"v-input-message\" id=\"input-message-test-13\">\n    This is optional text that describes the label in more detail.\n  </span>\n</div>\n","example":"abstracts/input/example/contained-label","section":"default"},{"name":"Container","description":"Container class. Contains input field, affixes, and other action elements in the context of the input field.","order":2,"classes":[".v-input-container","%input-container","input-container()"],"tags":[],"markup":"\n<div class=\"v-input-container v-surface v-flex-row\">\n</div>\n","example":"abstracts/input/example/container","section":"default"},{"name":"Default","description":"Default input.","order":3,"classes":[".v-input","%input","input($root)"],"tags":[],"markup":"\n<div class=\"v-flex v-flex-col v-gap-4\">\n  <label class=\"v-label\" for=\"input-test-1\">\n    Label (required)\n  </label>\n  <div class=\"v-input-container v-surface v-flex-row\">\n    <input aria-describedby=\"input-message-test-1\" class=\"v-input\" id=\"input-test-1\" name=\"text-input-field\" type=\"text\"/>\n  </div>\n  <span class=\"v-input-message\" id=\"input-message-test-1\">\n    This is optional text that describes the label in more detail.\n  </span>\n</div>\n","example":"abstracts/input/example/default","section":"default"},{"name":"Disabled","description":"Disabled input example.","order":5,"classes":[],"tags":["docs"],"markup":"\n<div class=\"v-flex v-flex-col v-gap-4\">\n  <label class=\"v-label\" for=\"input-test-6\">\n    Label (required)\n  </label>\n  <div class=\"v-input-container v-surface v-flex-row\">\n    <input aria-describedby=\"input-message-test-6\" class=\"v-input\" disabled=\"\" id=\"input-test-6\" name=\"text-input-field\" type=\"text\" value=\"Disabled example text.\"/>\n  </div>\n  <span class=\"v-input-message\" id=\"input-message-test-6\">\n    This is optional text that describes the label in more detail.\n  </span>\n</div>\n","example":"abstracts/input/example/disabled","section":"default"},{"name":"Error","description":"Error input requires a class at the top level.","order":6,"classes":[".v-input-error",".v-input[aria-invalid=\"true\"]"],"tags":[],"markup":"\n<div class=\"v-flex v-flex-col v-gap-4\">\n  <label class=\"v-label\" for=\"input-test-7\">\n    Label (required)\n  </label>\n  <div class=\"v-input-container v-surface v-flex-row\">\n    <input aria-describedby=\"input-message-test-7\" aria-invalid=\"true\" class=\"v-input\" id=\"input-test-7\" name=\"text-input-field\" type=\"text\"/>\n  </div>\n  <span class=\"v-input-message\" id=\"input-message-test-7\">\n    <svg aria-hidden=\"true\" class=\"v-icon v-icon-visa v-icon-tiny\" focusable=\"false\" viewbox=\"0 0 16 16\">\n      <use href=\"#visa-error-tiny\">\n      </use>\n    </svg>\n    This is required text that describes the error in more detail.\n  </span>\n</div>\n","example":"abstracts/input/example/error","section":"default"},{"name":"Input Field","description":"Input field class. This is the actual input html element.","order":0,"classes":[".v-input","%input","input()"],"tags":[],"markup":"\n<input aria-labelledby=\"input-message-test-0\" class=\"v-input\" id=\"input-test-00\" name=\"text-input-field\" style=\"--v-input-border-color: var(--palette-default-border)\" type=\"text\"/>\n","example":"abstracts/input/example/input-field","section":"default"},{"name":"Message","description":"Message class. This is the element that provides more description for the field, below the input container.","order":1,"classes":[".v-input-message","%input-message","input-message()"],"tags":[],"markup":"\n<span class=\"v-input-message\" id=\"input-message-test-0\">\n  Inline message, use as needed\n</span>\n","example":"abstracts/input/example/message","section":"default"},{"name":"Read-only","description":"Read-only input requires a class at the top level.","order":4,"classes":[],"tags":[],"markup":"\n<div class=\"v-flex v-flex-col v-gap-4\">\n  <label class=\"v-label\" for=\"input-test-4\">\n    Label (required)\n  </label>\n  <div class=\"v-input-container v-surface v-flex-row\">\n    <input aria-describedby=\"input-message-test-4\" class=\"v-input\" id=\"input-test-4\" name=\"text-input-field\" readonly=\"\" type=\"text\" value=\"Read-only example text.\"/>\n  </div>\n  <span class=\"v-input-message\" id=\"input-message-test-4\">\n    This is optional text that describes the label in more detail.\n  </span>\n</div>\n","example":"abstracts/input/example/read-only","section":"default"},{"name":"Underlined","description":"Example with an custom underlined override of the input container.","order":14,"classes":[],"tags":["custom"],"markup":"\n<div class=\"v-flex v-flex-col v-gap-4\">\n  <label class=\"v-label\" for=\"input-test-14\">\n    Label (required)\n  </label>\n  <div class=\"v-input-container v-surface v-flex-col\" style=\"--v-surface-border-size: 0px; --v-input-indicator-size: 2px; --v-surface-border-radius: 0px;\">\n    <input aria-describedby=\"input-message-test-14\" class=\"v-input\" id=\"input-test-14\" name=\"text-input-field\" type=\"text\"/>\n  </div>\n  <span class=\"v-input-message\" id=\"input-message-test-14\">\n    This is optional text that describes the label in more detail.\n  </span>\n</div>\n","example":"abstracts/input/example/underlined","section":"default"},{"name":"With Button Outside","description":"Example with a button outside the input container.","order":12,"classes":[],"tags":["custom"],"markup":"\n<div class=\"v-flex v-flex-col v-gap-4\">\n  <label class=\"v-label\" for=\"input-test-12\">\n    Label (required)\n  </label>\n  <div class=\"v-flex v-flex-row v-align-items-center\">\n    <div class=\"v-input-container v-surface v-flex-row\">\n      <input aria-describedby=\"input-message-test-12\" class=\"v-input\" id=\"input-test-12\" name=\"text-input-field\" type=\"text\"/>\n    </div>\n    <button aria-label=\"clear\" class=\"v-button v-button-icon v-button-tertiary v-button-small\" type=\"button\">\n      <svg aria-hidden=\"true\" class=\"v-icon v-icon-visa v-icon-tiny\" focusable=\"false\" viewbox=\"0 0 16 16\">\n        <use href=\"#visa-password-hide-tiny\">\n        </use>\n      </svg>\n    </button>\n  </div>\n  <span class=\"v-input-message\" id=\"input-message-test-12\">\n    This is optional text that describes the label in more detail.\n  </span>\n</div>\n","example":"abstracts/input/example/with-button-outside","section":"default"},{"name":"With Button","description":"Example with a button input.","order":9,"classes":[],"tags":[],"markup":"\n<div class=\"v-flex v-flex-col v-gap-4\">\n  <label class=\"v-label\" for=\"input-test-11\">\n    Label (required)\n  </label>\n  <div class=\"v-input-container v-surface v-flex-row\">\n    <input aria-describedby=\"input-message-test-11\" class=\"v-input\" id=\"input-test-11\" name=\"text-input-field\" type=\"text\"/>\n    <button aria-label=\"clear\" class=\"v-button v-button-icon v-button-subtle v-button-tertiary v-button-small\" type=\"button\">\n      <svg aria-hidden=\"true\" class=\"v-icon v-icon-visa v-icon-tiny\" focusable=\"false\" viewbox=\"0 0 16 16\">\n        <use href=\"#visa-clear-alt-tiny\">\n        </use>\n      </svg>\n    </button>\n    <button aria-label=\"show password\" class=\"v-button v-button-icon v-button-tertiary v-button-small\" type=\"button\">\n      <svg aria-hidden=\"true\" class=\"v-icon v-icon-visa v-icon-tiny\" focusable=\"false\" viewbox=\"0 0 16 16\">\n        <use href=\"#visa-password-hide-tiny\">\n        </use>\n      </svg>\n    </button>\n  </div>\n  <span class=\"v-input-message\" id=\"input-message-test-11\">\n    This is optional text that describes the label in more detail.\n  </span>\n</div>\n","example":"abstracts/input/example/with-button","section":"default"},{"name":"With Inline Label and Message","description":"Example with a button input.","order":11,"classes":[],"tags":["custom"],"markup":"\n<div class=\"v-flex v-flex-row v-gap-4\">\n  <label class=\"v-label v-align-self-start\" for=\"input-test-16\" style=\"line-height: var(--v-input-container-block-size)\">\n    Label (required)\n  </label>\n  <div class=\"v-flex v-flex-col v-flex-grow v-gap-4\">\n    <div class=\"v-input-container v-surface v-flex-row\">\n      <input aria-describedby=\"input-message-test-16\" class=\"v-input\" id=\"input-test-16\" name=\"text-input-field\" type=\"text\"/>\n    </div>\n    <span class=\"v-input-message\" id=\"input-message-test-16\">\n      This is optional text that describes the label in more detail.\n    </span>\n  </div>\n</div>\n","example":"abstracts/input/example/with-inline-label-and-message","section":"default"},{"name":"With Inline Label","description":"Example with a button input.","order":10,"classes":[],"tags":["custom"],"markup":"\n<div class=\"v-flex v-flex-row v-align-items-center v-gap-4\">\n  <label class=\"v-label v-flex-shrink-0\" for=\"input-test-15\">\n    Label (required)\n  </label>\n  <div class=\"v-input-container v-surface v-flex-row\">\n    <input class=\"v-input\" id=\"input-test-15\" name=\"text-input-field\" type=\"text\"/>\n  </div>\n</div>\n","example":"abstracts/input/example/with-inline-label","section":"default"},{"name":"With Prefix","description":"Use of an element before the input container, but after input field.","order":7,"classes":[],"tags":[],"markup":"\n<div class=\"v-flex v-flex-col v-gap-4\">\n  <label class=\"v-label\" for=\"input-test-9\">\n    Label (required)\n  </label>\n  <div class=\"v-input-container v-surface v-flex-row\">\n    <span class=\"v-flex v-align-items-center v-typography-body-2-bold\">\n      $\n    </span>\n    <input aria-describedby=\"input-message-test-9\" class=\"v-input\" id=\"input-test-9\" name=\"text-input-field\" type=\"text\"/>\n  </div>\n  <span class=\"v-input-message\" id=\"input-message-test-9\">\n    This is optional text that describes the label in more detail.\n  </span>\n</div>\n","example":"abstracts/input/example/with-prefix","section":"default"},{"name":"With Suffix","description":"Use of an element within the input container, but after input field.","order":8,"classes":[],"tags":[],"markup":"\n<div class=\"v-flex v-flex-col v-gap-4\">\n  <label class=\"v-label\" for=\"input-test-10\">\n    Label (required)\n  </label>\n  <div class=\"v-input-container v-surface v-flex-row\">\n    <input aria-describedby=\"input-message-test-10\" class=\"v-input\" id=\"input-test-10\" name=\"text-input-field\" type=\"text\"/>\n    <span class=\"v-flex v-align-items-center v-typography-body-2-bold\">\n      %\n    </span>\n  </div>\n  <span class=\"v-input-message\" id=\"input-message-test-10\">\n    This is optional text that describes the label in more detail.\n  </span>\n</div>\n","example":"abstracts/input/example/with-suffix","section":"default"}],"message":[{"name":"Default","description":"Default message.","order":0,"classes":[".v-message","%message-default","message-default()"],"tags":[],"markup":"\n<div class=\"v-message\">\n  Default message container\n</div>\n","example":"abstracts/message/example/default","section":"default"},{"name":"Error","description":"Error message.","order":4,"classes":[".v-message-error","%message-error","message-error()"],"tags":[],"markup":"\n<div class=\"v-message v-message-error\">\n  <svg aria-hidden=\"true\" class=\"v-icon v-icon-visa v-icon-low v-message-icon\" focusable=\"false\">\n    <use href=\"#visa-error-low\">\n    </use>\n  </svg>\n  <div class=\"v-message-content\">\n    <p class=\"v-typography-body-2\">\n      This is required text that describes the banner in more detail.\n    </p>\n  </div>\n</div>\n","example":"abstracts/message/example/error","section":"default"},{"name":"Informational","description":"Informational message, same as default.","order":1,"classes":[".v-message-info","%message-info","message-info()"],"tags":[],"markup":"\n<div class=\"v-message v-message-info\">\n  <svg aria-hidden=\"true\" class=\"v-icon v-icon-visa v-icon-low v-message-icon\" focusable=\"false\">\n    <use href=\"#visa-information-low\">\n    </use>\n  </svg>\n  <div class=\"v-message-content\">\n    <p class=\"v-typography-body-2\">\n      This is required text that describes the banner in more detail.\n    </p>\n  </div>\n</div>\n","example":"abstracts/message/example/informational","section":"default"},{"name":"Success","description":"message to indicate success.","order":2,"classes":[".v-message-success","%message-success","message-success()"],"tags":[],"markup":"\n<div class=\"v-message v-message-success\">\n  <svg aria-hidden=\"true\" class=\"v-icon v-icon-visa v-icon-low v-message-icon\" focusable=\"false\">\n    <use href=\"#visa-success-low\">\n    </use>\n  </svg>\n  <div class=\"v-message-content\">\n    <p class=\"v-typography-body-2\">\n      This is required text that describes the banner in more detail.\n    </p>\n  </div>\n</div>\n","example":"abstracts/message/example/success","section":"default"},{"name":"Warning","description":"message to indicate a warning.","order":3,"classes":[".v-message-warning","%message-warning","message-warning()"],"tags":[],"markup":"\n<div class=\"v-message v-message-warning\">\n  <svg aria-hidden=\"true\" class=\"v-icon v-icon-visa v-icon-low v-message-icon\" focusable=\"false\">\n    <use href=\"#visa-warning-low\">\n    </use>\n  </svg>\n  <div class=\"v-message-content\">\n    <p class=\"v-typography-body-2\">\n      This is required text that describes the banner in more detail.\n    </p>\n  </div>\n</div>\n","example":"abstracts/message/example/warning","section":"default"}],"surface":[{"name":"Alternate","description":"Alternate surface.","order":1,"classes":[".v-surface.v-alternate"],"tags":["alternate"],"markup":"\n<div class=\"v-surface v-alternate\">\n  Example\n</div>\n","example":"abstracts/surface/example/alternate","section":"default"},{"name":"Default","description":"Default surface.","order":0,"classes":[".v-surface"],"tags":[],"markup":"\n<div class=\"v-surface\">\n  Example\n</div>\n","example":"abstracts/surface/example/default","section":"default"}]},"base":{"accessibility":[{"name":"Focus Outline","description":"Focus ring provided by design system styles. Can be exteded or re-used as a SCSS mixin.","order":0,"classes":["state-focus()","var(--theme-focus-outline-size)","var(--theme-focus-outline-offset)"],"tags":[],"markup":"\n<button>\n  Focusable native button\n</button>\n","example":"base/accessibility/example/focus-outline","section":"01-accessibility-styles"},{"name":"Screen Reader only","description":"This class would hide elements visually, while still being discoverable by screen readers.","order":1,"classes":[".v-sr"],"tags":[],"markup":"\n<span class=\"v-sr\">\n  This text is not shown on the screen, but it's accessible to a screen reader\n</span>\n<br/>\n<button class=\"v-button v-sr\">\n  Focusable button for screen readers only\n</button>\n","example":"base/accessibility/example/screen-reader-only","section":"01-accessibility-styles"}],"breakpoints":[{"name":"Hide with breakpoint-matching container query.","description":"Classes to hide element on specific breakpoint-matching container queries. Resize your screen to see it in action.","order":1,"classes":[".v-xs-container-hide",".v-sm-container-hide",".v-md-container-hide",".v-lg-container-hide",".v-xl-container-hide",".v-xxl-container-hide",".v-mobile-container-hide",".v-desktop-container-hide"],"tags":[],"markup":"\n<div class=\"v-flex v-flex-row v-gap-8 v-flex-wrap\" style=\"container-type: inline-size\">\n  <div class=\"v-avatar v-xs-container-hide\" style=\"--v-avatar-background: #e50000\">\n    XS\n  </div>\n  <div class=\"v-avatar v-sm-container-hide\" style=\"--v-avatar-background: orange; --v-avatar-foreground: black\">\n    SM\n  </div>\n  <div class=\"v-avatar v-md-container-hide\" style=\"--v-avatar-background: yellow; --v-avatar-foreground: black\">\n    MD\n  </div>\n  <div class=\"v-avatar v-lg-container-hide\" style=\"--v-avatar-background: green\">\n    LG\n  </div>\n  <div class=\"v-avatar v-xl-container-hide\" style=\"--v-avatar-background: blue\">\n    XL\n  </div>\n  <div class=\"v-avatar v-xxl-container-hide\" style=\"--v-avatar-background: purple\">\n    XXL\n  </div>\n  <div class=\"v-avatar v-mobile-container-hide\">\n    <svg aria-label=\"Showing a laptop to indicate we're on a desktop-sized container\" class=\"v-icon v-icon-low\" height=\"24\" viewbox=\"0 0 24 24\" width=\"24\">\n      <use href=\"#visa-device-laptop-low\">\n      </use>\n    </svg>\n  </div>\n  <div class=\"v-avatar v-desktop-container-hide\">\n    <svg aria-label=\"Showing a mobile device to indicate we're on a mobile-sized container\" class=\"v-icon v-icon-low\" height=\"24\" viewbox=\"0 0 24 24\" width=\"24\">\n      <use href=\"#visa-device-mobile-low\">\n      </use>\n    </svg>\n  </div>\n</div>\n","example":"base/breakpoints/example/hide-with-breakpoint-matching-container-query.","section":"01-breakpoints"},{"name":"Hide with breakpoint-matching media query.","description":"Classes to hide element on specific breakpoint-matching media queries. Resize your screen to see it in action.","order":2,"classes":[".v-xs-media-hide",".v-sm-media-hide",".v-md-media-hide",".v-lg-media-hide",".v-xl-media-hide",".v-xxl-media-hide",".v-mobile-media-hide",".v-desktop-media-hide"],"tags":[],"markup":"\n<div class=\"v-flex v-flex-row v-gap-8 v-flex-wrap\">\n  <div class=\"v-avatar v-xs-media-hide\" style=\"--v-avatar-background: #e50000\">\n    XS\n  </div>\n  <div class=\"v-avatar v-sm-media-hide\" style=\"--v-avatar-background: orange; --v-avatar-foreground: black\">\n    SM\n  </div>\n  <div class=\"v-avatar v-md-media-hide\" style=\"--v-avatar-background: yellow; --v-avatar-foreground: black\">\n    MD\n  </div>\n  <div class=\"v-avatar v-lg-media-hide\" style=\"--v-avatar-background: green\">\n    LG\n  </div>\n  <div class=\"v-avatar v-xl-media-hide\" style=\"--v-avatar-background: blue\">\n    XL\n  </div>\n  <div class=\"v-avatar v-xxl-media-hide\" style=\"--v-avatar-background: purple\">\n    XXL\n  </div>\n  <div class=\"v-avatar v-mobile-media-hide\">\n    <svg aria-label=\"Showing a laptop to indicate we're on a desktop-sized screen\" class=\"v-icon v-icon-low\" height=\"24\" viewbox=\"0 0 24 24\" width=\"24\">\n      <use href=\"#visa-device-laptop-low\">\n      </use>\n    </svg>\n  </div>\n  <div class=\"v-avatar v-desktop-media-hide\">\n    <svg aria-label=\"Showing a mobile device to indicate we're on a mobile-sized screen\" class=\"v-icon v-icon-low\" height=\"24\" viewbox=\"0 0 24 24\" width=\"24\">\n      <use href=\"#visa-device-mobile-low\">\n      </use>\n    </svg>\n  </div>\n</div>\n","example":"base/breakpoints/example/hide-with-breakpoint-matching-media-query.","section":"01-breakpoints"},{"name":"Hide","description":"Class to hide element on command.","order":0,"classes":[".v-hide"],"tags":[],"markup":"\n<div class=\"v-avatar v-hide\">\n  AM\n</div>\n","example":"base/breakpoints/example/hide","section":"01-breakpoints"}],"elevation":[{"name":"All Elevations","description":"All Elevation variables","order":0,"classes":["var(--elevation-none)","var(--elevation-inset)","var(--elevation-xsmall)","var(--elevation-small)","var(--elevation-medium)","var(--elevation-large)","var(--elevation-xlarge)","var(--elevation-xxlarge)"],"tags":[],"markup":"\n<div class=\"v-flex v-flex-wrap v-gap-4\">\n  <div class=\"box\" style=\"box-shadow: var(--elevation-none);\">\n    None\n  </div>\n  <div class=\"box\" style=\"box-shadow: var(--elevation-inset);\">\n    Inset\n  </div>\n  <div class=\"box\" style=\"box-shadow: var(--elevation-xsmall);\">\n    XSmall\n  </div>\n  <div class=\"box\" style=\"box-shadow: var(--elevation-small);\">\n    Small\n  </div>\n  <div class=\"box\" style=\"box-shadow: var(--elevation-medium);\">\n    Medium\n  </div>\n  <div class=\"box\" style=\"box-shadow: var(--elevation-large);\">\n    Large\n  </div>\n  <div class=\"box\" style=\"box-shadow: var(--elevation-xlarge);\">\n    XLarge\n  </div>\n  <div class=\"box\" style=\"box-shadow: var(--elevation-xxlarge);\">\n    XXLarge\n  </div>\n</div>\n","example":"base/elevation/example/all-elevations","section":"01-elevations"},{"name":"Elevation Inset","description":"Elevation inset class","order":1,"classes":["var(--elevation-inset)",".v-elevation-inset"],"tags":[],"markup":"\n<div class=\"box\" style=\"box-shadow: var(--elevation-inset);\">\n</div>\n<div class=\"squircle\" style=\"box-shadow: var(--elevation-inset);\">\n</div>\n<div class=\"circle\" style=\"box-shadow: var(--elevation-inset);\">\n</div>\n","example":"base/elevation/example/elevation-inset","section":"01-elevations"},{"name":"Elevation Large","description":"Elevation large class","order":5,"classes":["var(--elevation-large)",".v-elevation-large"],"tags":[],"markup":"\n<div class=\"box\" style=\"box-shadow: var(--elevation-large);\">\n</div>\n<div class=\"squircle\" style=\"box-shadow: var(--elevation-large);\">\n</div>\n<div class=\"circle\" style=\"box-shadow: var(--elevation-large);\">\n</div>\n","example":"base/elevation/example/elevation-large","section":"01-elevations"},{"name":"Elevation Medium","description":"Elevation medium class","order":4,"classes":["var(--elevation-medium)",".v-elevation-medium"],"tags":[],"markup":"\n<div class=\"box\" style=\"box-shadow: var(--elevation-medium);\">\n</div>\n<div class=\"squircle\" style=\"box-shadow: var(--elevation-medium);\">\n</div>\n<div class=\"circle\" style=\"box-shadow: var(--elevation-medium);\">\n</div>\n","example":"base/elevation/example/elevation-medium","section":"01-elevations"},{"name":"Elevation Small","description":"Elevation small class","order":3,"classes":["var(--elevation-small)",".v-elevation-small"],"tags":[],"markup":"\n<div class=\"box\" style=\"box-shadow: var(--elevation-small);\">\n</div>\n<div class=\"squircle\" style=\"box-shadow: var(--elevation-small);\">\n</div>\n<div class=\"circle\" style=\"box-shadow: var(--elevation-small);\">\n</div>\n","example":"base/elevation/example/elevation-small","section":"01-elevations"},{"name":"Elevation XLarge","description":"Elevation xlarge class","order":6,"classes":["var(--elevation-xlarge)",".v-elevation-xlarge"],"tags":[],"markup":"\n<div class=\"box\" style=\"box-shadow: var(--elevation-xlarge);\">\n</div>\n<div class=\"squircle\" style=\"box-shadow: var(--elevation-xlarge);\">\n</div>\n<div class=\"circle\" style=\"box-shadow: var(--elevation-xlarge);\">\n</div>\n","example":"base/elevation/example/elevation-xlarge","section":"01-elevations"},{"name":"Elevation XSmall","description":"Elevation xsmall class","order":2,"classes":["var(--elevation-xsmall)",".v-elevation-xsmall"],"tags":[],"markup":"\n<div class=\"box\" style=\"box-shadow: var(--elevation-xsmall);\">\n</div>\n<div class=\"squircle\" style=\"box-shadow: var(--elevation-xsmall);\">\n</div>\n<div class=\"circle\" style=\"box-shadow: var(--elevation-xsmall);\">\n</div>\n","example":"base/elevation/example/elevation-xsmall","section":"01-elevations"},{"name":"Elevation XXLarge","description":"Elevation xxlarge class","order":7,"classes":["var(--elevation-xxlarge)",".v-elevation-xxlarge"],"tags":[],"markup":"\n<div class=\"box\" style=\"box-shadow: var(--elevation-xxlarge);\">\n</div>\n<div class=\"squircle\" style=\"box-shadow: var(--elevation-xxlarge);\">\n</div>\n<div class=\"circle\" style=\"box-shadow: var(--elevation-xxlarge);\">\n</div>\n","example":"base/elevation/example/elevation-xxlarge","section":"01-elevations"}],"flex":[{"name":"Flex Default","description":"Default flex class","order":0,"classes":[".v-flex"],"tags":[],"markup":"\n<div class=\"v-flex v-gap-4\">\n  This is a flex container\n</div>\n","example":"base/flex/example/flex-default","section":"01-flex-displays"},{"name":"Inline Flex","description":"Inline flex class","order":1,"classes":[".v-flex-inline"],"tags":[],"markup":"\n<div class=\"v-flex-inline\">\n  This is an inline-flex container\n</div>\n","example":"base/flex/example/inline-flex","section":"02-inline-flex"},{"name":"Flex Column Reverse","description":"Flex column reverse class","order":3,"classes":[".v-flex-col-reverse"],"tags":[],"markup":"\n<div class=\"v-flex v-flex-col-reverse v-gap-4\">\n  <span>\n    first\n  </span>\n  <span>\n    second\n  </span>\n  <span>\n    third\n  </span>\n</div>\n","example":"base/flex/example/flex-column-reverse","section":"03-flex-columns"},{"name":"Flex Column","description":"Flex column class","order":2,"classes":[".v-flex-col"],"tags":[],"markup":"\n<div class=\"v-flex v-flex-col v-gap-4\">\n  <span>\n    first\n  </span>\n  <span>\n    second\n  </span>\n  <span>\n    third\n  </span>\n</div>\n","example":"base/flex/example/flex-column","section":"03-flex-columns"},{"name":"Flex Row Reverse","description":"Flex row reverse class","order":5,"classes":[".v-flex-row-reverse"],"tags":[],"markup":"\n<div class=\"v-flex v-flex-row-reverse v-gap-4\">\n  <span>\n    first\n  </span>\n  <span>\n    second\n  </span>\n  <span>\n    third\n  </span>\n</div>\n","example":"base/flex/example/flex-row-reverse","section":"04-flex-row"},{"name":"Flex Row","description":"Flex row class","order":4,"classes":[".v-flex-row"],"tags":[],"markup":"\n<div class=\"v-flex v-flex-row v-gap-4\">\n  <span>\n    first\n  </span>\n  <span>\n    second\n  </span>\n  <span>\n    third\n  </span>\n</div>\n","example":"base/flex/example/flex-row","section":"04-flex-row"},{"name":"Flex No Wrap","description":"Flex No Wrap class","order":8,"classes":[".v-flex-nowrap"],"tags":[],"markup":"\n<div class=\"v-surface v-flex v-flex-row v-flex-nowrap v-gap-4\" style=\"--v-surface-border-size: 2px; --v-surface-inline-size: 150px\">\n  <span>\n    first\n  </span>\n  <span>\n    second\n  </span>\n  <span>\n    third\n  </span>\n  <span>\n    fourth\n  </span>\n  <span>\n    fifth\n  </span>\n  <span>\n    sixth\n  </span>\n</div>\n","example":"base/flex/example/flex-no-wrap","section":"05-flex-wrap"},{"name":"Flex Wrap Reverse","description":"Flex wrap reverse class","order":7,"classes":[".v-flex-wrap-reverse"],"tags":[],"markup":"\n<div class=\"v-surface v-flex v-flex-row v-flex-wrap-reverse v-gap-4\" style=\"--v-surface-border-size: 2px; --v-surface-inline-size: 150px\">\n  <span>\n    first\n  </span>\n  <span>\n    second\n  </span>\n  <span>\n    third\n  </span>\n  <span>\n    fourth\n  </span>\n  <span>\n    fifth\n  </span>\n  <span>\n    sixth\n  </span>\n</div>\n","example":"base/flex/example/flex-wrap-reverse","section":"05-flex-wrap"},{"name":"Flex Wrap","description":"Flex wrap class","order":6,"classes":[".v-flex-wrap"],"tags":[],"markup":"\n<div class=\"v-surface v-flex v-flex-row v-flex-wrap v-gap-4\" style=\"--v-surface-border-size: 2px; --v-surface-inline-size: 150px\">\n  <span>\n    first\n  </span>\n  <span>\n    second\n  </span>\n  <span>\n    third\n  </span>\n  <span>\n    fourth\n  </span>\n  <span>\n    fifth\n  </span>\n  <span>\n    sixth\n  </span>\n</div>\n","example":"base/flex/example/flex-wrap","section":"05-flex-wrap"},{"name":"Flex Grow 0","description":"Flex Grow 0 class","order":10,"classes":[".v-flex-grow-0"],"tags":[],"markup":"\n<div class=\"v-surface v-flex v-flex-row v-flex-wrap v-gap-4\" style=\"--v-surface-border-size: 2px;\">\n  <span class=\"v-flex-grow-0\">\n    first\n  </span>\n  <span class=\"v-flex-grow\">\n    second\n  </span>\n  <span class=\"v-flex-grow\">\n    third\n  </span>\n  <span class=\"v-flex-grow\">\n    fourth\n  </span>\n</div>\n","example":"base/flex/example/flex-grow-0","section":"06-flex-grow"},{"name":"Flex Grow","description":"Flex Grow class","order":9,"classes":[".v-flex-grow"],"tags":[],"markup":"\n<div class=\"v-surface v-flex v-flex-row v-flex-wrap v-gap-4\" style=\"--v-surface-border-size: 2px;\">\n  <span class=\"v-flex-grow\">\n    first\n  </span>\n  <span>\n    second\n  </span>\n  <span>\n    third\n  </span>\n  <span>\n    fourth\n  </span>\n</div>\n","example":"base/flex/example/flex-grow","section":"06-flex-grow"},{"name":"Flex Shrink 0","description":"Flex Shrink 0 class","order":12,"classes":[".v-flex-shrink-0"],"tags":[],"markup":"\n<div class=\"v-surface v-flex v-flex-row v-flex-wrap v-gap-4\" style=\"--v-surface-border-size: 2px;\">\n  <span class=\"v-flex-shrink-0\">\n    first\n  </span>\n  <span class=\"v-flex-shrink\">\n    second\n  </span>\n  <span class=\"v-flex-shrink\">\n    third\n  </span>\n  <span class=\"v-flex-shrink\">\n    fourth\n  </span>\n</div>\n","example":"base/flex/example/flex-shrink-0","section":"07-flex-shrink"},{"name":"Flex Shrink","description":"Flex Shrink class","order":11,"classes":[".v-flex-shrink"],"tags":[],"markup":"\n<div class=\"v-surface v-flex v-flex-row v-flex-wrap v-gap-4\" style=\"--v-surface-border-size: 2px;\">\n  <span class=\"v-flex-shrink\">\n    first\n  </span>\n  <span class=\"v-flex-grow\">\n    second\n  </span>\n  <span class=\"v-flex-grow\">\n    third\n  </span>\n  <span class=\"v-flex-grow\">\n    fourth\n  </span>\n</div>\n","example":"base/flex/example/flex-shrink","section":"07-flex-shrink"},{"name":"Flex Align Content Around","description":"Flex align content space-around class","order":17,"classes":[".v-align-content-around"],"tags":[],"markup":"\n<div class=\"v-surface v-flex v-flex-row v-flex-wrap v-align-content-around v-gap-4\" style=\"--v-surface-border-size: 2px; block-size: 80px\">\n  <div>\n    first\n  </div>\n  <div>\n    second\n  </div>\n  <div>\n    third\n  </div>\n  <div>\n    fourth\n  </div>\n</div>\n","example":"base/flex/example/flex-align-content-around","section":"08-flex-align"},{"name":"Flex Align Content Center","description":"Flex align content center class","order":13,"classes":[".v-align-content-center"],"tags":[],"markup":"\n<div class=\"v-surface v-flex v-flex-row v-flex-wrap v-align-content-center v-gap-4\" style=\"--v-surface-border-size: 2px; block-size: 80px\">\n  <div>\n    first\n  </div>\n  <div>\n    second\n  </div>\n  <div>\n    third\n  </div>\n  <div>\n    fourth\n  </div>\n</div>\n","example":"base/flex/example/flex-align-content-center","section":"08-flex-align"},{"name":"Flex Align Content End","description":"Flex align content end class","order":15,"classes":[".v-align-content-end"],"tags":[],"markup":"\n<div class=\"v-surface v-flex v-flex-row v-flex-wrap v-align-content-end v-gap-4\" style=\"--v-surface-border-size: 2px; block-size: 80px\">\n  <div>\n    first\n  </div>\n  <div>\n    second\n  </div>\n  <div>\n    third\n  </div>\n  <div>\n    fourth\n  </div>\n</div>\n","example":"base/flex/example/flex-align-content-end","section":"08-flex-align"},{"name":"Flex Align Content Evenly","description":"Flex align content space-evenly class","order":18,"classes":[".v-align-content-evenly"],"tags":[],"markup":"\n<div class=\"v-surface v-flex v-flex-row v-flex-wrap v-align-content-evenly v-gap-4\" style=\"--v-surface-border-size: 2px; block-size: 80px\">\n  <div>\n    first\n  </div>\n  <div>\n    second\n  </div>\n  <div>\n    third\n  </div>\n  <div>\n    fourth\n  </div>\n</div>\n","example":"base/flex/example/flex-align-content-evenly","section":"08-flex-align"},{"name":"Flex Align Content Space Between","description":"Flex align content space-between class","order":16,"classes":[".v-align-content-between"],"tags":[],"markup":"\n<div class=\"v-surface v-flex v-flex-row v-flex-wrap v-align-content-between v-gap-4\" style=\"--v-surface-border-size: 2px; block-size: 80px\">\n  <div>\n    first\n  </div>\n  <div>\n    second\n  </div>\n  <div>\n    third\n  </div>\n  <div>\n    fourth\n  </div>\n</div>\n","example":"base/flex/example/flex-align-content-space-between","section":"08-flex-align"},{"name":"Flex Align Content Start","description":"Flex align content start class","order":14,"classes":[".v-align-content-start"],"tags":[],"markup":"\n<div class=\"v-surface v-flex v-flex-row v-flex-wrap v-align-content-start v-gap-4\" style=\"--v-surface-border-size: 2px; block-size: 80px\">\n  <div>\n    first\n  </div>\n  <div>\n    second\n  </div>\n  <div>\n    third\n  </div>\n  <div>\n    fourth\n  </div>\n</div>\n","example":"base/flex/example/flex-align-content-start","section":"08-flex-align"},{"name":"Flex Align Items Baseline","description":"Flex align items baseline class","order":22,"classes":[".v-align-items-baseline"],"tags":[],"markup":"\n<div class=\"v-surface v-flex v-flex-row v-flex-wrap v-align-items-baseline v-gap-4\" style=\"--v-surface-border-size: 2px; block-size: 80px\">\n  <div>\n    first\n  </div>\n  <div>\n    second\n  </div>\n  <div>\n    third\n  </div>\n  <div>\n    fourth\n  </div>\n</div>\n","example":"base/flex/example/flex-align-items-baseline","section":"08-flex-align"},{"name":"Flex Align Items Center","description":"Flex align items center class","order":21,"classes":[".v-align-items-center"],"tags":[],"markup":"\n<div class=\"v-surface v-flex v-flex-row v-flex-wrap v-align-items-center v-gap-4\" style=\"--v-surface-border-size: 2px; block-size: 80px\">\n  <div>\n    first\n  </div>\n  <div>\n    second\n  </div>\n  <div>\n    third\n  </div>\n  <div>\n    fourth\n  </div>\n</div>\n","example":"base/flex/example/flex-align-items-center","section":"08-flex-align"},{"name":"Flex Align Items End","description":"Flex align items end class","order":20,"classes":[".v-align-items-end"],"tags":[],"markup":"\n<div class=\"v-surface v-flex v-flex-row v-flex-wrap v-align-items-end v-gap-4\" style=\"--v-surface-border-size: 2px; block-size: 80px\">\n  <div>\n    first\n  </div>\n  <div>\n    second\n  </div>\n  <div>\n    third\n  </div>\n  <div>\n    fourth\n  </div>\n</div>\n","example":"base/flex/example/flex-align-items-end","section":"08-flex-align"},{"name":"Flex Align Items Start","description":"Flex align items start class","order":19,"classes":[".v-align-items-start"],"tags":[],"markup":"\n<div class=\"v-surface v-flex v-flex-row v-flex-wrap v-align-items-start v-gap-4\" style=\"--v-surface-border-size: 2px; block-size: 80px\">\n  <div>\n    first\n  </div>\n  <div>\n    second\n  </div>\n  <div>\n    third\n  </div>\n  <div>\n    fourth\n  </div>\n</div>\n","example":"base/flex/example/flex-align-items-start","section":"08-flex-align"},{"name":"Flex Align Items Stretch","description":"Flex align items stretch class","order":23,"classes":[".v-align-items-stretch"],"tags":[],"markup":"\n<div class=\"v-surface v-flex v-flex-row v-flex-wrap v-align-items-stretch v-gap-4\" style=\"--v-surface-border-size: 2px; block-size: 80px\">\n  <div>\n    first\n  </div>\n  <div>\n    second\n  </div>\n  <div>\n    third\n  </div>\n  <div>\n    fourth\n  </div>\n</div>\n","example":"base/flex/example/flex-align-items-stretch","section":"08-flex-align"},{"name":"Flex Align Self Auto","description":"Flex align self auto class","order":26,"classes":[".v-align-self-auto"],"tags":[],"markup":"\n<div class=\"v-surface v-flex v-flex-row v-gap-4\" style=\"--v-surface-border-size: 2px; block-size: 80px\">\n  <div class=\"v-surface v-alternate v-flex v-align-self-auto\">\n    self\n  </div>\n</div>\n","example":"base/flex/example/flex-align-self-auto","section":"08-flex-align"},{"name":"Flex Align Self Center","description":"Flex align self stretch class","order":27,"classes":[".v-align-self-center"],"tags":[],"markup":"\n<div class=\"v-surface v-flex v-flex-row v-gap-4\" style=\"--v-surface-border-size: 2px; block-size: 80px\">\n  <div class=\"v-surface v-alternate v-flex v-align-self-center\">\n    self\n  </div>\n</div>\n","example":"base/flex/example/flex-align-self-center","section":"08-flex-align"},{"name":"Flex Align Self End","description":"Flex align self center class","order":25,"classes":[".v-align-self-center"],"tags":[],"markup":"\n<div class=\"v-surface v-flex v-flex-row v-gap-4\" style=\"--v-surface-border-size: 2px; block-size: 80px\">\n  <div class=\"v-surface v-alternate v-flex v-align-self-end\">\n    self\n  </div>\n</div>\n","example":"base/flex/example/flex-align-self-end","section":"08-flex-align"},{"name":"Flex Align Self Start","description":"Flex align self start class","order":24,"classes":[".v-align-self-start"],"tags":[],"markup":"\n<div class=\"v-surface v-flex v-flex-row v-gap-4\" style=\"--v-surface-border-size: 2px; block-size: 80px\">\n  <div class=\"v-surface v-alternate v-flex v-align-self-start\">\n    self\n  </div>\n</div>\n","example":"base/flex/example/flex-align-self-start","section":"08-flex-align"},{"name":"Flex Align Self Stretch","description":"Flex align self stretch class","order":28,"classes":[".v-align-self-stretch"],"tags":[],"markup":"\n<div class=\"v-surface v-flex v-flex-row v-gap-4\" style=\"--v-surface-border-size: 2px; block-size: 80px\">\n  <div class=\"v-surface v-alternate v-flex v-align-self-stretch\">\n    self\n  </div>\n</div>\n","example":"base/flex/example/flex-align-self-stretch","section":"08-flex-align"},{"name":"Flex Justify Content Around","description":"Flex justify content space-around class","order":33,"classes":[".v-justify-content-around"],"tags":[],"markup":"\n<div class=\"v-surface v-flex v-flex-row v-flex-wrap v-justify-content-around v-gap-4\" style=\"--v-surface-border-size: 2px;\">\n  <div>\n    first\n  </div>\n  <div>\n    second\n  </div>\n  <div>\n    third\n  </div>\n  <div>\n    fourth\n  </div>\n</div>\n","example":"base/flex/example/flex-justify-content-around","section":"09-flex-justify"},{"name":"Flex Justify Content Between","description":"Flex justify content between class","order":32,"classes":[".v-justify-content-between"],"tags":[],"markup":"\n<div class=\"v-surface v-flex v-flex-row v-flex-wrap v-justify-content-between v-gap-4\" style=\"--v-surface-border-size: 2px;\">\n  <div>\n    first\n  </div>\n  <div>\n    second\n  </div>\n  <div>\n    third\n  </div>\n  <div>\n    fourth\n  </div>\n</div>\n","example":"base/flex/example/flex-justify-content-between","section":"09-flex-justify"},{"name":"Flex Justify Content Center","description":"Flex justify content center class","order":31,"classes":[".v-justify-content-center"],"tags":[],"markup":"\n<div class=\"v-surface v-flex v-flex-row v-flex-wrap v-justify-content-center v-gap-4\" style=\"--v-surface-border-size: 2px;\">\n  <div>\n    first\n  </div>\n  <div>\n    second\n  </div>\n  <div>\n    third\n  </div>\n  <div>\n    fourth\n  </div>\n</div>\n","example":"base/flex/example/flex-justify-content-center","section":"09-flex-justify"},{"name":"Flex Justify Content End","description":"Flex justify content end class","order":30,"classes":[".v-justify-content-end"],"tags":[],"markup":"\n<div class=\"v-surface v-flex v-flex-row v-flex-wrap v-justify-content-end v-gap-4\" style=\"--v-surface-border-size: 2px;\">\n  <div>\n    first\n  </div>\n  <div>\n    second\n  </div>\n  <div>\n    third\n  </div>\n  <div>\n    fourth\n  </div>\n</div>\n","example":"base/flex/example/flex-justify-content-end","section":"09-flex-justify"},{"name":"Flex Justify Content Evenly","description":"Flex justify content space-evenly class","order":34,"classes":[".v-justify-content-evenly"],"tags":[],"markup":"\n<div class=\"v-surface v-flex v-flex-row v-flex-wrap v-justify-content-evenly v-gap-4\" style=\"--v-surface-border-size: 2px;\">\n  <div>\n    first\n  </div>\n  <div>\n    second\n  </div>\n  <div>\n    third\n  </div>\n  <div>\n    fourth\n  </div>\n</div>\n","example":"base/flex/example/flex-justify-content-evenly","section":"09-flex-justify"},{"name":"Flex Justify Content Start","description":"Flex justify content start class","order":29,"classes":[".v-justify-content-start"],"tags":[],"markup":"\n<div class=\"v-surface v-flex v-flex-row v-flex-wrap v-justify-content-start v-gap-4\" style=\"--v-surface-border-size: 2px;\">\n  <div>\n    first\n  </div>\n  <div>\n    second\n  </div>\n  <div>\n    third\n  </div>\n  <div>\n    fourth\n  </div>\n</div>\n","example":"base/flex/example/flex-justify-content-start","section":"09-flex-justify"}],"sizes":[{"name":"Responsive","description":"These size variables can be applied to any css property that needs to resize when the component is viewed on a mobile screen.<br /> These variables are defined based on the <code class=\"w-code v-badge v-badge-subtle\">var(--theme-responsive-factor)</code>, which serves as a multiplier when the screen drops below the mobile breakpoint.<br /> This interaction has been introduced to enable bigger touch areas on mobile devices.","order":0,"classes":["var(--size-responsive-20)"],"tags":[],"markup":"\n<div class=\"v-surface\" style=\"padding: var(--size-responsive-20); background-color: var(--palette-default-surface-highlight)\">\n  Responsive padding\n</div>\n","example":"base/sizes/example/responsive","section":"01-sizes"},{"name":"Scalable","description":"These size variables can be applied to any spacing-related css property like padding or margin. <br /> The scalable sizes are intended to allow increased/decreased whitespace across components.<br /> Please note the scalable size variables are also multiplied by the <code class=\"w-code v-badge v-badge-subtle\">var(--theme-responsive-factor)</code> when the screen drops below the mobile breakpoint.","order":1,"classes":["var(--size-scalable-5)"],"tags":[],"markup":"\n<div class=\"v-surface\" style=\"padding: var(--size-scalable-5); background-color: var(--palette-default-surface-highlight)\">\n  Scalable padding\n</div>\n","example":"base/sizes/example/scalable","section":"01-sizes"},{"name":"Rounded","description":"These sizes are specific for rounded corners or border-radius. <br /> There are 7 rounded sizes available, defined based on the <code class=\"w-code v-badge v-badge-subtle\">var(--theme-border-radius)</code> value provided.<br /> Please note the rounded size variables also respond to the <code class=\"w-code v-badge v-badge-subtle\">var(--theme-responsive-factor)</code> on mobile screens.","order":2,"classes":["var(--size-rounded-none)","var(--size-rounded-small)","var(--size-rounded-medium)","var(--size-rounded-large)","var(--size-rounded-xlarge)","var(--size-rounded-complete)","var(--size-rounded-pill)"],"tags":[],"markup":"\n<div class=\"v-surface\" style=\"border-radius: var(--size-rounded-medium); background-color: var(--palette-default-surface-highlight)\">\n  Rounded corners\n</div>\n","example":"base/sizes/example/rounded","section":"02-shapes"}],"spacing":[{"name":"Column Gap","description":"Column gGap utility class for flex row elements. [1-48]","order":1,"classes":[".v-col-gap-20"],"tags":[],"markup":"\n<div class=\"v-flex\">\n  <div class=\"v-flex v-col-gap-20\" style=\"background: var(--palette-default-surface-highlight)\">\n    <div class=\"v-flex v-flex-col\">\n      <div class=\"v-surface item-card\">Item 1</div>\n      <div class=\"v-surface item-card\">Item 3</div>\n    </div>\n    <div class=\"v-flex v-flex-col\">\n      <div class=\"v-surface item-card\">Item 2</div>\n      <div class=\"v-surface item-card\">Item 4</div>\n    </div>\n  </div>\n</div>\n","example":"base/spacing/example/column-gap","section":"01-gap"},{"name":"Default Gap","description":"Gap utility class for flex elements. [1-48]","order":0,"classes":[".v-gap-20"],"tags":[],"markup":"\n<div class=\"v-flex\">\n  <div class=\"v-flex v-gap-20\" style=\"background: var(--palette-default-surface-highlight)\">\n    <div class=\"v-surface item-card\">Item 1</div>\n    <div class=\"v-surface item-card\">Item 2</div>\n  </div>\n</div>","example":"base/spacing/example/default-gap","section":"01-gap"},{"name":"Gap Inherit","description":"Inherits row-gap and/or column-gap from parent value. [inherit]","order":4,"classes":[".v-gap-inherit",".v-row-gap-inherit",".v-col-gap-inherit"],"tags":[],"markup":"\n<div class=\"v-flex\">\n  <ul class=\"user-list v-gap-8\" style=\"background: var(--palette-default-surface-highlight)\">\n    <li class=\"user-card v-gap-inherit\">\n      <span aria-label=\"Alex Miller\" class=\"v-avatar v-avatar-small\">\n        AM\n      </span>\n      Alex Miller\n    </li>\n    <li class=\"user-card v-gap-inherit\">\n      <span aria-label=\"Rosetta Jones\" class=\"v-avatar v-avatar-small\">\n        RJ\n      </span>\n      Rosetta