There is two kind of properties you might use to allow users to edit colors and/or fonts.


<color variable="$bg-color" default="rgba(255, 255, 255, 1)" kind="background"/>

This creates a variable for a block called $bg-color which has a default value of white when it's added to the page. kind="background" tells the user what kind of property this is. See a full list of available kinds. Do you want to use a property color for an SVG image? Check out our SVG docs.

You can use the variable in the block CSS code

.wrapper {
     background-color: $bg-color;


You can only use variables on single line CSS items. Example:

.wrapper {

     <!-- Does not work -->
     border: 1px solid $bg-color;

     <!-- Works -->
     border-width: 1px;
     border-style: solid;
     border-color: $bg-color;


As a workaround you might use CSS custom properties (variables):

.wrapper {
     --bg: $bg-color;

     border: 1px solid var(--bg);


<font mixin="paragraph" default="sf-paragraph" kind="paragraph" color="rgba(255, 255, 255, 1)"/>

This creates a mixin called paragraph. The default value will be the paragraph style defined within Appearance. Se a full list of available default text styles. Once it has retrieved the sf-paragraph style it overrides the font color and sets it to white.

This is how you use it with CSS:

h1 {
     @include paragraph();


<switch variable="$showButton" on="block" off="none" kind="button" default="true" />

This creates a variable which might have two different states: block or none. Since default is set to true it will have the on-value when the block is added to a page. 

This is how you use it with CSS:

.button {
     display: $showButton;