ui kit

Colours

var(--white)
var(--light-green)
var(--green)
var(--light-grey)
var(--grey)
var(--black)
var(--light-beige)
var(--beige)
var(--dark-beige)
var(--light-purple)
var(--purple-1)
var(--purple-2)
var(--purple-3)
var(--dark-purple)

Titles

Titles font size can be edited in the theme settings TYPOGRAPHY for desktop and mobile.

.text-fromage:

Lorem ipsum dolor sit amet

h1, .h1:

Lorem ipsum dolor sit amet

h2, .h2:

Lorem ipsum dolor sit amet

h3, .h3:

Lorem ipsum dolor sit amet

h4, .h4:

Lorem ipsum dolor sit amet

h5, .h5:
Lorem ipsum dolor sit amet
h6, .h6:
Lorem ipsum dolor sit amet

Buttons, Hover effects & Links

Primary and Secondary Button colors can be edited in theme settings

link button primary link button primary no-underline
link button secondary link button secondary no-underline

button-icon-circle

background-color: var(--dark-purple)

button-icon-circle

background-color: var(--purple-3)
background-color: var(--purple-3)
background-color: var(--light-purple)
16.09oz
33.8oz

Accordion

Block Content 1: 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.
Block Content 2: 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.
Block Content 3: 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.

Swiper

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5