How to use

Elements

Components

Global modifiers

Global styles

CORRECTIV Design System

One of the top principles of good UX is to keep the interface consistent. CORRECTIV’s design is simple, but attractive. It serves trustbuilding. The thoughtful typography system, spacing, and consistence makes it easy for users to read and to understand.

Elements

  • Elements consist of single widgets.
  • Class names use the plural form.
  • Go to 'global widgets' to add elements.
  • Unlink the widget.
  • Use modifiers to switch between variants.

Components

  • Components consist of multiple widgets.
  • Class names follow this pattern: component__element
  • Go to templates to add components.
  • Use modifiers to switch between variants.

Modifiers

  • Elements: Add modifiers to the field 'CSS class'.
  • Components: Add modifiers to the field'CSS class' of the top-level elements.
  • You can use multiple modifiers.

Inner sections

  • Make sure you select Spaltenabstand: keine Lücke.
  • Always change the tag. Choose 'div'  if none of the tags describes the element.
  • Place content directly into sections for basic layouts.

Don't use inner sections, if you don't have to. ​

Ea rerum illo ut obcaecati autem non velit rerum et saepe officiis? Ab laborum alias ut dolores tempore cum repellendus voluptas aut iure sint ea accusamus voluptatem et assumenda soluta. Qui dolores perferendis in optio autem eos eaque eligendi laborum commodi vel distinctio numquam sed commodi praesentium.
Lorem ipsum dolor
  • Use inner sections for column layouts.

Lorem ipsum

Ea rerum illo ut obcaecati autem non velit rerum et saepe officiis? Ab laborum alias ut dolores tempore.

Lorem ipsum dolor
  • Use inner sections for row layouts. (Add the row modifier to the inner section.)
Ea rerum illo ut obcaecati autem non velit.
Lorem ipsum
dolor

Subtile accordion

Global widget _accordion – subtile
Class accordions
Modifier –

Lorem ipsum dolor sit amet. In accusamus nobis est tempore galisum quo unde saepe ad iste facilis quo pariatur iste aut nemo voluptas eos veritatis galisum. Ad eligendi sunt rem beatae numquam ea obcaecati rerum.

Lorem ipsum dolor sit amet. In accusamus nobis est tempore galisum quo unde saepe ad iste facilis quo pariatur iste aut nemo voluptas eos veritatis galisum. Ad eligendi sunt rem beatae numquam ea obcaecati rerum.

Lorem ipsum dolor sit amet. In accusamus nobis est tempore galisum quo unde saepe ad iste facilis quo pariatur iste aut nemo voluptas eos veritatis galisum. Ad eligendi sunt rem beatae numquam ea obcaecati rerum.

Global widget_accordion – subtile, icon, subhead
Classaccordions
Modifier–

Lorem ipsum dolor sit amet. In accusamus nobis est tempore galisum quo unde saepe ad iste facilis quo pariatur iste aut nemo voluptas eos veritatis galisum. Ad eligendi sunt rem beatae numquam ea obcaecati rerum.

Lorem ipsum dolor sit amet. In accusamus nobis est tempore galisum quo unde saepe ad iste facilis quo pariatur iste aut nemo voluptas eos veritatis galisum. Ad eligendi sunt rem beatae numquam ea obcaecati rerum.

Lorem ipsum dolor sit amet. Voluptatem nostrum aut perspiciatis placeat aut nulla harum vel deserunt voluptates eos architecto quisquam? Sit nihil odio et obcaecati corrupti in esse sint. Ab quibusdam beatae aut quos neque non internos eveniet eos deserunt laboriosam et voluptas nostrum est fuga voluptas ut reprehenderit nihil.

Global widget_accordion – subtile, icons, subhead
Classaccordions
Modifieralign

Lorem ipsum dolor sit amet. In accusamus nobis est tempore galisum quo unde saepe ad iste facilis quo pariatur iste aut nemo voluptas eos veritatis galisum. Ad eligendi sunt rem beatae numquam ea obcaecati rerum.

Lorem ipsum dolor sit amet. In accusamus nobis est tempore galisum quo unde saepe ad iste facilis quo pariatur iste aut nemo voluptas eos veritatis galisum. Ad eligendi sunt rem beatae numquam ea obcaecati rerum.

Lorem ipsum dolor sit amet. Voluptatem nostrum aut perspiciatis placeat aut nulla harum vel deserunt voluptates eos architecto quisquam? Sit nihil odio et obcaecati corrupti in esse sint. Ab quibusdam beatae aut quos neque non internos eveniet eos deserunt laboriosam et voluptas nostrum est fuga voluptas ut reprehenderit nihil.

  • This modifier will align title and content.

Boxed accordion

Global widget_accordion – boxed
Classaccordions
Modifierboxed

Lorem ipsum dolor sit amet. Voluptatem nostrum aut perspiciatis placeat aut nulla harum vel deserunt voluptates eos architecto quisquam? Sit nihil odio et obcaecati corrupti in esse sint. Ab quibusdam beatae aut quos neque non internos eveniet eos deserunt laboriosam et voluptas nostrum est fuga voluptas ut reprehenderit nihil.

Lorem ipsum dolor sit amet. Voluptatem nostrum aut perspiciatis placeat aut nulla harum vel deserunt voluptates eos architecto quisquam? Sit nihil odio et obcaecati corrupti in esse sint. Ab quibusdam beatae aut quos neque non internos eveniet eos deserunt laboriosam et voluptas nostrum est fuga voluptas ut reprehenderit nihil.

Lorem ipsum dolor sit amet. Voluptatem nostrum aut perspiciatis placeat aut nulla harum vel deserunt voluptates eos architecto quisquam? Sit nihil odio et obcaecati corrupti in esse sint. Ab quibusdam beatae aut quos neque non internos eveniet eos deserunt laboriosam et voluptas nostrum est fuga voluptas ut reprehenderit nihil.

Horizontal avatar

Global widget_avatar – horizontal
Classavatars
Modifier
Bild von David Schraven
David Schraven

Publisher

Vertical avatar

Global widget_avatar – vertical
Classavatars
Modifiervertical
Bild von David Schraven
David Schraven

Publisher

Subtile button

Global widget_button – subtile
Classbuttons
Modifier–
Lorem ipsum dolor
Lorem ipsum dolor

Solid button

Global widget_button – solid
Classbuttons
Modifiersolid
Lorem ipsum dolor
Lorem ipsum dolor

Emphasized button

Global widget_button – emphasis
Classbuttons
Modifieremphasis
Lorem ipsum dolor
Lorem ipsum dolor

Alternative button

Global widget_button – alternative
Classbuttons
Modifieremphasis
Lorem ipsum dolor
Lorem ipsum dolor

Large headline with icon

Global widget_headline L – icon
Classheadlines
Modifier–

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet. Aut impedit possimus et voluptatem quia eum excepturi facere. Ad sint quisquam non modi aliquam cum molestiae magni sit porro rerum et repellat fugit sed soluta itaque vel suscipit facere.

Icon-list

Global widget_list – icon
Classlists
Modifier–
  • Lorem ipsum dolor sit amet. Voluptas aspernatur ut voluptatem eius et distinctio commodi id modi libero. Aut dolor temporibus eum.
  • In voluptates quia non commodi praesentium in natus sequi aexplicabo.
  • Est iure corrupti in eligendi beatae aut earum reprehenderit. Ea exercitationem temporibus sed molestias iusto et consectetur nihil aut natus repellendus est iusto assumenda.

Link list

Global widget
_list – link
Class
link-lists
Modifier
–

Testimonial

Global widget_testimonial
Classtestimonials
Modifier–
„CORRECTIV ist Deutschlands größtes gemeinwohlorientiertes Medienhaus. Mit Journalismus, Medienbildung und offenen Technologien stärken wir die Demokratie.“
David Schraven
David SchravenPublisher, CORRECTIV
„CORRECTIV ist Deutschlands größtes gemeinwohlorientiertes Medienhaus. Mit Journalismus, Medienbildung und offenen Technologien stärken wir die Demokratie.“
David Schraven
David SchravenPublisher, CORRECTIV

Subtile toggle

Global widget_toggle – subtile
Classtoggles
Modifier–

Lorem ipsum dolor sit amet. Voluptas aspernatur ut voluptatem eius et distinctio commodi id modi libero. Aut dolor temporibus eum corrupti atque et ullam praesentium nam soluta rerum quo natus tenetur ut amet veniam eum sunt nobis. Eos omnis itaque ut eaque rem perspiciatis illo et quam explicabo.

Lorem ipsum dolor sit amet. Voluptas aspernatur ut voluptatem eius et distinctio commodi id modi libero. Aut dolor temporibus eum corrupti atque et ullam praesentium nam soluta rerum quo natus tenetur ut amet veniam eum sunt nobis. Eos omnis itaque ut eaque rem perspiciatis illo et quam explicabo.

Lorem ipsum dolor sit amet. Voluptas aspernatur ut voluptatem eius et distinctio commodi id modi libero. Aut dolor temporibus eum corrupti atque et ullam praesentium nam soluta rerum quo natus tenetur ut amet veniam eum sunt nobis. Eos omnis itaque ut eaque rem perspiciatis illo et quam explicabo.

Global widget_toggle – subtile, icon, subhead
Classtoggles
Modifier–

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.

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.

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.

Global widget_toggle – subtile, icon, subhead
Classtoggles
Modifieralign

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.

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.

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.

  • This modifier will align title and content.

Boxed toggle

Global widget_toggle – boxed
Classtoggles
Modifierboxed

Lorem ipsum dolor sit amet. Voluptas aspernatur ut voluptatem eius et distinctio commodi id modi libero. Aut dolor temporibus eum corrupti atque et ullam praesentium nam soluta rerum quo natus tenetur ut amet veniam eum sunt nobis. Eos omnis itaque ut eaque rem perspiciatis illo et quam explicabo.

Lorem ipsum dolor sit amet. Voluptas aspernatur ut voluptatem eius et distinctio commodi id modi libero. Aut dolor temporibus eum corrupti atque et ullam praesentium nam soluta rerum quo natus tenetur ut amet veniam eum sunt nobis. Eos omnis itaque ut eaque rem perspiciatis illo et quam explicabo.

Lorem ipsum dolor sit amet. Voluptas aspernatur ut voluptatem eius et distinctio commodi id modi libero. Aut dolor temporibus eum corrupti atque et ullam praesentium nam soluta rerum quo natus tenetur ut amet veniam eum sunt nobis. Eos omnis itaque ut eaque rem perspiciatis illo et quam explicabo.

Bar

Template_bar
Classbar__item
Modifier–
  • Use this component for headers and navigations.

Breadcrumbs

template_breadcrumbs
Classbreadcrumbs__item
Modifier–
  • Startseite
  • Themen
  • Lorem ipsum dolor
Die besten Recherchen per Mail

Carousel/Scroller

Template _carousel/scroller
Class multiple
Modifier –
Top Recherche

Et perspiciatis nobis in doloremque dolorem et numquam
Top Recherche

Sed distinctio iure est quia magnam et consequatur porro et reiciendis
Top Recherche

Sit enim laborum aut voluptatem aut
Top Recherche

Et perspiciatis nobis in doloremque dolorem et numquam
Kreuz auf einem Kirchturm
Top Recherche

Et perspiciatis nobis in doloremque dolorem et numquam

jason-blackeye-zAITDJYV09w-unsplash
Top Recherche

Sed distinctio iure est quia magnam et consequatur porro et reiciendis

ricardo-gomez-angel-F2iCP_knaj8-unsplash
Top Recherche

Et perspiciatis nobis in doloremque dolorem et numquam

Column

Template_column – half
Classcolumn__item
Modifier–
Lorem ipsum dolor sit amet. Qui amet unde et explicabo accusamus aut necessitatibus eaque vel dolorem iste ut illum consequatur ut excepturi similique aut officia voluptatem.
Lorem ipsum dolor sit amet. Qui amet unde et explicabo accusamus aut necessitatibus eaque vel dolorem iste ut illum consequatur ut excepturi similique aut officia voluptatem.
Global widget_column – thirds
Classcolumn__item
Modifierthirds
Lorem ipsum dolor sit amet. Qui amet unde et explicabo accusamus aut necessitatibus eaque vel dolorem iste ut illum consequatur ut excepturi similique aut officia voluptatem.

Lorem ipsum dolor sit amet. Qui amet unde et explicabo accusamus aut necessitatibus eaque.

Hero – banner

Template_hero – banner
Classhero-banner__item
Modifier–

Hero – carousel

Template_hero – carousel
Classhero-carousel__item
Modifier–
Top Recherche

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet. Aut blanditiis modi et consectetur voluptatum non nihil optio cum molestiae sint hic autem quia. In ipsum aliquid nam quam explicabo eos unde fugit.
Faktencheck

Ut ipsa quibusdam sit perferendis accusamus aut debitis sit

Est voluptate quia id explicabo earum harum iste nam fugit tempora qui minima nihil 33 beatae magnam ut pariatur laboriosam. Et corporis maiores in nemo internos.

Hero – image

Template_hero – image
Classhero-image__item
Modifier–

Lorem ipsum dolor

Lorem ipsum dolor sit amet. Ad voluptatum ullam qui molestiae dolorem sed magnam itaque. In corrupti tempora ut illo sapiente ut voluptas quibusdam rem odit provident ut doloribus atque est reiciendis consequatur qui repudiandae numquam.

Navigation

Template_navigation – list
Classnavigation__item
Modifier–

Section

Template_section – large
Classsection__item
Modifier–
Aut voluptas dicta est tempore adipisci quasi reprehenderit ut aliquid maiores quo molestias voluptatem. Aut sapiente voluptatem est exercitationem natus non delectus error cum culpa magni ut consequatur aliquam est veritatis dolore. Aut autem repellat possimus quidem ut nisi placeat? Sed aspernatur beatae et quibusdam repellat et velit quidem est quod praesentium non atque modi.
  • Use this to change the background color:
selector .elementor-container {background: pink;}
Template_section – small
Classsection__item
Modifiersmall
Aut voluptas dicta est tempore adipisci quasi reprehenderit ut aliquid maiores quo molestias voluptatem. Aut sapiente voluptatem est exercitationem natus non delectus error cum culpa magni ut consequatur aliquam est veritatis dolore. Aut autem repellat possimus quidem ut nisi placeat? Sed aspernatur beatae et quibusdam repellat et velit quidem est quod praesentium non atque modi.
  • Use this to change the background color:
selector .elementor-container {background: pink;}
Template_section – boxed
Classsection__item
Modifierboxed

Inner section
Aut voluptas dicta est tempore adipisci quasi reprehenderit ut aliquid maiores quo molestias voluptatem. Aut sapiente voluptatem est exercitationem natus non delectus error cum culpa magni ut consequatur aliquam est veritatis dolore. Aut autem repellat possimus quidem ut nisi placeat? Sed aspernatur beatae et quibusdam repellat et velit quidem est quod praesentium non atque modi.

Inner section
Aut voluptas dicta est tempore adipisci quasi reprehenderit ut aliquid maiores quo molestias voluptatem. Aut sapiente voluptatem est exercitationem natus non delectus error cum culpa magni ut consequatur aliquam est veritatis dolore. Aut autem repellat possimus quidem ut nisi placeat? Sed aspernatur beatae et quibusdam repellat et velit quidem est quod praesentium non atque modi 

  • This modifier will add a box for every inner-section on small viewports.
Template_section – full-width
Classsection__item
Modifierfull-width
Aut voluptas dicta est tempore adipisci quasi reprehenderit ut aliquid maiores quo molestias voluptatem. Aut sapiente voluptatem est exercitationem natus non delectus error cum culpa magni ut consequatur aliquam est veritatis dolore. Aut autem repellat possimus quidem ut nisi placeat? Sed aspernatur beatae et quibusdam repellat et velit quidem est quod praesentium non atque modi.
  • This modifier extends the width on small viewports.
  • Use this to change the background color:
selector .elementor-container {background: pink;}

Section header

Template_section header
Classsection-header__item
Modifier–

Lorem ipsum dolor

Lorem ipsum dolor sit amet. Sit adipisci repudiandae ut rerum consequatur nam sapiente molestiae? Quo quasi similique non voluptate Quis qui doloremque laudantium et saepe rerum ut sunt provident sed consectetur sunt.
Lorem ipsum dolor
Template_section header
Classsection-header__item
Modifierspace

Lorem ipsum dolor

Gezielte Desinformation wird genutzt, um unsere Gesellschaft zu spalten, Hass zu verbreiten oder Geschäfte zu betreiben. Unsere Faktencheck-Redaktion wirkt dem entgegen und deckt tagtäglich Falschinformationen, Gerüchte und Halbwahrheiten auf.
Lorem ipsum dolor
  • This modifier will add 60px spacing at the bottom.

Button teaser

Template
_teaser – button
Class
button-teaser__item
Modifier
–
ricardo-gomez-angel-F2iCP_knaj8-unsplash
Lorem ipsum dolor

Lorem ipsum dolor sit amet. Sit adipisci repudiandae ut

Lorem ipsum dolor sit amet. Sit adipisci repudiandae ut rerum consequatur nam sapiente molestiae? Quo quasi similique non voluptate Quis qui doloremque laudantium.

Lorem ipsum dolor

Faktencheck teaser

Template_teaser – faktencheck
Classfact__row
Modifier–
Sachsenhausen-Titelbild-970x530-1-1445x790
Lorem ipsum

Ut reiciendis dolorem sed voluptas sequi et necessitatibus autem hic reiciendis galisum.

122407261-2-970x530-2-1445x790
Lorem ipsum

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

Template_teaser – faktencheck
Classfact__row
Modifierspace
Sachsenhausen-Titelbild-970x530-1-1445x790
Lorem ipsum

Ut reiciendis dolorem sed voluptas sequi et necessitatibus autem hic reiciendis galisum.

122407261-2-970x530-2-1445x790
Lorem ipsum

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

  • This modifier will add 40px spacing at the bottom.
Template_teaser – faktencheck
Classfact__row
Modifierlast
Sachsenhausen-Titelbild-970x530-1-1445x790
Lorem ipsum

Ut reiciendis dolorem sed voluptas sequi et necessitatibus autem hic reiciendis galisum.

122407261-2-970x530-2-1445x790
Lorem ipsum

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

  • This modifier will remove the border.

Article teaser

Template_teaser – article
Classarticle__item
Modifier–
jason-blackeye-zAITDJYV09w-unsplash-1-scaled
Lorem ipsum dolor

Lorem ipsum dolor sit amet. Sit adipisci repudiandae ut

Lorem ipsum dolor sit amet. Sit adipisci repudiandae ut rerum consequatur nam sapiente molestiae? Quo quasi similique non voluptate Quis qui doloremque laudantium.

Template_teaser – article
Classarticle__item
Modifierfeatured
jason-blackeye-zAITDJYV09w-unsplash-1-scaled
Lorem ipsum dolor

Lorem ipsum dolor sit amet. Sit adipisci repudiandae ut

Lorem ipsum dolor sit amet. Sit adipisci repudiandae ut rerum consequatur nam sapiente molestiae? Quo quasi similique non voluptate Quis qui doloremque laudantium.
Template_teaser – article
Classarticle__item
Modifierspace
jason-blackeye-zAITDJYV09w-unsplash-1-scaled
Lorem ipsum dolor

Lorem ipsum dolor sit amet. Sit adipisci repudiandae ut

Lorem ipsum dolor sit amet. Sit adipisci repudiandae ut rerum consequatur nam sapiente molestiae? Quo quasi similique non voluptate Quis qui doloremque laudantium.
  • This modifier will add 40px spacing at the bottom.
Template_teaser – article
Classarticle__item
Modifierlast
jason-blackeye-zAITDJYV09w-unsplash-1-scaled
Lorem ipsum dolor

Lorem ipsum dolor sit amet. Sit adipisci repudiandae ut

Lorem ipsum dolor sit amet. Sit adipisci repudiandae ut rerum consequatur nam sapiente molestiae? Quo quasi similique non voluptate Quis qui doloremque laudantium.

  • This modifier will remove the border.

Image tile

Template _tile – image
Class image-tile__section
Modifier large center
Kreuz auf einem Kirchturm

Aut dolores autem aut commodi dolor

Lorem ipsum
ricardo-gomez-angel-F2iCP_knaj8-unsplash

Lorem ipsum dolor

Lorem ipsum
Template _tile – image, small
Class image-tile__section
Modifier small
Kreuz auf einem Kirchturm

Aut dolores autem aut commodi dolor

Lorem ipsum
ricardo-gomez-angel-F2iCP_knaj8-unsplash

Lorem ipsum dolor

Lorem ipsum
Template _tile – image, lead paragraph
Class image-tile__section
Modifier–
Kreuz auf einem Kirchturm

Aut dolores autem aut commodi dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

ricardo-gomez-angel-F2iCP_knaj8-unsplash

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec 

Icon tile

Template_tile – icon
Class_icon tile
Modifier–

Aut sapiente voluptatem est

Aut autem repellat possimus quidem ut nisi placeat? Sed aspernatur beatae et quibus dam repellat.

Sed aspernatur beatae

Aut autem repellat possimus quidem ut nisi placeat? Sed aspernatur beatae et quibus dam repellat.

Template _tile – icon, large
Class image-tile__section
Modifierlarge

17.000

Aut voluptas dicta est tempore adipisci quasi reprehenderit ut aliquid maiores.

5 Mio.

Aut autem repellat possimus quidem ut nisi placeat? Sed aspernatur beatae et quibusdam.

Section tile

Template_tile – section
Classsection-tile__item
Modifier–
Correctiv Redaktion

Lorem ipsum dolor

Eum mollitia laboriosam in enim impedit ad accusantium magni cum repellat labore. Ut voluptatem temporibus et dolorum deleniti eos quia galisum! Nam repudiandae possimus sit accusamus magnam quo corporis assumenda sed nemo illum quo eligendi corporis vel accusantium ducimus est blanditiis assumenda. Non consequuntur nisi aut enim magnam aut pariatur voluptas a galisum dolor aut dolorum galisum non consequatur omnis.

Spacing

Template–
Modifierspace-s
Aut voluptas dicta est tempore adipisci quasi reprehenderit ut aliquid maiores quo molestias voluptatem. Aut sapiente voluptatem est exercitationem natus non delectus error cum culpa magni ut consequatur aliquam est veritatis dolore.
Lorem ipsum dolor
  • This modifier will add a margin-bottom of 9px/6px.
  • Some components have individual modifers called 'space'.
Template–
Modifierspace-m
Aut voluptas dicta est tempore adipisci quasi reprehenderit ut aliquid maiores quo molestias voluptatem. Aut sapiente voluptatem est exercitationem natus non delectus error cum culpa magni ut consequatur aliquam est veritatis dolore.
Lorem ipsum
  • This modifier will add a margin-bottom of 18px/12px.
  • Some components have individual modifiers called 'space'.
Template–
Modifierspace-l
Aut voluptas dicta est tempore adipisci quasi reprehenderit ut aliquid maiores quo molestias voluptatem. Aut sapiente voluptatem est exercitationem natus non delectus error cum culpa magni ut consequatur aliquam est veritatis dolore.
Lorem ipsum
  • This modifier will add a margin-bottom of 30px/24px.
  • Some components have individual modifiers called 'space'.
Template–
Modifierspace-xl
Aut voluptas dicta est tempore adipisci quasi reprehenderit ut aliquid maiores quo molestias voluptatem. Aut sapiente voluptatem est exercitationem natus non delectus error cum culpa magni ut consequatur aliquam est veritatis dolore.
Lorem ipsum dolor
  • This modifier will add a margin-bottom of 50px/36px.
  • Some components have individual modifiers call 'space'.

Row

Template–
Modifierrow
Lorem ipsum
Lorem ipsum
Lorem ipsum
  • Apply this modifier to an inner section.
  • You can add responsive spacing like this:
selector .elementor-widget-wrap{gap: 20px 30px;}
Template–
Modifierrow space-between
Lorem ipsum
Lorem ipsum
Lorem ipsum
  • Apply this modifier to an inner section.
  • You can add responsive spacing like this:
selector .elementor-widget-wrap{gap: 20px 30px;}

Colors

100

#FFFFFF

200

#F8F8F8

300

#E6E6E6

400

#CECECE

500

#B3B3B3

600

#707070

700

#333333

Emphasis

#FF5064

Alternative

#FDE162
  • Use this global colors.

Text styles

StyleHeadline XL
Size50/32
Height1.1/1.2
Spacing-0.2

Recherchen für die Gesellschaft

Ea rerum illo ut obcaecati autem non velit rerum et saepe officiis? Ab laborum alias ut dolores tempore cum repellendus voluptas aut iure sint ea accusamus voluptatem et assumenda soluta. Qui dolores perferendis in optio autem eos eaque eligendi laborum commodi vel distinctio numquam sed commodi praesentium.
StyleHeadline L
Size30/23
Height1.2
Spacing-0.1

Recherchen für die Gesellschaft

Ea rerum illo ut obcaecati autem non velit rerum et saepe officiis? Ab laborum alias ut dolores tempore cum repellendus voluptas aut iure sint ea accusamus voluptatem et assumenda soluta. Qui dolores perferendis in optio autem eos eaque eligendi laborum commodi vel distinctio numquam sed commodi praesentium.
StyleHeadline M
Size23/19
Height1.3
Spacing0

Recherchen für die Gesellschaft

Ea rerum illo ut obcaecati autem non velit rerum et saepe officiis? Ab laborum alias ut dolores tempore cum repellendus voluptas aut iure sint ea accusamus voluptatem et assumenda soluta. Qui dolores perferendis in optio autem eos eaque eligendi laborum commodi vel distinctio numquam sed commodi praesentium.
StyleHeadline S
Size20/17
Height1.4/1.5
Spacing0.1

Recherchen für die Gesellschaft

Ea rerum illo ut obcaecati autem non velit rerum et saepe officiis? Ab laborum alias ut dolores tempore cum repellendus voluptas aut iure sint ea accusamus voluptatem et assumenda soluta. Qui dolores perferendis in optio autem eos eaque eligendi laborum commodi vel distinctio numquam sed commodi praesentium.
StyleHeadline XS
Size17/17
Height1.5
Spacing0.1

Recherchen für die Gesellschaft

Ea rerum illo ut obcaecati autem non velit rerum et saepe officiis? Ab laborum alias ut dolores tempore cum repellendus voluptas aut iure sint ea accusamus voluptatem et assumenda soluta. Qui dolores perferendis in optio autem eos eaque eligendi laborum commodi vel distinctio numquam sed commodi praesentium.
StyleText L
Size20/18.5
Height1.45
Spacing0.1

Ea rerum illo ut obcaecati autem non velit rerum et saepe officiis? Ab laborum alias ut dolores tempore cum repellendus voluptas aut iure sint ea accusamus voluptatem et assumenda soluta. Qui dolores perferendis in optio autem eos eaque eligendi laborum commodi vel distinctio numquam sed commodi praesentium.

StyleText M
Size17/15
Height1.5
Spacing0.1

Ea rerum illo ut obcaecati autem non velit rerum et saepe officiis? Ab laborum alias ut dolores tempore cum repellendus voluptas aut iure sint ea accusamus voluptatem et assumenda soluta. Qui dolores perferendis in optio autem eos eaque eligendi laborum commodi vel distinctio numquam sed commodi praesentium.

StyleText S
Size15/14
Height1.5
Spacing0.2

Ea rerum illo ut obcaecati autem non velit rerum et saepe officiis? Ab laborum alias ut dolores tempore cum repellendus voluptas aut iure sint ea accusamus voluptatem et assumenda soluta. Qui dolores perferendis in optio autem eos eaque eligendi laborum commodi vel distinctio numquam sed commodi praesentium.

StyleArticle Text
Size17.5/15.5
Height31/27
Spacing0.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 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.

Logo

Download

Fonts

Source Sans 3

Download

Merriweather

Download