Pricing

CSS Variables

Table of Contents
  1. Global Variables
  2. Blocks Variables
  3. Other Variables

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

Global Variables

View 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

View Tabs Block 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?
Yes No