CSS Variables

All Ghost Kit blocks and extensions use CSS Variables, so you can easily change styles for your project.

Global Variables

You can change globally defined variables that is used in many blocks. Example – change globally defined border-radius and transition-duration:

:root {
  --gkt-border-radius: 5px;
  --gkt-transition-duration: .5s;

Blocks Variables

Each block has its own variables that you may change individually. Example – change Tabs block border size and color and Pills block active button background color:

.ghostkit-tabs {
  --gkt-tabs--button__border-width: 4px;
  --gkt-tabs--button__border-color: red;

  --gkt-tabs-pills--button-active__background-color: red;

Other Variables

Was this page helpful?