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
Black
Cappuchino
Dark Sand
Light Sand
Red
Sand
Sand (Hover)
Functional Colors
Vordergrund-Farben
Black
Grey
Light-Grey
White
Hintergrund-Farben
Anthrazit
Anthrazit (Hover)
Dark-Mode-bg
Blue
Blue (10%)
Dark Grey
Green
Green (10%)
Grey
Light Grey
Line Grey (50%)
Red (10%)
Red (Hover bzw. Error-Color)
Very Light Grey
Warning-Color
Warning-Color (10%)
White
Typography
Schrift-Fonts
Roboto 100 (thin)
Roboto 300 (light)
Roboto 400 (regular)
Roboto 500 (medium)
Roboto 700 (bold)
Schrift-Grössen
Body-Text Size
Body-Text Size (mobile)
Extra-Small-Text Size
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
Intro-Text Size
Intro-Text Size (mobile)
Large-Text Size
Logo Caption Size
Logo Caption Size (mobile)
Logo Caption Size (mobile) 2 rows
Small-Text Size
Very-Large-Text Size
Very-Small-Text Size
General Icons
Arrow back
Arrow back (not-active)
Arrow next
Arrow next (not-active)
Arrow top
Arrow down
Arrow top (white)
Arrow back
Arrow right
Arrow right (SVG Code)
Arrow down
Arrow Breadcrumb
Audio Play icon
Break icon
Circle black
Close Icon
Close Icon (white)
E-Mail
Enlarge icon
Explanation mark
Explanation mark (white)
Grey bullet
Hamburger icon
Help icon
Hide icon
Home button
Home button (hover)
Icon: chat-submit.svg
Icon: Chat.svg
Icon: datepicker.svg
Icon: Download-Icon.svg
Icon: Download-Icon.svg (hover)
Icon: Newsletter
Icon: Options-Icon.svg
Icon: spinner.svg
Icon: Upload Icon komplett.svg
Icon: Volume-Icon.svg
Icon: Volume-Icon.svg (hover)
Icon für Urheber-Hinweis
Important list item
Invalid (Error) icon
Jump2top
Jump2top (small)
Login icon
Logout
Minus
Notice icon
Plus
Red bullet
RSS icon
Scroll down (white)
Search icon
Search Icon mobile
Show icon
Speaker icon
Submit arrow
Success
Success (white)
User icon
User icon (with Badge)
Valid icon
Warning icon
Process Steps
Accordion
Accordion (active)
Icon: process-warning-end-small.svg
Icon: process-warning-end.svg
Icon: ps-active-small.svg
Icon: ps-active.svg
Icon: ps-done-small.svg
Icon: ps-done.svg
Icon: ps-edit.svg
Icon: ps-error-small.svg
Icon: ps-error.svg
Icon: ps-inactive-small.svg
Icon: ps-inactive.svg
Icon: ps-notice-small.svg
Icon: ps-notice.svg
Process-Steps closed
Process-Steps opened
Social Media & Sharing
Blog Icon
E-Mail icon (color)
Facebook icon (black)
Facebook icon (color)
Icon: Sharing-Icon.svg
Icon: Sharing-Icon.svg (hover)
Icon: twitter-black-white.svg
Icon: twitter-color.svg
Instagram icon (black)
Instagram icon (color)
Kununu icon
Linkedin icon
Linkedin icon (color)
RSS icon (black)
RSS icon (color)
YouTube icon (black)
YouTube icon (color)
Atoms
Text Elements
H1
H1 (center)
H1 (GDS)
H2
H2 (center)
H2 (Detailseite)
H2 (Form)
H3
H3 (center)
H3 (Form)
H4
H5
Intro-Text
Body-Text
Divider with text in the middle
Small Text
Text-Column 33%
Text-Column 50%
Text-Column 75%
Text-Link
Text-Link as Container in Link-List
Logo Caption
Logo Caption (max. length)
Logo Caption (Footer)
Liste
Liste (mehrfache Einzüge)
Copyright-Box (1)
Copyright-Box (2)
Splitter List
Mark
Intro-Text (Footer KBE)
Back-to-Overview Link
Link with Arrow
Label in Teaser
Image-Caption
Link with arrow down
Floating label (visible)
Sucheinstellungen
Very short Explanation Text in Box
Copyright
Suberscribe
Label before Headline
Text in Box
Search Suggestion
Label in Teaser (small)
Notice to form elements
Placeholder
Media Elements
SwissID Logo
Logo
Selectbox Icon
Enlarge-Icon
Image 3to4 25%
Instagram (color)
YouTube (color)
Facebook (color)
Twitter (color)
E-Mail (color)
Instagram (black)
YouTube (black)
Facebook (black)
Twitter (black)
linkedin (black)
xing (black)
Google+ (black)
kununu (black)
RSS (black)
Email-Abo
RSS-Abo
Thumbnail Image
Lightbox Image
Image 3to4 50%
Jump2top-Icon
Darkening Image Overlay
Video Play Button
Buttons
Login Button
Send Button
Go-Next Button (horizontal)
Go-Back Button (horizontal)
Loading Button
Primary Button
Primary Button n-active
Secondary Button
Secondary Button (100% width)
Second. Button n-active
Navigation Elements
Menue-Item-1 in DropDown
Menue-Item-3 in DropDown
Menue-Item-2 in DropDown
Service-Menue-Item
Service-Menue Logged-In
Service-Menue Logged-In (with Badge)
Service-Menue Logged-In (in DLN)
Service-Menue Login
Service-Menue Login active
Service-Menue BE-Login active
BC Home
BC Arrow
Breadcrumb Link
Hamburger Icon
Main-Menue-Item
Main-Menue-Item (active)
Main-Menue-Item (Theme)
Main-Menue-Item (Campaign)
Main-Menue-active (Campaign)
Main-Menue-Sub-Item
Main-Menue-Sub-Page
Search-Icon in Main-Menue
Search-Icon in Main-Menue (active)
Search-Icon in MM (Campaign)
Search Icon mobile
Inpage-Search Title (H4)
Search Input
Language-Selector item
Language-Selector
Language-Selector active item
Sliding Navigation
Inpage-Navigation
Inpage-Navigation Title (H4)
Inpage-Navigation Link
Inpage-Navigation active Link
Input for Pagination
Pagination Nummer
Pagination Text
Small Button
Footer-Menue-Item
Tab
Tab (active)
Tab 2 (active)
Layout Elements
Infobox
Infobox (per default offen)
Kontaktbox
Accordion
Table (sortable, without arrows)
Table (without arrows)
Grey line
Light Grey Line
Beige line
Teaser in Hero-Image
Headline with Link
Result-1
Lightbox PB main-column
Teaser in Hero-Image (Theme-Site)
Teaser in Hero-Image (small)
Right-Hero-Teaser
Right-Hero-Teaser (big)
Right-Hero-Teaser (red)
Right-Hero-Teaser (small red)
Right-Hero-Teaser (small)
Right-Hero-Teaser (small big)
Overlay Wrapper
GR/RR
Table (Mitgliederdetails 1)
Sessions-Details
Table (2-Column)
File list (Dokumenten-Liste)
File list (Dokumenten-Liste) 2
Table (Eingereichte Vorstösse)
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
Form Buttons
Inline Checkboxes
Inline Radio-Buttons
Inline Radio-Buttons (error)
Inputfield (Date from)
Inputfield (Date to)
Inputfield (File-Upload)
Inputfield (File-Upload error)
Inputfield (File-Upload success)
Inputfield (medium)
Inputfield (optional)
Inputfield (optional + Tooltip)
Inputfield (Password)
Inputfield (small)
Inputfield (with Tooltip)
Invalid Input
List Checkboxes
List Radio-Buttons
Select-Box
Select-Box (50%)
Select-Box (valid)
Textarea
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
×