Jump to main content


Vanilla uses several global placeholders to share common styles between components. These placeholders can be edited via the following placeholder variables, assuming a $sp-unit of 0.5rem.

Placeholder variable Default value Use cases
$bar-thickness 0.1875rem Navigation, notification
$border 1px solid $color-mid-light Card, Code, Form, Search box
$box-shadow 0 1px 1px 0 transparentize($color-x-dark, 0.85), 0 2px 2px -1px transparentize($color-x-dark, 0.85), 0 0 3px 0 transparentize($color-x-dark, 0.8) Card (highlighted), Modal, Notification, Switch
$border-radius 0 Deprecated This variable should not be used or modified, it will be removed in future version of Vanilla.