Web-Styleguide Kanton Bern
×
Start
Styles
Atoms
Molecules
Organisms
Grid & Page-Templates
Prototypes & Links
Impressum
Web-Styleguide Kanton Bern
100%
L
M
S
XS
Web-Styleguide Kanton Bern
Downloads
Show Outlines
Impressum
Web-Styleguide Kanton Bern
Start
Styles
Brand Colors
Vordergrund-Farben
Red
Hintergrund-Farben
Light Sand
Sand
Dark Sand
Sand (Hover)
Cappuchino
Black
Red
Functional Colors
Vordergrund-Farben
Black
Grey
Light-Grey
White
Hintergrund-Farben
Green
Green (10%)
Blue
Blue (10%)
Warning-Color
Warning-Color (10%)
Red (Hover bzw. Error-Color)
Red (10%)
Anthrazit (Hover)
Anthrazit
Dark Grey
Line Grey (50%)
Grey
Light Grey
Very Light Grey
White
Typography
Schrift-Fonts
Roboto 100 (thin)
Roboto 300 (light)
Roboto 400 (regular)
Roboto 500 (medium)
Roboto 700 (bold)
Schrift-Grössen
H1 Size
H1 Size (M Viewport)
H1 Size (S Viewport)
H2 Size
H2 Size (M Viewport)
H2 Size (S Viewport)
H3 Size
H3 Size (M Viewport)
H3 Size (S Viewport)
H4 Size
H4 Size (S Viewport)
H5 Size
H6 Size
Body-Text Size
Intro-Text Size
Very-Large-Text Size
Very-Small-Text Size
Extra-Small-Text Size
Large-Text Size
Small-Text Size
Logo Caption Size
Logo Caption Size (mobile)
Logo Caption Size (mobile) 2 rows
Body-Text Size (mobile)
Intro-Text Size (mobile)
General Icons
Icon: chat-submit.svg
Icon: Chat.svg
Icon: spinner.svg
Icon: Newsletter
RSS icon
Icon für Urheber-Hinweis
Icon: Upload Icon komplett.svg
Enlarge icon
Icon: Download-Icon.svg
Icon: Download-Icon.svg (hover)
Icon: Volume-Icon.svg
Icon: Volume-Icon.svg (hover)
Audio Play icon
Break icon
Speaker icon
Icon: Options-Icon.svg
Scroll down (white)
Arrow top (white)
Submit arrow
Success (white)
Explanation mark (white)
Close Icon (white)
Icon: datepicker.svg
Search icon
Search Icon mobile
Login icon
Logout icon
Arrow down
Arrow next
Arrow back
Arrow back (not-active)
Arrow next (not-active)
Important list item
Arrow top
Arrow down
Jump2top
Jump2top (small)
Arrow right
Arrow back
Arrow Breadcrumb
Grey bullet
Red bullet
Circle black
Home button
Home button (hover)
Minus
Plus
Close Icon
Hamburger icon
Explanation mark
Success
Valid icon
Invalid (Error) icon
Warning icon
Notice icon
Help icon
Process Steps
Icon: ps-edit.svg
Icon: ps-active.svg
Icon: ps-active-small.svg
Icon: ps-done.svg
Icon: ps-done-small.svg
Icon: ps-inactive.svg
Icon: ps-inactive-small.svg
Icon: ps-error.svg
Icon: ps-error-small.svg
Icon: ps-notice.svg
Icon: ps-notice-small.svg
Icon: process-warning-end.svg
Icon: process-warning-end-small.svg
Process-Steps opened
Process-Steps closed
Accordion (active)
Accordion
Social Media & Sharing
Icon: Sharing-Icon.svg
Icon: Sharing-Icon.svg (hover)
E-Mail icon (color)
RSS icon (black)
RSS icon (color)
YouTube icon (black)
YouTube icon (color)
Icon: twitter-black-white.svg
Icon: twitter-color.svg
Linkedin icon
Linkedin icon (color)
Facebook icon (black)
Facebook icon (color)
Instagram icon (black)
Instagram icon (color)
Kununu icon
Blog Icon
Atoms
Text Elements
H1
H1 (center)
H1 (GDS)
H2
H2 (center)
H2 (Detailseite)
H2 (Form)
H3
H3 (center)
H3 (Form)
H4
H5
Body-Text
Intro-Text
Small Text
Text in Box
Very short Explanation Text in Box
Intro-Text (Footer KBE)
Text-Link
Text-Link as Container in Link-List
Link with Arrow
Copyright-Box (1)
Copyright-Box (2)
Liste
Liste (mehrfache Einzüge)
Floating label (visible)
Back-to-Overview Link
Link with arrow down
Mark
Splitter List
Logo Caption
Logo Caption (max. length)
Logo Caption (Footer)
Text-Column 75%
Text-Column 50%
Text-Column 33%
Label in Teaser
Label in Teaser (small)
Label before Headline
Sucheinstellungen
Image-Caption
Copyright
Suberscribe
Search Suggestion
Notice to form elements
Placeholder
Media Elements
YouTube (color)
YouTube (black)
Instagram (color)
Instagram (black)
linkedin (black)
RSS (black)
Facebook (black)
Logo
Twitter (black)
Twitter (color)
RSS-Abo
Email-Abo
Portrait
Image 3to4 25%
Selectbox Icon
Enlarge-Icon
Google+ (black)
Thumbnail Image
Lightbox Image
Facebook (color)
E-Mail (color)
Video Play Button
Jump2top-Icon
Darkening Image Overlay
Image 3to4 50%
xing (black)
kununu (black)
Buttons
Submit Button
Go-Back Button (horizontal)
Go-Next Button (horizontal)
Loading Button
Second. Button n-active
Primary Button n-active
Primary Button
Secondary Button
Navigation Elements
Service-Menue Login
Main-Menue-Item (Theme)
Service-Menue-Item
Breadcrumb Link
Language-Selector
BC Home
Search-Icon in Main-Menue (active)
Search-Icon in Main-Menue
Main-Menue-Item
Main-Menue-Item (active)
Inpage-Search Title (H4)
Pagination Nummer
Inpage-Navigation
Inpage-Navigation Title (H4)
Search Input
Sliding Navigation
Language-Selector item
Language-Selector active item
Hamburger Icon
Search Icon mobile
Main-Menue-Sub-Item
Main-Menue-Sub-Page
Footer-Menue-Item
Main-Menue-active (Campaign)
Search-Icon in MM (Campaign)
Tab (active)
Tab
Main-Menue-Item (Campaign)
Tab 2 (active)
Inpage-Navigation Link
Inpage-Navigation active Link
BC Arrow
Pagination Text
Small Button
Input for Pagination
Layout Elements
Teaser in Hero-Image
Result-1
Grey line
Accordion
Headline with Link
Table (sortable, without arrows)
Table (without arrows)
Kontaktbox
Infobox
Infobox (per default offen)
Lightbox PB main-column
Right-Hero-Teaser
Right-Hero-Teaser (big)
Right-Hero-Teaser (red)
Teaser in Hero-Image (Theme-Site)
Light Grey Line
Overlay Wrapper
Beige line
Right-Hero-Teaser (small red)
Right-Hero-Teaser (small)
Right-Hero-Teaser (small big)
Teaser in Hero-Image (small)
DISCARDED
Submit Button (discarded)
Table (with arrows)
Table (sortable, with arrows)
Quotation
BC Dropdown
Bullet Pagination (Navigation)
Important Notice
GR/RR
Sessions-Details
Table (2-Column)
File list (Dokumenten-Liste)
File list (Dokumenten-Liste) 2
Table (Eingereichte Vorstösse)
Table (Mitgliederdetails 1)
Table (Mitgliederdetails 3)
Table (Mitgliederdetails 2)
Audio Control
Audio Options
Beschlüsse
Audio Options Icon
Audio Options Icon (active)
Accordion (with white content)
Audio Time
Audio play-control
Audio play-control (active)
Molecules
Navigation
End of News-List
Inpage-Search (extended)
Back-Link 2
Inpage-Search
Arrow-Link
Breadcrumb
Back-Link
DLN-Header
OffCanvas Service-Navigation
Menue-Item
Menue-Page
Menue-Item active
Search Suggestions (active)
Search Input Container
Pagination (ohne Input)
Pagination
Tabs (Search-Result Filter)
Tabs (Inpage Filter)
Header + Footer
Signet (2-row caption)
Service-Navigation
Main-Menue (OE)
Main-Menue (Kantonsportal)
Footer-Navigation
Main-Menue (Startpage OE)
Main-Menue (Theme-Site)
Signet (Theme)
Social Media Icons
Signet (OE)
Header (Campaign-Site)
Content
Search Result 1
Search Result with Image
Text-Teaser sand
Gallery Image
Table (Default)
Table (large numbers, colored colum)
Hinweis Box
Meldungsbox
Feedback-Box (Error)
Feedback-Box (Success)
Feedback-Box (Warning)
Feedback-Box (Notice)
Step Box
Step Box (inactive)
Step Box (long Text)
Lightbox Information PB
Image-Teaser
Splitter extended
Text-Teaser sand
Share Page
List with H3 and line
Text-Teaser red
Hero-Area (Sub-Row)
Summary Box
News List Item in Content
News List Item (full-width)
Video Container
Hero-Area (Sub-Row Small HL)
Hero-Area (Big Image)
Hero-Area (Theme-Site)
Hero-Image Detailpage
Hero-Area (Right-Column)
Text + Image (2 Column)
Image (small) + Text (2 Column)
Hero-Area (Big Image - small HL)
Image + Text (2 Column)
Text + Image (small) - 2 Column
Hero-Area (Right-Column Small HL)
Lightbox Information
Form + Interaction
Inputfield
Inputfield with watermark
Inputfield (optional)
Inputfield (optional + Tooltip)
Valid Input
Invalid Input
Inputfield (with Tooltip)
Inputfield (small)
Inputfield (medium)
Select-Box
Select-Box (valid)
Select-Box (50%)
Select-Box with Optgroup (50%)
Inline Checkboxes
List Checkboxes
Textarea
Inline Radio-Buttons
Inline Radio-Buttons (error)
List Radio-Buttons
Inputfield (File-Upload)
Inputfield (File-Upload success)
Inputfield (File-Upload error)
Inputfield (Date from)
Inputfield (Date to)
Form Buttons
GR/RR
Accordion (white)
Accordion (Mitgliederdetailseite)
Accordion (Traktanden)
Erweiterte Suche
_RR Geschäftsliste (Vorstösse)
_RR Geschäftsliste (Ergebnis Suche)
_RR Geschäftsliste (Beschlüsse)
Erweiterte Suche (MS)
Inpage-Search (Mitgliederssuche)
Table (sortable, linked)
Table (search results)
Table (sessions)
Trefferliste (Mitgliedersuche)
Inpage-Search (Geschäftssuche)
Gremienliste
Mitgliederliste Gremium
Mitgliederliste maximal
Organisms
Navigation
DLN-Tile
DLN-Tile (Aufruf von Detailseite)
DLN-Start
Search-Area
Header + Footer Elements
Footer (OE)
Header (OE)
Header (Kantonsportal)
Footer (Kantonsportal)
Header (Startpage OE)
Header (Startpage OE - scrolling)
Header (OE - 2 rows caption)
Header (Theme)
Content Elements
Search-Result-Column
Main-Column
Text-Teaser-Group (Main-Column)
Text-Teaser-Group (Full-Width)
Image-Teaser-Group (Full-Width)
Image-Teaser-Group (Main-Column)
Hero-Area
Hero-Area (Theme)
Link-List-Group
Lightbox
Context-Column
Above-the-fold (Campaign-Site)
Image Gallery
Hero-Area (Small Headlines)
Table (with big numbers)
Table (Default)
Main-Column (mit Bereichssuche)
Main-Column (News)
Form Elements
Form
GR/RR
Main-Column Mitglieder
Main-Column Geschaeftssuche
Main-Column Gremiendetailseite
Main-Column Gremienliste
Main-Column Mitgliederdetailseite
Main-Column Geschäftsdetailseite
_RR Main-Column Geschäftsdetailseite
Main-Column Geschäftsliste
Header (GR)
Header (RR)
Main-Column Traktanden-Liste
_RR Main-Column Sitzungs-Liste
Footer (GR)
Footer (RR)
Lightbox Protokollbereich
Grid & Page-Templates
App-Design
Page-Templates
Startpage
Startpage (Theme)
OnePager
Detailpage
Search Result Page
Search Result Page (no matches)
Lightbox
Grid Behaviour
Resonsives Verhalten des Grids
Grid (Startpage)
Grid (OnePager)
Grid (Detailpage)
Navigation
Some Hints
Deep Level Navigation
GR/RR
Mitglieder (inkl. Suche)
_RR Sitzungs-Liste
_RR Traktanden-Liste
_RR Geschäftsdetailseite
Gremiendetailseite
Gremienliste
Geschäftssuche
Mitgliederdetailseite
Geschäftsdetailseite
Geschäftsliste
Traktanden-Liste
Prototypes & Links
Process Steps Form
Chatbot Design
App Design
×