Koop Style Guide

Koop Style Guide

Fonts

Lorem ipsum dolor sit amet, Überschrift 1 elitr, sed diam nonumy eirmod tempor

Lorem ipsum dolor sit amet, Überschrift 2 elitr, sed diam nonumy eirmod tempor

Lorem ipsum dolor sit amet, Überschrift 1 elitr, sed diam nonumy eirmod tempor

Normaler Text - Lorem ipsum dolor sit amet, elitr, sed diam nonumy eirmod tempornuyan tesaur.

Quote Text Klein
Quote text gross

Farben

Buttons & Links

Buttons

Links

Following links are used. Without Color. In Bold or Normal.

zur Anmeldung

Notion Format: Link

zur Anmeldung Bold

Notion Format: Link, Bold

Callout Modules

Important: Use only one Callout per row. Not 2 below each others. Because Min Height of Callout is set to 100%, to make sure they always have the same height if they are within multiple columns.

image

Callouts with Icons

icon
Callout with Icon, Green

Das Steuerrad des Unternehmens – die Stimmrechte – liegt bei aktiven Unternehmer:innen.

icon
Callout with Icon, Blue

Das Steuerrad des Unternehmens – die Stimmrechte – liegt bei aktiven Unternehmer:innen.

icon
Callout with Icon, Purple

Das Steuerrad des Unternehmens – die Stimmrechte – liegt bei aktiven Unternehmer:innen.

More Colors

Horizontal Callouts - With lines

icon
Hinweis: Simple Callout with line - White

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

icon
Hinweis: Simple Callout with line - Gray

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

icon
Hinweis: Simple Callout with line - Red

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

icon
Hinweis 2: Simple Callout with line - Yellow

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

Toggles

H1 Toggle

H2 Toggle

H3 Toggle

Backgrounds

If one of these colors as a background of text is used, section will be fullwidth.

Green background

To create a full width Background follow these steps

  1. Create a Callout Module
  2. Choose one of the colors defined in this section
  3. Choose Turn intoText

Blue background

To create a full width Background follow these steps

  1. Create a Callout Module
  2. Choose one of the colors defined in this section
  3. Choose Turn intoText

Yellow background

To create a full width Background follow these steps

  1. Create a Callout Module
  2. Choose one of the colors defined in this section
  3. Choose Turn intoText

Grey background

To create a full width Background follow these steps

  1. Create a Callout Module
  2. Choose one of the colors defined in this section
  3. Choose Turn intoText