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
Black
Red
Hintergrund-Farben
Black
Red
Sand
Light Sand
Dark Sand
Cappuchino
Sand (Hover)
Functional Colors
Vordergrund-Farben
Dark-Red
Green
Orange
Anthrazit
Blue
White
Light-Grey
Grey
Hintergrund-Farben
Dark-Red (10%)
Orange
Dark-Red
Orange (10%)
White
Blue
Green
Anthrazit
Blue (10%)
Green (10%)
Dark Grey
Light Grey
Grey
Line Grey (50%)
Anthrazit (Hover)
Very Light Grey
Typography
Schrift-Fonts
Roboto 100 (thin)
Roboto 300 (light)
Roboto 400 (regular)
Roboto 500 (medium)
Roboto 700 (bold)
Schrift-Grössen
Intro-Text Size
H4 Size (S Viewport)
H3 Size (S Viewport)
H3 Size (M Viewport)
H2 Size (S Viewport)
H1 Size (M Viewport)
H2 Size (M Viewport)
H1 Size (S Viewport)
H5 Size
H3 Size
Body-Text Size
H1 Size
H4 Size
Very-Large-Text Size
Very-Small-Text Size
H2 Size
Large-Text Size
Small-Text Size
Logo Caption Size
Logo Caption Size (mobile)
Logo Caption Size (mobile) 2 rows
Extra-Small-Text Size
H6 Size
Body-Text Size (mobile)
Intro-Text Size (mobile)
General Icons
Icon: information-anthrazit.svg
Information
Notice
Help
Help (anthrazit)
Chat Submit
Chat
Options
Print
E-Mail
Show
Hide
Login
Logout
User
User (with Badge)
Invalid (Error)
Valid
Warning
Volume
Volume (hover)
Download
Download (hover)
RSS
Newsletter
Audio Play
Speaker
Pause
Enlarge
Corygright Notice
Aniumated Spinner
Search
Search Icon mobile
Arrow right
Arrow Breadcrumb
Arrow back
Arrow down
Success
Success (white)
Explanation mark (white)
Close Icon (white)
Arrow top (white)
Scroll down (white)
Submit arrow
Icon: datepicker.svg
Arrow top
Arrow down
Arrow next
Arrow back
Arrow next (not-active)
Arrow back (not-active)
Important list item
Red bullet
Grey bullet
Home button
Home button (hover)
Close
Hamburger Menue
Circle black
Upload complete
Jump2top
Jump2top (small)
Minus
Plus
Explanation mark
Process Steps
Icon: ps-error-small.svg
Icon: ps-error.svg
Icon: process-warning-end.svg
Icon: process-warning-end-small.svg
Process-Steps opened
Process-Steps closed
Accordion (active)
Accordion
Icon: ps-active-small.svg
Icon: ps-active.svg
Icon: ps-done-small.svg
Icon: ps-done.svg
Icon: ps-notice.svg
Icon: ps-notice-small.svg
Icon: ps-inactive.svg
Icon: ps-inactive-small.svg
Icon: ps-edit.svg
Social Media & Sharing
Linkedin icon (black)
X icon (black)
X icon (color)
WhatsApp icon (black)
WhatsApp icon (color)
YouTube icon (black)
YouTube icon (color)
RSS icon (color)
RSS icon (black)
Kununu icon
Blog Icon
E-Mail icon (color)
Instagram icon (color)
Facebook icon (color)
Instagram icon (black)
Facebook icon (black)
Linkedin icon (color)
Atoms
Text Elements
DateModified
Intro-Text
Notice to form elements
Placeholder
Copyright-Box (1)
Copyright-Box (2)
Divider with text in the middle
Body-Text
Logo Caption
Logo Caption (Footer)
H3 (Form)
H2 (Form)
Text-Link
Splitter List
Liste (mehrfache Einzüge)
Liste
Text-Link as Container in Link-List
Mark
Link with Arrow
Back-to-Overview Link
Floating label (visible)
H4
H2 (Detailseite)
H3
H1
H1 (GDS)
Sucheinstellungen
Text-Column 33%
Text-Column 50%
H2
Small Text
Link with arrow down
H5
Label in Teaser
Image-Caption
Logo Caption (max. length)
Intro-Text (Footer KBE)
Very short Explanation Text in Box
Copyright
Suberscribe
H2 (center)
Label before Headline
Text in Box
Search Suggestion
H1 (center)
H3 (center)
Text-Column 75%
Label in Teaser (small)
Media Elements
SwissID Logo
YouTube (color)
YouTube (black)
Instagram (color)
Instagram (black)
linkedin (black)
RSS (black)
Facebook (black)
Logo
Twitter (black)
Twitter (color)
RSS-Abo
Email-Abo
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
Secondary Button
Primary Button
Secondary Button (100% width)
Login Button
Send Button
Go-Next Button (horizontal)
Go-Back Button (horizontal)
Loading Button
Second. Button n-active
Primary Button n-active
Navigation Elements
Service-Menue Logged-In (in DLN)
Menue-Item-1 in DropDown
Language-Selector item
Language-Selector
Service-Menue Logged-In (with Badge)
Menue-Item-3 in DropDown
Menue-Item-2 in DropDown
Service-Menue BE-Login active
Service-Menue Login active
Breadcrumb Link
Inpage-Navigation
Service-Menue Logged-In
Main-Menue-Item (active)
Service-Menue-Item
Service-Menue Login
Main-Menue-Item (Theme)
BC Home
Search-Icon in Main-Menue (active)
Search-Icon in Main-Menue
Main-Menue-Item
Inpage-Search Title (H4)
Pagination Nummer
Inpage-Navigation Title (H4)
Search Input
Sliding Navigation
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
Unverlinkte Textstelle mit Tooltip
Text-Link mit Tooltip
Button mit Tooltip
Hilfe-Hinweis
Infobox (per default offen)
Infobox
Kontaktbox
Teaser in Hero-Image
Result-1
Grey line
Accordion
Headline with Link
Table (sortable, without arrows)
Table (without arrows)
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)
GR/RR
Table (Eingereichte Vorstösse)
Table (Mitgliederdetails 1)
Sessions-Details
Table (2-Column)
File list (Dokumenten-Liste)
File list (Dokumenten-Liste) 2
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
LogIn-Dropdown
Arrow-Link
Back-Link
Back-Link 2
Breadcrumb
End of News-List
Inpage-Search
Inpage-Search (extended)
OffCanvas Service-Navigation
Pagination
Pagination (ohne Input)
Tabs (Inpage Filter)
Tabs (Search-Result Filter)
Header + Footer
Header (Campaign-Site)
Main-Menue (Detailpages)
Main-Menue (OnePager)
Main-Menue (Startpage)
Main-Menue (Theme-Site)
Service-Navigation
Service-Navigation BE-Login
Service-Navigation Logged-In (V1)
Service-Navigation Logged-In (V2)
Service-Navigation Login
Signet
Signet (2-row caption)
Signet (Theme)
Social Media Icons
Content
Feedback-Box (Error)
Feedback-Box (Notice)
Feedback-Box (Success)
Feedback-Box (Warning)
Gallery Image
Hero-Area (Big Image)
Hero-Area (Big Image - small HL)
Hero-Area (Right-Column)
Hero-Area (Right-Column Small HL)
Hero-Area (Sub-Row)
Hero-Area (Sub-Row Small HL)
Hero-Area (Theme-Site)
Hero-Image Detailpage
Hinweis Box
Image (small) + Text (2 Column)
Image + Text (2 Column)
Image-Teaser
Lightbox Information
Lightbox Information PB
List with H3 and line
Meldungsbox
News List Item (full-width)
News List Item in Content
Search Result 1
Search Result with Image
Share Page
Splitter extended
Step Box
Step Box (inactive)
Step Box (long Text)
Summary Box
Table (Default)
Table (large numbers, colored colum)
Text + Image (2 Column)
Text + Image (small) - 2 Column
Text-Teaser red
Text-Teaser sand
Text-Teaser sand
Video Container
Form + Interaction
Textarea
Inputfield
Invalid Input
Input with notice
Inputfield (small)
Inputfield (optional)
Inputfield (with Tooltip)
Inputfield (optional + Tooltip)
Inputfield (Password)
Inputfield (Date from)
Inputfield (Date to)
Inputfield (File-Upload)
Inputfield (File-Upload error)
Inputfield (File-Upload success)
Select-Box
Select-Box (small)
List Checkboxes
Inline Checkboxes
List Radio-Buttons
Inline Radio-Buttons
Inline Radio-Buttons (error)
Form Buttons
Submit Buttons
Submit Button
GR/RR
Accordion (Mitgliederdetailseite)
Accordion (Traktanden)
Accordion (white)
Erweiterte Suche
Erweiterte Suche (MS)
Gremienliste
Inpage-Search (Geschäftssuche)
Inpage-Search (Mitgliederssuche)
Mitgliederliste Gremium
Mitgliederliste maximal
Table (search results)
Table (sessions)
Table (sortable, linked)
Trefferliste (Mitgliedersuche)
_RR Geschäftsliste (Beschlüsse)
_RR Geschäftsliste (Ergebnis Suche)
_RR Geschäftsliste (Vorstösse)
Organisms
Navigation
DLN-Start
DLN-Tile
DLN-Tile (Aufruf von Detailseite)
Search-Area
Header + Footer Elements
Header (Default)
Header (2 rows caption)
Header (Logged-In)
Header (Logged-In with notice-badge)
Header (with DropDown-Menue)
Header (Application)
Footer (Default)
Content Elements
Hero-Area
Hero-Area (Small Headlines)
Hero-Area (Theme)
Main-Column
Main-Column (News)
Main-Column (mit Bereichssuche)
Main-Column (BE-Login)
Main-Column (Several Logins)
Main-Column (Login)
Search-Result-Column
Image Gallery
Lightbox
Above-the-fold (Campaign-Site)
Context-Column
Context-Column (empty)
Image-Teaser-Group (Full-Width)
Image-Teaser-Group (Main-Column)
Text-Teaser-Group (Full-Width)
Text-Teaser-Group (Main-Column)
Link-List-Group
Table (Default)
Table (with big numbers)
Form Elements
Form
GR/RR
Footer (GR)
Footer (RR)
Header (GR)
Header (RR)
Lightbox Protokollbereich
Main-Column Geschäftsdetailseite
Main-Column Geschäftsliste
Main-Column Geschaeftssuche
Main-Column Gremiendetailseite
Main-Column Gremienliste
Main-Column Mitglieder
Main-Column Mitgliederdetailseite
Main-Column Traktanden-Liste
_RR Main-Column Geschäftsdetailseite
_RR Main-Column Sitzungs-Liste
Grid & Page-Templates
Page-Templates
Startpage
Detailpage
Startpage (Theme)
OnePager
Login V1
Login V2
Login V3 (minimal)
Search Result Page
Search Result Page (no matches)
Lightbox
Grid Behaviour
Resonsives Verhalten des Grids
Grid (Startpage)
Grid (OnePager)
Grid (Detailpage)
Navigation
Application Navigation
Application Navigation (Icons)
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
×