Style Guide

Client-First is a set of guidelines and strategies created by Finsweet to help you build Webflow websites.

Structure Classes

Defined and flexible core structure we can use on all or most pages.

page-wrapper

main-wrapper

container-small

container-medium

container-large

padding-global

padding-section-small

padding-section-medium

padding-section-large

button-group

HTML Heading Tags

HTML tags define default Heading styles.

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

Other HTML Tags

HTML tags define default text styles.

All paragraphs

All links

All Links

All quotes

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

All Ordered Lists

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

All Unordered Lists

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Heading Styles

Heading classes when typography style doesn't match the default HTML tag.

heading-style-h1

Sample text helps you understand how real text may look.

heading-style-h2

Sample text is being used as a placeholder. Sample text helps you understand how real text may look.

heading-style-h3

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

heading-style-h4

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.

heading-style-h5

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

heading-style-h6

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

Text Classes

Text classes when typography style doesn't match the default HTML tag.

Text Sizes

text-size-large

Sample text is being used as a placeholder for real text that is normally present.

text-size-medium

Sample text is being used as a placeholder for real text that is normally present on your website.

text-size-regular

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

text-size-small

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

text-size-tiny

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

Text Styles

text-style-strikethrough

text-style-italic

text-style-muted

text-style-allcaps

text-style-nowrap

text-style-link

text-style-quote

Sample text is being used as a placeholder.

text-style-2lines

text-style-3lines

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

Text Weights

text-weight-xbold

text-weight-bold

text-weight-semibold

text-weight-medium

text-weight-normal

text-weight-light

Text Alignments

text-align-left

text-align-center

text-align-right

Buttons

Button combo class system.

button

button text

button

is-alternative

button text

button

is-secondary

button text

button

is-ghost

button text

button

is-dark

button text

Colors

Manage recurring text and background colors.

Color Palette

graphit

graphit 800

graphit 700

saphir

saphir 800

saphir 700

candy

candy 800

candy 700

graphit

graphit 800

graphit 700

Text Colors

text-color-black

text-color-grey

text-color-white

Background Colors

background-color-black

background-color-grey

background-color-white

Max widths

Use the max-width CSS property to contain inner content to a maximum width.

max-width-full

max-width-full-tablet

max-width-full-mobile-portrait

max-width-full-mobile-landscape

max-width-xxlarge

max-width-xlarge

max-width-large

max-width-medium

max-width-small

max-width-xsmall

max-width-xxsmall

Paddings

Utility spacing system - padding classes. [padding-direction] + [padding-size].

Direction Classes

padding-bottom

padding-top

padding-vertical

padding-horizontal

padding-left

padding-right

Size Classes

padding-0

padding-tiny

padding-xxsmall

padding-xsmall

padding-small

padding-medium

padding-large

padding-xlarge

padding-xxlarge

padding-huge

padding-xhuge

padding-xxhuge

padding-custom1

padding-custom2

padding-custom3

Margins

Utility spacing system - padding classes. [margin-direction] + [margin-size].

Direction Classes

margin-bottom

margin-top

margin-vertical

margin-horizontal

margin-left

margin-right

Size Classes

margin-0

margin-tiny

margin-xxsmall

margin-xsmall

margin-small

margin-medium

margin-large

margin-xlarge

margin-xxlarge

margin-huge

margin-xhuge

margin-xxhuge

margin-custom1

margin-custom2

margin-custom3

Icons

Unify icons sizes. icon-height sets height of icons. icon-1x1 sets both height and width of icons.

icon-height-small

icon-height-medium

icon-height-large

icon-1x1-small

icon-1x1-medium

icon-1x1-large

Useful utility systems

Utility classes we like to use in most of our projects to build faster.

hide

This element is hidden

hide-tablet

hide-mobile-portrait

hide-mobile-landscape

overflow-visible

overflow-hidden

overflow-auto

overflow-scroll

pointer-events-on

pointer-events-off

layer

div-square

spacing-clean

align-center

z-index-1

z-index-2

display-inlineflex

Webflow elements

Native Webflow elements with Client-First classes applied.

form_component

Example of a form component using Folders

vielen Dank! wir haben ihr formular erhalten.

Vorsicht! Formular konnte nicht versendet werden. Bitt erneut versuchen

text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

Webflow Repsonsive Flexbox Grid v1.2

A Webflow ready, Responsive Flexbox grid system based on a 12 column layout.

Getting Started

Columns need to be nested within a "row" and a direct child of a "container". All columns start off at equal-widths by defining the class of "col" and auto-collapse at the mobile portrait breakpoint if no responsive classes are defined.

col

Remove Gutters

To remove all padding from columns, use the "no-gutters" class preceded by the initial class of "col".

no-gutters

Full Width Container

Define your div with a class of "container-fluid" for full width.

col

Responsive Grid

Grid - Desktop

To define our 12 column grid, all classes must precede with the initial class of "col"

col-1

col-11

col-2

col-10

col-3

col-9

col-4

col-8

col-5

col-7

col-6

col-12

Grid - Tablet (Breakpoint)

Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop class of "col-(1-12)"

col-m-1

col-m-11

col-m-2

col-m-10

col-m-3

col-m-9

col-m-4

col-m-8

col-m-5

col-m-7

col-m-6

col-m-12

Grid - Mobile Landscape (Breakpoint)

Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop and tablet classes of "col-(1-12)"

col-sm-1

col-sm-11

col-sm-2

col-sm-10

col-sm-3

col-sm-9

col-sm-4

col-sm-8

col-sm-5

col-sm-7

col-sm-6

col-sm-12

Grid - Mobile Portrait (Breakpoint)

Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop, tablet and mobile landscape classes of "col-(1-12)"

col-xs-1

col-xs-11

col-xs-2

col-xs-10

col-xs-3

col-xs-9

col-xs-4

col-xs-8

col-xs-5

col-xs-7

col-xs-6

col-xs-12

Column Wrapping

If responsive columns are placed within a single row and which the total result in greater then 12, they will automatically wrap onto a new line.

col-4

col-8

col-6

col-3

col-2

col-7

Vertical Alignment

Align-Start

To align columns from the top, combine a class of "align-start" preceded by the class of "row"

align-start

Align-Center

To align columns from the center, combine a class of "align-center" preceded by the class of "row"

align-center

Align-End

To align columns from the bottom, combine a class of "align-end" preceded by the class of "row"

align-end

Horizontal Alignment

Justify-Start

To align columns from the left, combine a class of "justify-start" preceded by the by class of "row"

justify-start

Justify-Center

To align columns from the right, combine a class of "justify-center" preceded by the class of "row"

justify-center

Justify-End

To align columns from the right, combine a class of "justify-end" preceded by the class of "row"

justify-end

Justify-Between

To evenly space columns between each-other, combine a class of "justify-between" preceded by the class of "row"

justify-between

Justify-Around

To evenly space columns around each-other, combine a class of "justify-around" preceded by the class of "row"

justify-around

Self-Align Columns

To individually self-align columns, combine a class of "self-start", "self-center", "self-end" preceded by the by class of "col"

self-start

self-center

self-end

Column Reordering

To individually reorder columns, combine a class of either "order-first", "order-last", preceded by the by class of "col"

order-last

order-first

Website elements

Elemente, die als Blöcke in der Website verwendet werden können.

navigation

footer

Hero Header

Diesen Slide löschen!

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

button text

144 +

Sanität

117 +

Polizei

118+

Feuerwehr

1414+

Rega

145+

Tox-Zentrum

Small Header

Aspiranten Ausbildung: Werde Polizist

Willkommen in einer Karriere, die nicht nur sicher, sondern auch erfüllend ist. Werden Sie Teil unseres Teams und tragen Sie aktiv zur Sicherheit und Ordnung in unserer Gemeinschaft bei.

alle entdecken

Content Sections

WIR beschäftigen über
‍300 Polizistinnen und Polizisten,
welche jeden Tag für die Sicherheit in den Zürcher Städten und Gemeinden sorgen.

Sie sind Sicherheits-, Verkehrs- und Verwaltungspolizei.

Aus erster Hand erfahren was uns ausmacht

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

button text

Aus erster Hand erfahren was uns ausmacht

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

Vielfältige Weiterbildungsangebote

Unsere Programme decken ein breites Spektrum an Themen ab, die für Polizeibeamte relevant sind.

Praxisorientierte Lehrgänge

Die Kurse sind stark auf die praktische Anwendung des erlernten Wissens im Polizeialltag ausgerichtet.

Individuelle Entwicklungsmöglichkeiten

Jedes Programm ist darauf ausgelegt, Ihre persönlichen und beruflichen Kompetenzen weiterzuentwickeln.

Mit uns arbeiten

Personenkontrollen, Personenfahndungen, Mithilfe und Unterstützung bei kriminalpolizeilichen Aufgaben und Aktionen der Kantonspolizei Zürich

Bei der Kompol sein

Die Kommunalpolizei überwacht den Vollzug der eidgenössischen, kantonalen und kommunalen Gesetze, Verordnungen und Beschlüsse. Dies soweit es zu den Aufgaben der Gemeinde/Stadt gehört und polizeiliche Funktionen bedingt. Sie beachtet die Grundsätze der Gesetzmässigkeit und der Verhältnismässigkeit. Die Kommunalpolizei überwacht den Vollzug der eidgenössischen, kantonalen und kommunalen Gesetze, Verordnungen und Beschlüsse. Dies soweit es zu den Aufgaben der Gemeinde/Stadt gehört und polizeiliche Funktionen bedingt. Sie beachtet die Grundsätze der Gesetzmässigkeit und der Verhältnismässigkeit.

button text

Bei der Kompol sein

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

Bei der Kompol sein

Personenkontrollen, Personenfahndungen, Mithilfe und Unterstützung bei kriminalpolizeilichen Aufgaben und Aktionen der Kantonspolizei Zürich

Aufgaben & Tätigkeiten

Deine Vorraussetzungen

Personenkontrollen, Personenfahndungen, Mithilfe und Unterstützung bei kriminalpolizeilichen Aufgaben und Aktionen der Kantonspolizei Zürich

Unsere Nebenämter

Heading

Personenkontrollen, Personenfahndungen, Mithilfe und Unterstützung bei kriminalpolizeilichen Aufgaben und Aktionen der Kantonspolizei Zürich

Heading

Personenkontrollen, Personenfahndungen, Mithilfe und Unterstützung bei kriminalpolizeilichen Aufgaben und Aktionen der Kantonspolizei Zürich

Heading

Personenkontrollen, Personenfahndungen, Mithilfe und Unterstützung bei kriminalpolizeilichen Aufgaben und Aktionen der Kantonspolizei Zürich

Heading

Personenkontrollen, Personenfahndungen, Mithilfe und Unterstützung bei kriminalpolizeilichen Aufgaben und Aktionen der Kantonspolizei Zürich

Dich verwirklichen, in diversen Bereichen

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

Externe Fachstellen
Hilfe in diversen situationen

Fachstelle für lange Namen und grosse Titel, damit wir sehen wie es sich verhält.

Zur Fachstelle

Fachstelle für lange Namen und grosse Titel, damit wir sehen wie es sich verhält.

Zur Fachstelle

Fachstelle für lange Namen und grosse Titel, damit wir sehen wie es sich verhält.

Zur Fachstelle

Fachstelle für lange Namen und grosse Titel, damit wir sehen wie es sich verhält.

Zur Fachstelle

Fachstelle für lange Namen und grosse Titel, damit wir sehen wie es sich verhält.

Zur Fachstelle

Fachstelle für lange Namen und grosse Titel, damit wir sehen wie es sich verhält.

Zur Fachstelle

FAQ / Häufig gestellte Fragen

Wie lange benötigt mein Kind einen Kindersitz oder eine Sitzerhöhung im Auto?

Bis 12 Jahre, sofern es kleiner als 150cm ist. Mehr Informationen sind im Merkblatt vom Bundesamt für Strassen (ASTRA) enthalten..

Merkblatt ASTRA

Ab wann darf/muss mein Kind mit dem Fahrrad auf der Strasse fahren?

Kinder dürfen ab 6 Jahren alleine auf der Strasse fahren. Bis sie 12 Jahre alt sind, dürfen sie dort auf dem Trottoir fahren, wo Radwege oder - streifen fehlen. Mehr Informationen sind auf der Webseite der Beratungsstelle für Unfallverhütung (BfU) zu finden.

Homepage BfU

Gibt es Regeln für elektrische Trendfahrzeuge (E-Scooter, E-Bike etc.)?

Ja, die gibt es natürlich. Sie müssen beispielsweise immer Redwege oder -streifen nutzen. Mehr dazu ist im Merkblatt vom Bundesamt für Strassen (ASTRA) enthalten.

Merkblatt ASTRA

Wo darf ich mit meinem e-Trottinette fahren?

Ein E-Trottinette muss grundsätzlich auf der Strasse verkehren. Wenn es einen Radweg oder -streifen hat, ist dieser zu verwenden. Trottoirs sind für E-Trottinettes verboten. Die Fahrer/innen dürfen für Fussgänger/innen bestimmte Verkehrsflächen nur nutzen, wenn eine Zusatztafel «Radfahrer» vorhanden ist.

Muss ich mein e-Trottinette einlösen?

Nein, ein E-Trottinette kann nicht eingelöst werden.

Was versteht man unter einem fäG und gibt es dazu Regeln?

Das sind fahrzeugähnliche Geräte, für welche spezielle Regeln gelten. Mehr Informationen sind auf der Webseite der Beratungsstelle für Unfallverhütung (BfU) enthalten.

Homepage BfU

Wie muss ich meine Parkscheibe einstellen?

Fahrzeuge dürfen an Werktagen (Montag bis Samstag) zwischen 8.00 und 11.30 Uhr sowie zwischen 13.30 und 18.00 Uhr eine Stunde in der Blauen Zone parkiert werden. Bei einer Ankunftszeit zwischen 11.30 und 13.30 Uhr gilt die Parkerlaubnis bis 14.30 Uhr. Bei einer Ankunftszeit zwischen 18.00 und 8.00 Uhr bis 9.00 Uhr.

Das Einstellrad auf der Parkscheibe muss immer auf den der Ankunftszeit folgenden Strich eingestellt werden.

Was mache ich, wenn mein Portemonnaie/Fahrrad/etc. gestohlen wurde?

Man hat jederzeit die Möglichkeit, in einem Polizeiposten der kommunalen Polizeikorps (Karte) oder bei der Kantonspolizei eine Anzeige aufzugeben. Weiter hat man auch die Möglichkeit, gewisse Anzeigen im Internet unter Suisse e-Police aufzugeben (Link unten). Beispielsweise Diebstähle, Sachbeschädigungen, Kontrollschildverluste und Cyber-Delikte. Es gilt jedoch zu beachten, dass nicht alle erwähnten Anzeigen online aufgenommen werden können. Auch hier gibt es Spezialfälle, bei welchen eine persönliche Anzeige am Schalter unabdingbar ist.

Suisse e-Police

Wann ist nachtruhe?

Die Nachtruhe beginnt ab 2200 Uhr und dauert in der Regel bis 0700 Uhr. An Sonn- und allgemeinen Feiertagen ist zudem besonders Rücksicht zu nehmen und Lärm möglichst zu vermeiden.

Darf ich Cannabis mitführen?

Gemäss aktueller Rechtsprechung darf eine Person weniger als 10 Gramm, also eine geringfügige Menge, mitführen, sofern sie für den Eigengebrauch bestimmt ist.

Vierbeinige Unterstützung:
Der Diensthundeführer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

button text

Vierbeinige Unterstützung:
Der Diensthundeführer

button text

FLG I | Führung auf erster Ebene

Der FLP I ist ein essentieller Lehrgang für Polizistinnen und Polizisten, die sich auf der ersten Führungsebene bewegen oder für eine solche Position vorgesehen sind. Dieser Kurs legt den Grundstein für effektive betriebliche und Einsatzführung auf dieser Ebene.

Aufbau

Struktur

Der Lehrgang ist in zwei Hauptteile unterteilt: ein viertägiges Seminar und einen achttägigen Kurs. Beide Abschnitte werden mit einer schriftlichen Überprüfung der Lernziele abgeschlossen. Die Seminare werden in Schwarzenburg und die Kurse in Hitzkirch abgehalten.

Ausrüstung

Teilnehmer sollten in Zivilkleidung erscheinen und Sportausrüstung für individuelle sportliche Aktivitäten außerhalb der Kurszeit mitbringen.

Weitere Informationen

Alle Teilnehmer müssen sowohl an einem Seminar als auch an einem Kurs teilnehmen. Die spezifischen Lehrmittel für jeden Modul sind in den jeweiligen Modulbeschreibungen aufgeführt.

Infos und Anmeldung

FLG I | Führung auf erster Ebene

Aufbau

Struktur

Ausrüstung

Teilnehmer sollten in Zivilkleidung erscheinen und Sportausrüstung für individuelle sportliche Aktivitäten außerhalb der Kurszeit mitbringen.

Weitere Informationen

Alle Teilnehmer müssen sowohl an einem Seminar als auch an einem Kurs teilnehmen. Die spezifischen Lehrmittel für jeden Modul sind in den jeweiligen Modulbeschreibungen aufgeführt.

Infos und Anmeldung

Call to actions

Organisation der Kompol

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt et dolore magna sed diam voluptu por invidunt et dolore magna sed diam voluptua.a.

button text

Konkrete
Fragen?

Hast du Fragen zur Kompol oder ein Anliegen direkt an eine Dienststelle?
Einfach das Formular ausfüllen und die zuständige Person meldet sich bei dir.

Kontaktieren

Forms & Contact

Kontakt
Aufnehmen

Fragen zur Kompol oder ein Anliegen direkt an eine Dienststelle? Einfach das Formular ausfüllen und die zuständige Person meldet sich sobald als möglich.

BITTE BEACHTE:
Dieses Formular ist nicht für Notfälle gedacht.

vielen Dank! wir haben ihr formular erhalten.

Vorsicht!
Formular konnte nicht versendet werden. Bitte erneut versuchen

Lists

lorem ipsum dolor sit amet

button text

Job Titel 001