Jannes Hesterberg
Projektleitung DEVI - Demokratie stärken. Vielfalt gestalten.
Color Class: .color-x
Background Color Class: .bg-color-x
Color Extend: %color-x
Background Color Extend: %bg-color-x
Colors: black, white, white-80, white-50, gray-dark, gray-medium, gray-light, gray-lighter, red
Extend: %heading-1
Class: .heading-1
Desktop: 48px / 120% / bold
Mobile: 32px / 110% / bold
Extend: %heading-2
Class: .heading-2
Desktop: 38px / 120% / regular
Mobile: 30px / 130% / regular
Extend: %heading-3
Class: .heading-3
Desktop: 26px / 120% / bold
Mobile: 22px / 140% / bold
Extend: %heading-4
Class: .heading-4
Desktop / Mobile: 20px / 120% / bold
Extend: %heading-5
Class: .heading-5
Desktop / Mobile: 18px / 120% / bold
Extend: %heading-6
Class: .heading-6
Desktop / Mobile: 15px / 120% / bold
text (default): Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro aliquid labore numquam? Maxime ex vel, quo velit ipsa, iusto quaerat tempore, voluptatum enim voluptatibus explicabo. Laborum eius officiis tempore! Voluptate.
Extend: %text
Class: .text
Desktop: 18px / 150% / regular
Mobile: 15px / 150% / regular
text lg: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro aliquid labore numquam? Maxime ex vel, quo velit ipsa, iusto quaerat tempore, voluptatum enim voluptatibus explicabo. Laborum eius officiis tempore! Voluptate.
Extend: %text-lg
Class: .text-lg
Desktop: 24px / 140% / regular
Mobile: 18px / 150% / regular
text sm: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro aliquid labore numquam? Maxime ex vel, quo velit ipsa, iusto quaerat tempore, voluptatum enim voluptatibus explicabo. Laborum eius officiis tempore! Voluptate.
Extend: %text-sm
Class: .text-sm
Desktop: 15px / 140% / regular
text caps: Lorem ipsum dolor sit.
Extend: %text-caps
Class: .text-caps
Desktop: 14px / 100% / bold
Extend: %text-button
Class: .text-button
Desktop: 16px / 137.5% / bold
Extend: %text-button-sm
Class: .text-button-sm
Desktop: 11px / 200% / bold
text link: Lorem ipsum dolor sit.
Extend: %text-link
Class: .text-link
Desktop: 18px / 127.778% / bold
hyphenate: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Class: .hyphenate
Use with lang="" attribute
line-clamp: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Usage with include: line-clamp(2)
Pass x lines as argument
Default lines: 3
ellipsis: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro aliquid labore numquam?
Class: .ellipsis
Needs to define width
Extend: %link-icon
Class: .link-icon
Info: wrap text around span element
Extend: %pill-light
Class: .pill-light
Additional Class: .active
Extend: %pill-dark
Class: .pill-dark
Additional Class: .active
Extend: %tag
Class: .tag
Extend: %input-text
Class: .input-text
Note: always add an empty placeholder attribute, even if empty, to identify when input has value
Extend: %input-textarea
Class: .input-textarea
Note: always add an empty placeholder to know when input is empty
Extend: %input-checkbox
Class: .input-checkbox
Extend: %input-radio
Class: .input-radio
Extend: %input-dropdown
Class: .input-dropdown
JS: add .js-choices-dropdown to create dropdown
Description: add attribute data-custom-properties='{"description": "X"}'
Multiple: add attribute multiple
Extend: %shadow
Class: .shadow
Additional Class: .active
Variable: $spacing-x
Projektleitung DEVI - Demokratie stärken. Vielfalt gestalten.
Projektleitung DEVI - Demokratie stärken. Vielfalt gestalten.
Component: Components/partials/CardContact/index.twig
Params: name, description, image, email, telephone
Zur Person:
Ehrenamtliche Funktionen:
Zur Person:
Ehrenamtliche Funktionen:
Zur Person:
Ehrenamtliche Funktionen:
Zur Person:
Ehrenamtliche Funktionen:
Component: Components/partials/CardPeople/index.twig
Params: name, description, image, background ( white, grayLight )
Component: Components/partials/CardDepartment/index.twig
Params: name, description, link
Vitae bibendum mattis tincidunt tortor. Sit sed nulla sodales amet in eu id. Volutpat nam curabitur aliquet imperdiet enim non. Nibh integer congue odio nunc rhoncus. Pellentesque diam.
Vitae bibendum mattis tincidunt tortor. Sit sed nulla sodales amet in eu id. Volutpat nam curabitur aliquet imperdiet enim non. Nibh integer congue odio nunc rhoncus. Pellentesque diam.
Component: Components/partials/CardJob/index.twig
Params: name, description, postDate, type, location, duration, startDate, link
Component: Components/partials/CardDownload/index.twig
Params: name, image, file
Component: Components/partials/CardIcon/index.twig
Params: name, description, image
Gegründet 1919 zählt die AWO zu den ältesten Wohlfahrtsverbänden in Deutschland. Sie wird von rund 280.000 Mitgliedern getragen und unterhält bundesweit über 18.000 Einrichtungen und Dienste.
Gegründet 1919 zählt die AWO zu den ältesten Wohlfahrtsverbänden in Deutschland. Sie wird von rund 280.000 Mitgliedern getragen und unterhält bundesweit über 18.000 Einrichtungen und Dienste.
Das Präsidium wird von der Bundeskonferenz, dem höchsten Beschlussorgan der AWO, für die Dauer von vier Jahren gewählt.
Das Präsidium wird von der Bundeskonferenz, dem höchsten Beschlussorgan der AWO, für die Dauer von vier Jahren gewählt.
Gegründet 1919 zählt die AWO zu den ältesten Wohlfahrtsverbänden in Deutschland. Sie wird von rund 280.000 Mitgliedern getragen und unterhält bundesweit über 18.000 Einrichtungen und Dienste.
Das Präsidium wird von der Bundeskonferenz, dem höchsten Beschlussorgan der AWO, für die Dauer von vier Jahren gewählt.
Component: Components/partials/CardLink/index.twig
Params: name, description, image, link, secondaryLink, alignment ( vertical, horizontal )
Die AWO verpflichtet sich in ihrem Grundsatzprogramm dazu, Hilfesuchende vor Übergriffen durch Dritte zu schützen und präventiv gegen jegliche Form von Gewalt zu arbeiten. Aufgrund der stetigen Zunahme digitaler Gewalt – insbesondere gegenüber vulnerablen Gruppen – sehen wir dringenden Handlungsbedarf, dieser Entwicklung entgegenzuwirken.
MehrDie AWO verpflichtet sich in ihrem Grundsatzprogramm dazu, Hilfesuchende vor Übergriffen durch Dritte zu schützen und präventiv gegen jegliche Form von Gewalt zu arbeiten. Aufgrund der stetigen Zunahme digitaler Gewalt – insbesondere gegenüber vulnerablen Gruppen – sehen wir dringenden Handlungsbedarf, dieser Entwicklung entgegenzuwirken.
MehrComponent: Components/partials/CardPostType/index.twig
Params: name, description, image, postDate, postType, link, category, cta, background ( white, grayLight )
Component: Components/partials/CardTeaser/index.twig
Params: name, description, image, postDate, tag, link, category, background ( white, grayLight )
Gegründet 1919 zählt die AWO zu den ältesten Wohlfahrtsverbänden in Deutschland. Sie wird von rund 280.000 Mitgliedern getragen und unterhält bundesweit über 18.000 Einrichtungen und Dienste.
Component: Components/partials/CardVideo/index.twig
Params: name, description, date, image, file
Class: .grid-container
Usage: use to wrap element inside a limited box size.
Class: .grid-column-container
Usage: use to wrap elements which should play as columns.
Should be inside a .grid-container.
Class: .grid-wrapper
Usage: use to wrap elements inside a 10 column container, above 1366px viewport size.
Should be inside a .grid-column-container, which should be inside a .grid-container.
Include: @include grid-column(x);
Usage: use to set a number of columns for an element.
Elements should be wrapper around a .grid-column-container element.
Usage: For each breakpoint, a new breakpoint and @include grid-column(x).
Can have manual breakpoints.
Include: @include grid-offset-left(x);
Include: @include grid-offset-right(x);
Usage: use to add an offset to an element, based in a column number.
Can be used to left or right offset.
Can have manual breakpoints.