Web-Styleguide Kanton Bern
×
Start
Styles
Atoms
Molecules
Design-Komponenten
Templates
Web-Styleguide Kanton Bern
100%
XL
L
M
S
XS
Web-Styleguide Kanton Bern
Show Element Outlines
Impressum
Web-Styleguide Kanton Bern
Start
Styles
Brand Colors
Vordergrund-Farben
Red
Hintergrund-Farben
Red
Black
Light Sand
Sand
Dark Sand
Sand (Hover)
Cappuchino
Functional Colors
Vordergrund-Farben
Black
Grey
Light-Grey
White
Hintergrund-Farben
Anthrazit (Hover)
Anthrazit (95%)
Dark Grey
Line Grey (50%)
Grey
Light Grey
Very Light Grey
White
Red (Hover)
Green
Typography
Schrift-Fonts
Roboto 100 (thin)
Roboto 300 (light)
Roboto 400 (regular)
Roboto 500 (medium)
Roboto 700 (bold)
Schrift-Grössen
H1 Size
H2 Size
H1 GDS Size
H3 Size
H4 Size
H5 Size
H6 Size
Intro-Text Size
Intro-Text Size (mobile)
Body-Text Size
Body-Text Size (mobile)
Very-Large-Text Size
Large-Text Size
Small-Text Size
Extra-Small-Text Size
Very-Small-Text Size
Logo Caption Size
Logo Caption Size (mobile)
Logo Caption Size (mobile) 2 rows
Images & Icons
Icon: spinner.svg
RSS icon (black)
RSS icon (color)
Icon: Newsletter
Icon: Newsletter (color)
RSS icon
Icon: Newsletter-2
Play icon
Icon: Sharing-Icon.svg (black)
Icon: Download-Icon.svg (black)
Icon: Volume-Icon.svg (black)
Icon: Sharing-Icon.svg
Icon: Download-Icon.svg
Icon: Volume-Icon.svg
Icon: Options-Icon.svg
Arrow down
Break icon
Arrow Breadcrumb
Scroll down (white)
Submit arrow
Success (white)
Explanation mark (white)
Arrow top (white)
Close Icon (white)
Icon: datepicker.svg
Enlarge icon
Login icon
Search icon
Arrow back
Arrow next
Arrow back (not-active)
Arrow next (not-active)
Grey bullet
Red bullet
Facebook icon (black)
Google+ icon (black)
Twitter icon (black)
Instagram icon (black)
YouTube icon (black)
Facebook icon (color)
Twitter icon (color)
Google+ icon (color)
Instagram icon (color)
E-Mail icon (color)
Home button
Home button (hover)
Breadcrumb icon
Breadcrumb icon (active)
Breadcrumb icon (hover)
Close Icon
Hamburger icon
Arrow right
Logout icon
Circle black
Jump2top (small)
Jump2top
Speaker icon
Valid icon
Invalid (Error) icon
Notice icon
Help icon
Minus
Plus
Success
Explanation mark
Warning icon
Arrow top
Arrow down
Search Icon mobile
Important list item
Icon: Upload Icon Hover.svg
Icon: Upload Icon komplett.svg
Arrow back
Kununu icon
Linkedin icon
Linkedin icon (color)
Xing icon
Blog Icon
Lines & Borders
Border left 6px #000
Left Line for Quotation
Left Line for Important Notice
Underline 2px red
Left Line 1px (default)
Right Line 1px (default)
Lines top+bottom
Lines around (light-grey)
Bottom Line 1px (default)
Bottom Line 1px (black)
Bottom Line 1px (red)
Bottom Line 1px (sand)
Header Bottom Line (light-grey)
Footer Top Line (very light-grey)
Fieldset border
Form Elements Line (dark-grey)
Form Elements Line (active or valid)
Form Elements Line (error)
Atoms
Text Elements
Back-to-Overview Link
Body-Text
Copyright
Floating label (visible)
H1
H1 (center)
H1 (GDS)
H2
H2 (center)
H2 (Detailseite)
H3
H3 (center)
H4
H5
Image-Caption
Intro-Text
Intro-Text (Footer KBE)
Label before Headline
Label in Teaser
Label in Teaser (small)
Link with Arrow
Link with arrow down
Liste
Liste (mehrfache Einzüge)
Logo Caption
Logo Caption (Footer)
Logo Caption (max. length)
Mark
Notice to form elements
Placeholder
Search Suggestion
Small Text
Splitter List
Step Box (Number)
Step Box (Text)
Suberscribe
Sucheinstellungen
Text-Column 33%
Text-Column 50%
Text-Column 75%
Text-Link as Container
Text-Link as Container in Link-List
Text-Link in Text
Text in Box
Very short Explanation Text in Box
Media Elements
Darkening Image Overlay
E-Mail (color)
Email-Abo
Enlarge-Icon
Facebook (black)
Facebook (color)
Google+ (black)
Image 3to4 25%
Image 3to4 50%
Instagram (color)
Jump2top-Icon
kununu (black)
Lightbox Image
linkedin (black)
Logo
Portrait
RSS (black)
RSS-Abo
Selectbox Icon
Thumbnail Image
Twitter (black)
Twitter (color)
Video Play Button
xing (black)
Form Elements
Go-Back Button
Go-Next Button
H2 (Form)
H3 (Form)
Inline Checkbox + Label
Inline Radio + Label
Primary Button
Primary Button n-active
Second. Button n-active
Secondary Button
Submit Button
Submit Button (loading)
Navigation Elements
BC Arrow
BC Home
Breadcrumb Link
Footer-Menue-Item
Hamburger Icon
Inpage-Navigation
Inpage-Navigation active Link
Inpage-Navigation Link
Inpage-Navigation Title (H4)
Inpage-Search Title (H4)
Input for Pagination
Language-Selector
Language-Selector active item
Language-Selector item
Main-Menue-active (Campaign)
Main-Menue-Item
Main-Menue-Item (active)
Main-Menue-Item (Campaign)
Main-Menue-Item (Theme)
Main-Menue-Sub-Item
Main-Menue-Sub-Page
Pagination Nummer
Pagination Text
Search-Icon in Main-Menue
Search-Icon in Main-Menue (active)
Search-Icon in MM (Campaign)
Search Icon mobile
Search Input
Service-Menue-Item
Service-Menue Login
Sliding Navigation
Small Button
Tab
Tab (active)
Tab 2 (active)
Layout Elements
Accordion
Beige line
Grey line
Headline with Link
Infobox
Infobox (per default offen)
Kontaktbox
Lightbox PB main-column
Light Grey Line
Overlay Wrapper
Result-1
Right-Hero-Teaser
Right-Hero-Teaser (big)
Right-Hero-Teaser (red)
Right-Hero-Teaser (small)
Right-Hero-Teaser (small big)
Right-Hero-Teaser (small red)
Table (sortable, without arrows)
Table (without arrows)
Teaser in Hero-Image
Teaser in Hero-Image (small)
Teaser in Hero-Image (Theme-Site)
Regierungsrat Elemente
Accordion (with white content)
Audio Control
Audio Options
Audio Options Icon
Audio Options Icon (active)
Audio play-control
Audio play-control (active)
Audio Time
Beschlüsse
File list (Dokumenten-Liste)
File list (Dokumenten-Liste) 2
Sessions-Details
Table (2-Column)
Table (Eingereichte Vorstösse)
Table (Mitgliederdetails 1)
Table (Mitgliederdetails 2)
Table (Mitgliederdetails 3)
Molecules
Navigation
Arrow-Link
Back-Link
Back-Link 2
Breadcrumb
DLN-Header
End of News-List
Inpage-Search
Inpage-Search (extended)
Menue-Item
Menue-Item active
Menue-Page
OffCanvas Service-Navigation
Pagination
Pagination (ohne Input)
Search Input Container
Search Suggestions (active)
Tabs (Inpage Filter)
Tabs (Search-Result Filter)
Header + Footer Elements
Footer-Navigation
Header (Campaign-Site)
Main-Menue (Kantonsportal)
Main-Menue (OE)
Main-Menue (Startpage OE)
Main-Menue (Theme-Site)
Service-Navigation
Signet (2-row caption)
Signet (OE)
Signet (Theme)
Social Media Icons
Content Elements
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 Elements
Form Buttons
Inline Checkboxes
Inline Radio-Buttons
Inline Radio-Buttons (error)
Inputfield
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 (small)
Inputfield (with Tooltip)
Inputfield with watermark
Invalid Input
List Checkboxes
List Radio-Buttons
Select-Box
Select-Box (50%)
Select-Box (valid)
Select-Box with Optgroup (50%)
Textarea
Valid Input
Regierungsrat Elemente
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)
Design-Komponenten
Navigation
DLN-Start
DLN-Tile
DLN-Tile (Aufruf von Detailseite)
Search-Area
Header + Footer Elements
Footer (Kantonsportal)
Footer (OE)
Header (Kantonsportal)
Header (OE)
Header (OE - 2 rows caption)
Header (Startpage OE)
Header (Startpage OE - scrolling)
Header (Theme)
Content Elements
Above-the-fold (Campaign-Site)
Context-Column
Hero-Area
Hero-Area (Small Headlines)
Hero-Area (Theme)
Image-Teaser-Group (Full-Width)
Image-Teaser-Group (Main-Column)
Image Gallery
Lightbox
Link-List-Group
Main-Column
Main-Column (mit Bereichssuche)
Main-Column (News)
Search-Result-Column
Table (Default)
Table (with big numbers)
Text-Teaser-Group (Full-Width)
Text-Teaser-Group (Main-Column)
Form Elements
Form
Regierungsrat Elemente
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
Templates
Detailpage
Lightbox
Search Result Page
Search Result Page (no matches)
Startpage (OE)
Startpage (Theme)
Navigation
Deep Level Navigation
Some Hints
×