Brand Colors
- Vordergrund-Farben
- Black
- Red
- Hintergrund-Farben
- Black
- Red
- Cappuchino
- Sand (Hover)
- Dark Sand
- Sand
- Light Sand
- Functional Colors
- Vordergrund-Farben
- Anthrazit
- Grey
- Light-Grey
- White
- Blue
- Dark-Red
- Green
- Orange
- Hintergrund-Farben
- Blue
- Dark-Red
- Green
- Orange
- Blue (10%)
- Dark-Red (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
- 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
- Intro-Text 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
- Arrow right (SVG Code)
- Logout
- Show icon
- User icon
- Hide icon
- User icon (with Badge)
- Invalid (Error) icon
- Icon: Chat.svg
- Icon: chat-submit.svg
- Valid icon
- Speaker icon
- Icon: Volume-Icon.svg (hover)
- Icon: Download-Icon.svg (hover)
- RSS icon
- Audio Play icon
- Notice icon
- Warning icon
- Icon: Newsletter
- Icon für Urheber-Hinweis
- Icon: spinner.svg
- Arrow next
- Search icon
- Enlarge icon
- 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
- Login icon
- Arrow back
- Arrow back (not-active)
- Arrow next (not-active)
- Grey bullet
- Red bullet
- Home button
- Home button (hover)
- Close Icon
- Hamburger icon
- Arrow right
- Circle black
- Jump2top (small)
- Jump2top
- Help icon
- Minus
- Plus
- Success
- Explanation mark
- Arrow top
- Arrow down
- Search Icon mobile
- Important list item
- Icon: Upload Icon komplett.svg
- Arrow back
- 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-small.svg
- Icon: ps-inactive.svg
- Icon: ps-inactive-small.svg
- Icon: ps-edit.svg
- Icon: ps-notice.svg
- Social Media & Sharing
- Blog Icon
- RSS icon (black)
- Facebook icon (black)
- Instagram icon (black)
- Kununu icon
- Linkedin icon (black)
- WhatsApp icon (black)
- YouTube icon (black)
- X icon (black)
- E-Mail icon (color)
- RSS icon (color)
- Facebook icon (color)
- Instagram icon (color)
- Linkedin icon (color)
- WhatsApp icon (color)
- YouTube icon (color)
- X icon (color)
- Text Elements
- 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
- Intro-Text
- 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
- 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
- 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 (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)
- Navigation
- 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)
- Navigation
- Header + Footer Elements
- 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
- 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