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-radius $sp-unit * 0.25 Button, Card, Code, Form, Media object, Switch, Tooltip
$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