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)
- 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)
- 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
- 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)
- 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
- 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)
- 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