Colors
Black
White
White 80
White 50
Gray Dark
Gray Medium
Gray Light
Gray Lighter
Red
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
              
Headings

Heading 1

Extend: %heading-1
Class: .heading-1
Desktop: 48px / 120% / bold
Mobile: 32px / 110% / bold

Heading 2

Extend: %heading-2
Class: .heading-2
Desktop: 38px / 120% / regular
Mobile: 30px / 130% / regular

Heading 3

Extend: %heading-3
Class: .heading-3
Desktop: 26px / 120% / bold
Mobile: 22px / 140% / bold

Heading 4

Extend: %heading-4
Class: .heading-4
Desktop / Mobile: 20px / 120% / bold
Heading 5
Extend: %heading-5
Class: .heading-5
Desktop / Mobile: 18px / 120% / bold
Heading 6
Extend: %heading-6
Class: .heading-6
Desktop / Mobile: 15px / 120% / bold
Texts

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

text button: Lorem ipsum dolor sit.

Extend: %text-button
Class: .text-button
Desktop: 16px / 137.5% / bold

text button sm: Lorem ipsum dolor sit.

Extend: %text-button-sm
Class: .text-button-sm
Desktop: 11px / 200% / bold
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
Buttons
Extend: %button-primary
Class: .button-primary
Extend: %button-secondary
Class: .button-secondary
Extend: %button-primary-border
Class: .button-primary-border
Extend: %button-secondary-border
Class: .button-secondary-border
Extend: %button-x-md
Class: .button-x-md
Extend: %button-x-sm
Class: .button-x-sm
Extend: %button-icon
Class: .button-icon
Extend: %button-icon-light
Class: .button-icon-light
Extend: %button-icon-dark
Class: .button-icon-dark
Extend: %button-icon-border
Class: .button-icon-border
Extend: %button-icon-sm, %button-icon-x-sm
Class: .button-icon-sm, .button-icon-x-sm
Extend: %button-icon-md, %button-icon-x-md
Class: .button-icon-md, .button-icon-x-md
Extend: %button-icon-lg, %button-icon-x-lg
Class: .button-icon-lg, .button-icon-x-lg
Pills
Extend: %pill-light
Class: .pill-light
Additional Class: .active
Extend: %pill-dark
Class: .pill-dark
Additional Class: .active
Tag
Extend: %tag
Class: .tag
Inputs
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
Shadow
Extend: %shadow
Class: .shadow
Additional Class: .active
Spacing
120
80
64
56
48
40
32
24
20
16
12
8
base (4)
Variable: $spacing-x
Cards
                Component: Components/partials/CardContact/index.twig
              
                Params: name, description, image, email, telephone
              
  • dummy

    Zur Person:

    • Ärztin
    • geboren 1956, verheiratet, 3 Kinder
    • Vom Oktober 2003 bis zum November 2018 Mitglied der SPD-Fraktion im Bayerischen Landtag

    Ehrenamtliche Funktionen:

    • Seit 1974 Mitglied der SPD
    • Kreisrätin seit 2002
    • Seit Juni 2021 Vorsitzende des Präsidiums des AWO Bundesverbandes e.V.
  • dummy
    Jannes Hesterberg
  • Zur Person:

    • Ärztin
    • geboren 1956, verheiratet, 3 Kinder
    • Vom Oktober 2003 bis zum November 2018 Mitglied der SPD-Fraktion im Bayerischen Landtag

    Ehrenamtliche Funktionen:

    • Seit 1974 Mitglied der SPD
    • Kreisrätin seit 2002
    • Seit Juni 2021 Vorsitzende des Präsidiums des AWO Bundesverbandes e.V.
  • dummy

    Zur Person:

    • Ärztin
    • geboren 1956, verheiratet, 3 Kinder
    • Vom Oktober 2003 bis zum November 2018 Mitglied der SPD-Fraktion im Bayerischen Landtag

    Ehrenamtliche Funktionen:

    • Seit 1974 Mitglied der SPD
    • Kreisrätin seit 2002
    • Seit Juni 2021 Vorsitzende des Präsidiums des AWO Bundesverbandes e.V.
  • dummy
    Jannes Hesterberg
  • Zur Person:

    • Ärztin
    • geboren 1956, verheiratet, 3 Kinder
    • Vom Oktober 2003 bis zum November 2018 Mitglied der SPD-Fraktion im Bayerischen Landtag

    Ehrenamtliche Funktionen:

    • Seit 1974 Mitglied der SPD
    • Kreisrätin seit 2002
    • Seit Juni 2021 Vorsitzende des Präsidiums des AWO Bundesverbandes e.V.
  •                   Component: Components/partials/CardPeople/index.twig
                    
                      Params: name, description, image, background ( white,
                      grayLight )
                    
  • Vorstand des AWO Bundesverbands (m/w/d)

    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.

    Standort
    Berlin
    Typ
    Vollzeit
    Startdatum
    2022-03-08
    Dauer
    unlimited
    Mehr
  • Vorstand des AWO Bundesverbands (m/w/d)
    Standort
    Berlin
    Typ
    Vollzeit
    Startdatum
    2022-03-08
    Dauer
    unlimited
    Mehr
  • Vorstand des AWO Bundesverbands (m/w/d)

    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.

    Mehr
                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
  • dummy
    Per Post oder Persönlich

    Ein persönliches Treffen oder Videotelefonat sind nach Vereinbarung per Telefon, Post oder E-Mail in der Geschäftsstelle des Bundesverbands möglich. Die Geschäftsstelle ist barrierefrei zugänglich.

    AWO Bundesverband e.V.
    Stabsstelle Governance
    Blücherstraße 62 – 63
    10961 Berlin

  • dummy
    Per Post oder Persönlich

    Sie erreichen das Hinweisgebersystem vom AWO Bundesverband über diese E-Mail-Adresse:

    hinweisgeber_in@awo.org

                Component: Components/partials/CardIcon/index.twig
              
Params: name, description, image
                Component: Components/partials/CardLink/index.twig
              
                Params: name, description, image, link, secondaryLink,
                alignment ( vertical, horizontal )
              
                Component: Components/partials/CardPostType/index.twig
              
                Params: name, description, image, postDate, postType,
                link, category, cta, background ( white, grayLight )
              
  • Solidarisch gegen digitale Gewalt

    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.

    Mehr
  • dummy
    Solidarisch gegen digitale Gewalt

    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.

  • Wohnen.Menschen.Recht - Wohnen ist Lebensgrundlage und keine Ware

    Positionspapier des AWO Bundesverbands für eine gerechte Wohnungspolitik.

  • Solidarisch gegen digitale Gewalt

    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.

    Mehr
  • dummy
    Solidarisch gegen digitale Gewalt

    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.

  • Wohnen.Menschen.Recht - Wohnen ist Lebensgrundlage und keine Ware

    Positionspapier des AWO Bundesverbands für eine gerechte Wohnungspolitik.

                Component: Components/partials/CardTeaser/index.twig
              
                Params: name, description, image, postDate, tag, link,
                category, background ( white, grayLight )
              
  • dummy
    2022-03-08

    Vorständin Claudia Mandrysch

    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.

    Download
                Component: Components/partials/CardVideo/index.twig
              
                Params: name, description, date, image, file
              
Grid Container
I am an element inside .grid-container.
Class: .grid-container
              Usage: use to wrap element inside a limited box size.
            
Grid Container Column
I am a .grid-column-container, inside a .grid-container.
Class: .grid-column-container
              Usage: use to wrap elements which should play as columns.
              
Should be inside a .grid-container.
Grid Wrapper
I am a .grid-wrapper, inside a .grid-column-container, 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.
Grid Column
6 columns
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.
desktop: 6 columns
tablet: 4 columns
mobile: 2 columns
              Usage: For each breakpoint, a new breakpoint and @include
              grid-column(x).
Can have manual breakpoints.
desktop: 4 columns
tablet: 5 columns
mobile: 1 columns
desktop: 7 columns
tablet: 2 columns
mobile: 2 columns
Grid Column Offset
desktop: 6 columns
tablet: 4 columns
mobile: 2 columns
left offset: 2 columns
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.