DE

CC 2.1 Style guide and CSS classes

Button Presets

Button styling is set directly via the CSS CLASS: is-style-big-link and is-style-big-link-invert on the parent container of a button block. Icons can be selected in the button settings of the block.

Block Editor

With Greyd, youโ€™re using the WordPress Block Editor with additional features and optimizations. Creating professional websites has never been easier!

Global Styles

Full control. Minimal effort. Specify colors, shapes, and fonts for your entire website centrally. From buttons to forms, all elements automatically adapt to your styles.

Full Site Editing

Headers, 404 templates, footers, or post templates โ€“ with Greyd.Suite you can customize any part of your website and use all blocks and functions.

First Group

With Greyd, youโ€™re using the WordPress Block Editor with additional features and optimizations. Creating professional websites has never been easier!

Second Group

With Greyd, youโ€™re using the WordPress Block Editor with additional features and optimizations. Creating professional websites has never been easier!

Third Group

With Greyd, youโ€™re using the WordPress Block Editor with additional features and optimizations. Creating professional websites has never been easier!

Media & Text Block

Breaking Class:
Fixed breakpoint at 992px is customizable via CSS directly for the block.
If needed, content padding can set to zero with class no-padding in media and text block

Media and Text

Custom Breakpoint @ bootstrap-md (992px)

Media and Text

Custom Breakpoint @ bootstrap-md (992px)

Table-Block

Directly styled in CSS

Header Header
Column 1 & Row 1 Column 2 & Row 1
Column 1 & Row 2 Column 2 & Row 2

Accordion Presets

Directly styled in CSS in 3 Variants.

CSS Class:
is-style-line, is-style-large, is-style-round
The icons are set in the accordion block and adjusted in size if necessary.

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 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 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 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 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 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.

Special Presets

Custom Bullets
Size of the surrounding DIV, the content box and the paragarph styled directly via CSS if the class ret-dot is set in the content box. Color, shape and font size can be selected individually.

1

Headline Lorem ipsum

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.

Style Guide

Build and share your design viewing all affected elements.

Colors

Primary Color

Secondary Color

Tertiary Color

Very Dark

Dark

Medium Dark

Medium Light

Light

Very Light

warm-very-dark

warm-dark

warm-medium-dark

warm-medium-light

warm-light

complementary-color

cold-light-accent-form

cold-very-dark-80

Typography

Heading Font & Sizes

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5
Headline 6

Body Font & Default Size

abcdefghijklmnopqrstuvwxyz1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ

100 – Thin

200 – Extra Light

300 – Light

400 – Regular

500 – Medium

600 – Semi-Bold

700 – Bold

800 – Extra Bold

900 – Black

Layout

Content width

Wide width

Spacing Sizes

Huge 150px – 100px

Large 100px – 50px

Medium 50px – 30px

Small 30px -16px

Tiny 15px – 8px