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
Show Outlines
Impressum
Web-Styleguide Kanton Bern
Start
Styles
Brand Colors
Vordergrund-Farben
Black
Red
Hintergrund-Farben
Black
Red
Light Sand
Sand
Dark Sand
Sand (Hover)
Cappuchino
Functional Colors
Vordergrund-Farben
Dark-Red
Blue
Green
Orange
Anthrazit
Grey
Light-Grey
White
Hintergrund-Farben
Dark-Red
Blue
Green
Orange
Dark-Red (10%)
Blue (10%)
Green (10%)
Orange (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
H6 Size
H5 Size
H4 Size (S Viewport)
H4 Size
H3 Size (S Viewport)
H3 Size (M Viewport)
H3 Size
H2 Size (S Viewport)
H2 Size (M Viewport)
H2 Size
H1 Size (S Viewport)
H1 Size (M Viewport)
H1 Size
Body-Text Size
Intro-Text Size
Extra-Small-Text Size
Very-Small-Text Size
Small-Text Size
Large-Text Size
Very-Large-Text Size
Logo Caption Size (mobile)
Logo Caption Size (mobile) 2 rows
Logo Caption Size
Body-Text Size (mobile)
Intro-Text Size (mobile)
General Icons
Icon: information-anthrazit.svg
Information
Help (anthrazit)
Help
Notice
Corygright Notice
Upload complete
Enlarge
Options
Hamburger Menue
Close
Pause
Speaker
Audio Play
Login
Volume
Volume (hover)
Download
Download (hover)
Search
Search Icon mobile
Aniumated Spinner
Newsletter
Valid
Invalid (Error)
Warning
Logout
User
User (with Badge)
Hide
Show
Print
Chat
RSS
Explanation mark
Success
Chat Submit
E-Mail
Arrow next
Arrow back
Arrow next (not-active)
Arrow back (not-active)
Important list item
Arrow top
Arrow down
Arrow down
Arrow Breadcrumb
Arrow right
Arrow back
Home button
Home button (hover)
Scroll down (white)
Submit arrow
Success (white)
Explanation mark (white)
Arrow top (white)
Close Icon (white)
Icon: datepicker.svg
Jump2top (small)
Jump2top
Grey bullet
Red bullet
Circle black
Minus
Plus
Process Steps
Icon: ps-error-small.svg
Icon: ps-error.svg
Icon: process-warning-end-small.svg
Icon: process-warning-end.svg
Icon: ps-notice-small.svg
Icon: ps-notice.svg
Icon: ps-done-small.svg
Icon: ps-done.svg
Process-Steps opened
Process-Steps closed
Accordion (active)
Accordion
Icon: ps-active-small.svg
Icon: ps-active.svg
Icon: ps-edit.svg
Icon: ps-inactive-small.svg
Icon: ps-inactive.svg
Social Media & Sharing
Facebook icon (color)
Facebook icon (black)
Instagram icon (color)
Instagram icon (black)
X icon (color)
X icon (black)
WhatsApp icon (color)
WhatsApp icon (black)
YouTube icon (color)
YouTube icon (black)
Linkedin icon (color)
Linkedin icon (black)
RSS icon (color)
RSS icon (black)
E-Mail icon (color)
Blog Icon
Kununu 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
Small Text
Intro-Text
Intro-Text (Footer KBE)
Text-Link
Logo Caption
Logo Caption (Footer)
Copyright-Box (1)
Copyright-Box (2)
DateModified
Divider with text in the middle
Placeholder
Notice to form elements
Splitter List
Liste
Liste (mehrfache Einzüge)
Text-Link as Container in Link-List
Mark
Link with Arrow
Back-to-Overview Link
Floating label (visible)
Sucheinstellungen
Text-Column 33%
Text-Column 50%
Text-Column 75%
Link with arrow down
Label before Headline
Label in Teaser
Label in Teaser (small)
Logo Caption (max. length)
Image-Caption
Very short Explanation Text in Box
Copyright
Suberscribe
Text in Box
Search Suggestion
Media Elements
Logo
SwissID Logo
YouTube (color)
YouTube (black)
Instagram (color)
Instagram (black)
Twitter (color)
Twitter (black)
Facebook (color)
Facebook (black)
linkedin (black)
RSS (black)
Google+ (black)
xing (black)
kununu (black)
E-Mail (color)
Email-Abo
RSS-Abo
Selectbox Icon
Enlarge-Icon
Thumbnail Image
Lightbox Image
Video Play Button
Jump2top-Icon
Darkening Image Overlay
Image 3to4 25%
Image 3to4 50%
Buttons
Call-to-Action Button
Primary Button
Login Button
Send Button
Go-Next Button (horizontal)
Secondary Button
Secondary Button (100% width)
Go-Back Button (horizontal)
Loading Button
Second. Button n-active
Primary Button n-active
Navigation Elements
Small Button
Service-Menue-Item
Service-Menue Login
Service-Menue Logged-In
Service-Menue Logged-In (in DLN)
Service-Menue Logged-In (with Badge)
Service-Menue Login active
Service-Menue BE-Login active
Language-Selector item
Language-Selector
Menue-Item-1 in DropDown
Menue-Item-2 in DropDown
Menue-Item-3 in DropDown
Inpage-Navigation
Main-Menue-Item
Main-Menue-Item (Theme)
Main-Menue-Item (active)
Breadcrumb Link
BC Home
Search-Icon in Main-Menue (active)
Search-Icon in Main-Menue
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
Tab 2 (active)
Main-Menue-Item (Campaign)
Inpage-Navigation Link
Inpage-Navigation active Link
BC Arrow
Pagination Text
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
Breadcrumb
Arrow-Link
Back-Link
Back-Link 2
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
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 (Theme)
Signet (2-row caption)
Social Media Icons
Header (Campaign-Site)
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
Info-Box mit C2A
Image (small) + Text (2 Column)
Image + Text (2 Column)
Image-Teaser
Lightbox Information
Lightbox Information PB
Liste mit H3, C2A + Trennlinien
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
Startpage (Theme)
OnePager
Detailpage
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
×