Colors

#FFFFFF
var(--wp--preset--color--default-1)
default-1
#F8F8F8
var(--wp--preset--color--default-2)
default-2
#E3E3E3
var(--wp--preset--color--default-3)
default-3
#CCCCCC
var(--wp--preset--color--default-4)
default-4
#626262
var(--wp--preset--color--default-5)
default-5
#121816
var(--wp--preset--color--default-6)
default-6
#12CF71
var(--wp--preset--color--primary)
Primary
#222222
var(--wp--preset--color--secondary)
Secondary
#02150B
var(--wp--preset--color--accent-1)
accent-1
#FFC526
var(--wp--preset--color--accent-2)
accent-2
#FF4726
var(--wp--preset--color--accent-3)
accent-3
rgba(248, 248, 248, 0.1)
var(--wp--preset--color--overlay-1)
overlay-1
rgba(18, 207, 113, 0.2)
var(--wp--preset--color--overlay-2)
overlay-2
rgba(255, 197, 38, 0.2)
var(--wp--preset--color--overlay-3)
overlay-3
rgba(255, 71, 38, 0.2)
var(--wp--preset--color--overlay-4)
overlay-4
rgba(255, 71, 38, 0.2)
var(--wp--preset--color--gradients-1)
gradients-1
rgba(255, 71, 38, 0.2)
var(--wp--preset--color--gradients-2)
gradients-2

02 Typography

Font Families

Aa
Font name: 'DMSans', sans-serif
Weights:
300,
400,
500,
600,
700,
Aa
Font name: 'Poppins', sans-serif
Weights:
400,
500,
600,
700,
800,

Headings

H1 - This is hero text

H2 - This is a large heading

H3 - This is a standard heading

H4 - This is a medium heading

H5 - This is a medium heading
H6 - This is a small heading

Paragraphs / semi bold/ Links

Lorem ipsum odor amet, consectetuer adipiscing elit. Nec mi integer natoque faucibus turpis aptent class nulla. Laoreet sem sed dolor ut nascetur quisque turpis. Massa blandit efficitur aenean platea erat turpis praesent tellus. Habitasse donec habitasse; semper himenaeos lobortis metus. Efficitur nibh tincidunt volutpat mollis ultricies amet feugiat ultrices. Placerat integer euismod fusce egestas posuere.

Lorem ipsum odor amet, consectetuer adipiscing elit. Nec mi integer natoque faucibus turpis aptent class nulla. Laoreet sem sed dolor ut nascetur quisque turpis. Massa blandit efficitur aenean platea erat turpis praesent tellus. Habitasse donec habitasse; semper himenaeos lobortis metus. Efficitur nibh tincidunt volutpat mollis ultricies amet feugiat ultrices. Placerat integer euismod fusce egestas posuere.

Lorem ipsum odor amet, consectetuer adipiscing elit. Nec mi integer natoque faucibus turpis aptent class nulla. Laoreet sem sed dolor ut nascetur quisque turpis. Massa blandit efficitur aenean platea erat turpis praesent tellus. Habitasse donec habitasse; semper himenaeos lobortis metus. Efficitur nibh tincidunt volutpat mollis ultricies amet feugiat ultrices. Placerat integer euismod fusce egestas posuere.

List

This is an example of a bulleted list:
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
This is an example of a numbered list:
  1. Lorem ipsum
  2. Lorem ipsum
  3. Lorem ipsum
  4. Lorem ipsum

Blockquotes

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua”

Popups

Contact form 7

- please ensure you have all required fields in the form: - checkbox - dropdown - submit button - name field - email field - phone field - message field

    Grid

    .container
    .container--fluid.container

    Grid: basic

    .col-12
    .col-6
    .col-6
    .col-4
    .col-4
    .col-4
    .col-3
    .col-3
    .col-3
    .col-3

    Grid: responsive - SM breakpoint.

    .col-sm-12
    .col-sm-6
    .col-sm-6
    .col-sm-4
    .col-sm-4
    .col-sm-4
    .col-sm-3
    .col-sm-3
    .col-sm-3
    .col-sm-3

    Grid: responsive - variable breakpoints.

    .col-sm-12
    .col-sm-12.col-xl-6
    .col-sm-12.col-xl-6
    .col-sm-4.col-lg-3
    .col-sm-4.col-lg-3
    .col-sm-4.col-lg-3
    .col-sm-6.col-md-3
    .col-sm-6.col-md-3
    .col-sm-6.col-md-3
    .col-sm-6.col-md-3

    Block heading

    This markup is outputted by the inc/helpers/render-content-wysiwig.php template. Spacing and style are same as render-title-textarea.php

    If you've added styles correectly below is readable and nice text

    the label

    This block is supposed to have:

    • the label styling
    • the content styling
    • h1, h2, h3, h4, h5, h6 styling
    • blockquote styling
    • all other things from the wysiwyg editor
    • Spacings for sure
    • and all similar part on all over the website should use one of these 2 functions to match the global styles
    lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.