Background Color

2nd. Background Color

3rd. Background Color

H1 Heading – XXL Size

H2 Heading – XL Size

H3 Heading – LG Size

H4 Heading – MD Size

H5 Heading – Body Text Size
H6 Heading – Body Text Size

Eyebrow Heading

I’m a regular text paragraph, enjoy me… Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.

  • Icon List item 1
  • Icon List item 2
  • Icon List item 3
Global Button Style

This is regular body text (paragraph) and here is a link

  • Strongest Text Color
  • Strong Text Color
  • Medium Text Color
  • Subtle Text Color

Kadence Color Palette variables:

Accents:

var(--global-palette1)

var(--global-palette2)

var(--global-palette10)

Contrast:

var(--global-palette3)

var(--global-palette4)

var(--global-palette5)

var(--global-palette6)

Base:

var(--global-palette7)

var(--global-palette8)

var(--global-palette9)

Notices:

var(--global-palette11)

var(--global-palette12)

var(--global-palette13)

var(--global-palette14)

var(--global-palette15)

Subtle Background Color

Lighter Background Color

H1 Line Height Check
please make your adjustments

H2 Line Height Check
please make your adjustments

H3 Line Height Check
please make your adjustments

H4 Line Height Check
please make your adjustments

H5 Line Height Check
please make your adjustments
H6 Line Height Check
please make your adjustments

Kadence default clamp values for font t-shirt sizes:

:root {
  --global-kb-font-size-sm: clamp(0.8rem, 0.73rem + 0.217vw, 0.9rem);
	
  --global-kb-font-size-md: clamp(1.1rem, 0.995rem + 0.326vw, 1.25rem);
	
  --global-kb-font-size-lg: clamp(1.75rem, 1.576rem + 0.543vw, 2rem);
	
  --global-kb-font-size-xl: clamp(2.25rem, 1.728rem + 1.63vw, 3rem);
	
  --global-kb-font-size-xxl: clamp(2.5rem, 1.456rem + 3.26vw, 4rem);
	
  --global-kb-font-size-xxxl: clamp(2.75rem, 0.489rem + 7.065vw, 6rem);
}

SM –global-kb-font-size-sm


MD –global-kb-font-size-md


LG –global-kb-font-size-lg


XL –global-kb-font-size-xl


2XL –global-kb-font-size-xxl


3XL –global-kb-font-size-xxxl

Global Cards Styling:

Card Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

I’m a button

Card Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.

I’m a button

Card Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

I’m a button

Content Max Width

Kadence default spacing tokens (T-shirt sizes)

:root {

  --global-kb-spacing-sm: clamp(1.25rem, 1.05rem + 0.6vw, 1.75rem);

  --global-kb-spacing-md: clamp(1.5rem, 1.25rem + 0.8vw, 2.25rem);
  
  --global-kb-spacing-lg: clamp(2rem, 1.6rem + 1vw, 2.75rem);
       
  --global-kb-spacing-xl: clamp(2.75rem, 2.2rem + 1.4vw, 3.75rem);
  
  --global-kb-spacing-xxl: clamp(3.75rem, 3rem + 2vw, 5rem);  
}

SM –global-kb-spacing-sm


MD –global-kb-spacing-md


LG –global-kb-spacing-lg


XL –global-kb-spacing-xl


2XL –global-kb-spacing-xxl


3XL –global-kb-spacing-xxxl

Global Fluid Spacing

1

2

3

4