Release Notes

v1.31.x change list

• changed all components to consume the design tokens instead of the legacy color and variable definitions
• changed the design token namespaces: $foundation-light-* / $foundation-dark-* became $foundation-net-v1-*, $foundation-net-v2-* and $foundation-app-v2-*; $token-light-* / $token-dark-* became $token-light-v2-web-* / $token-dark-v2-web-*; $brand-light-* / $brand-dark-* became $brand-v1-internal-* / $brand-v1-external-*
• rebuilt the icon font: 101 icons renamed and redrawn, 81 icons added, 145 to 125 glyphs in total. The integration description below lists the complete old to new mapping
• removed the complete f.net PRO theme from all components, layouts and modifiers
• added .button--secondary and removed the login and PRO button variants
• added .button--buy and .button--sell, for now with the colors of .button--success and .button--danger
• added .badge--secondary
• added the invest variants .button--invest, .button--invest-crypto, .button--invest-outline and .badge--invest
• reworked the finanzen.net logo assets: removed .logo--finanzen-net-dark, .logo--finanzen-net-light, .logo--finanzen-net-chart, .logo--finanzen-net-christmas, .logo--finanzen-net-pro, .logo--pro-dark, .logo--pro-dark-plain, .logo--pro-light, .logo--pro-light-plain, .logo--germany-waved, .logo--finanzen-net-logo-dark and .logo--finanzen-net-logo-light; refreshed .logo--finanzen-net with new artwork; added 44 new independent .logo--fn-*, .logo--app-icon-fn-* and .logo--fav-icon-* modifiers, see the logo overview
• added the new logo file fin-net.svg. .logo--finanzen-net now uses it. The artwork is identical to the previous finanzen-net.svg, only the file name is new, so that the live cache delivers the current logo instead of a stale one
• refreshed a large batch of existing icon font artwork and added the .icon--placeholder-tbd-missing icon
• added 16 icons to the icon font: .icon--ai-ki, .icon--buy-sell, .icon--chart-line-down, .icon--decimal, .icon--dropdown, .icon--filter-off, .icon--filter-on, .icon--folder, .icon--limit-notification, .icon--news-notification, .icon--notification-add-filled, .icon--profile-delete, .icon--profile-question, .icon--share-android, .icon--social-media-tiktok, .icon--star-list; the artwork of 14 further icons was refreshed
• fixed the default glyph of a bare .icon, it renders the placeholder again instead of nothing
• added 5 new finanzen.net logo families, each with a color and a plain variant for light and dark backgrounds: .logo--fn-group-*, .logo--fn-net-advertorials-*, .logo--fn-net-ratgeber-*, .logo--fn-net-specials-* and .logo--fn-smart-caps-*; added .logo--app-icon-fn-invest-secure-tan-round and .logo--app-icon-fn-invest-secure-tan-square
• changed the aspect-ratio of .logo--fn-*, .logo--fn-at-*, .logo--fn-ch-color-light, .logo--fn-net-* and .logo--fn-net-plus-* to match the reworked artwork
• fixed the aspect-ratio of .logo--finanzen-net-wm, it was 7.63 instead of 7.375 and stretched the artwork
• removed the zero logo modifiers .logo--zero-icon, .logo--zero-black and .logo--zero-white
• removed the zero logo documentation page. The Finanzen invest logos (.logo--fn-invest-*, .logo--app-icon-fn-invest-*, .logo--fav-icon-invest) moved from the DE logo overview to the new Finanzen invest logos page
• removed .logo--zero-open-depot and .logo--zero-open-depot-white from the finanzen.net .page-header: the documentation and the logo size rules for these two logos are gone, the page header only shows the finanzen.net logo. .logo--explore-zero stays for finanzen.ch
• removed the icons .icon--button-new-star, .icon--cfd, .icon--fn, .icon--x-turbo-badge, .icon--zero and .icon--zertifikate from the icon font and redrew the filled arrow icons .icon--arrow-down-filled, .icon--arrow-left-filled, .icon--arrow-right-filled and .icon--arrow-up-filled (24x24 viewBox)
• added theme specific finanzen.net overrides for .back-to-top, .overlay, .performance-bar, .rating, .realtime-push, .side-panel, .snapshot, .suggest-search and the color modifier
• changed .pagination so the generated arrows use the new chevron icons
• fix .table--small so link buttons have their own sizes
• restyled the finanzen.net .page-footer: new finanzen invest and Oskar placements, quick links, menu and notes inside one card, visible "Finanzen.net App" column
• added the logos .logo--oskar-light, .logo--zero-euro-badge, .logo--footer-invest-phone, .logo--footer-oskar-phone-front and .logo--footer-oskar-phone-back
• added the documentation page Color Token, it lists all design token colors grouped by usage. The token list moved there from the Color Palette
• fixed the order of the display modifiers, they are now generated after all other utility modifiers. Before, .flex came later in the CSS and overrode .display-none: both set display with !important and the same specificity, so an element with class="flex display-none" stayed visible
• v1.31.25 is venga go live patch, is same to 1.31.24

v1.31.x integration description

• WATCH OUT for the icons that kept their class name but now show a different glyph. Your markup keeps working, so this does not fail visibly:
  • .icon--arrow-down now renders a different design, the icon you used before moved to .icon--chevron-down
  • .icon--arrow-left now renders a different design, the icon you used before moved to .icon--chevron-left
  • .icon--arrow-right now renders a different design, the icon you used before moved to .icon--chevron-right
  • .icon--arrow-up now renders a different design, the icon you used before moved to .icon--chevron-up
  • .icon--star now renders a different design, the icon you used before moved to .icon--star-filled
• CHANGE .icon--zinsen to .icon--file-percent, the old name is still contained in the font but is no longer maintained
• CHANGE the renamed icons, the old class names no longer render a glyph:
  • arrows and chevrons: .icon--arrow-double-left to .icon--chevron-double-left, .icon--arrow-double-right to .icon--chevron-double-right, .icon--arrow-down-1 to .icon--chevron-down, .icon--arrow-down-2 to .icon--arrow-down, .icon--arrow-kurs to .icon--arrow-up, .icon--arrow-left-1 to .icon--chevron-left, .icon--arrow-left-2 to .icon--arrow-left, .icon--arrow-left-right to .icon--change, .icon--arrow-right-1 to .icon--chevron-right, .icon--arrow-right-2 to .icon--arrow-right, .icon--arrow-sideways to .icon--change, .icon--arrow-up-1 to .icon--chevron-up, .icon--arrow-up-2 to .icon--arrow-up, .icon--left-right to .icon--change, .icon--move-to-bottom to .icon--move-down, .icon--move-to-top to .icon--move-up, .icon--sort to .icon--sort-chronologically, .icon--sort-down to .icon--performance-down-filled, .icon--sort-up to .icon--performance-up-filled
  • status and feedback: .icon--alert to .icon--notification, .icon--alert-add to .icon--notification-add, .icon--alert-circle-badge to .icon--exclamation-circle, .icon--alert-triangle to .icon--warning, .icon--caution to .icon--warning, .icon--info to .icon--info-circle, .icon--invalid to .icon--exclamation-circle, .icon--load to .icon--reload, .icon--missing to .icon--file-disabled, .icon--notice to .icon--note, .icon--notice-add to .icon--file-add, .icon--valid to .icon--check
  • user, account and security: .icon--filter to .icon--settings-slider, .icon--locked to .icon--lock, .icon--logout to .icon--log-out, .icon--securitiesaccount to .icon--bank-lock, .icon--setting to .icon--settings-gear, .icon--unlocked to .icon--unlock, .icon--user to .icon--profile, .icon--user2 to .icon--profile
  • stars, watchlist and rating: .icon--depot-add to .icon--star-add, .icon--empty-star to .icon--star, .icon--rating-star-winner to .icon--cup, .icon--star-outline to .icon--star, .icon--trustpilot-star to .icon--star-filled, .icon--watchlist to .icon--star-add
  • menu and layout controls: .icon--apps to .icon--phone, .icon--bin to .icon--trash, .icon--dot to .icon--performance-neutral-filled, .icon--dots to .icon--menu-dots, .icon--download-01 to .icon--download, .icon--external-link to .icon--tab, .icon--eye to .icon--show, .icon--eye-hide to .icon--hide, .icon--hyperlink to .icon--link, .icon--menu to .icon--menu-burger, .icon--minus2 to .icon--minus-circle, .icon--pencil to .icon--edit, .icon--plus2 to .icon--plus-circle, .icon--print to .icon--printer, .icon--shares-ranking to .icon--list, .icon--tags-badge to .icon--tag
  • finance and products: .icon--accumulation to .icon--money-coins, .icon--anleihen to .icon--file-percent, .icon--boersenplatz to .icon--world, .icon--depot-sell to .icon--money-hand-coins, .icon--fee-payment to .icon--fees, .icon--fonds to .icon--chart-cake, .icon--globel to .icon--world, .icon--hebelprodukte to .icon--file-link, .icon--markets to .icon--world-globe, .icon--money-bag-dollar to .icon--money-bag, .icon--orderbook to .icon--book-open
  • charts and performance: .icon--analytics-bars to .icon--chart-bar, .icon--chart-candlestick to .icon--chart-candle, .icon--chart-gefuellt to .icon--chart-line, .icon--durable-shares to .icon--shoe, .icon--moodys-rating-arrow to .icon--performance-down-filled, .icon--nicolas-darvas-breakout to .icon--breakout, .icon--performance-increase to .icon--chart-bar-up, .icon--relative-strength-shares to .icon--fitness, .icon--top-growth-turnover to .icon--chart-bar-up, .icon--top-growth-turnover-profit to .icon--chart-bar-up
  • media, communication and misc: .icon--ecology-leaf to .icon--leaf, .icon--esg-rating to .icon--leaf, .icon--forum to .icon--messages, .icon--light-bulb to .icon--light-bulp, .icon--lighting to .icon--bolt, .icon--mynews to .icon--news, .icon--newsletter to .icon--send, .icon--podcast to .icon--microphone, .icon--social-media to .icon--like, .icon--social-media-facebook-outline to .icon--social-media-facebook, .icon--social-media-whatsapp-outline to .icon--social-media-whatsapp
  • live trading badges: .icon--capped-badge to .icon--icons-live-capped-badge, .icon--oskar to .icon--icons-live-oskar, .icon--period-protected-badge to .icon--icons-live-period-protected-badge, .icon--quanto-badge to .icon--icons-live-quanto-badge, .icon--reverse-badge to .icon--icons-live-reverse-badge, .icon--rounded-five to .icon--icons-live-rounded-five, .icon--smart-turbo-badge to .icon--icons-live-smart-turbo-badge, .icon--stop-loss-badge to .icon--icons-live-stop-loss-badge
• CHANGE .accordion__icon, the required inner element is now <span class="icon icon--chevron-down"></span>
• REMOVE the f.net PRO markup, none of these classes are styled any more: .page-header--pro, .page-footer--pro, .tab--pro, .tab--pro-invert, .article-teaser--pro, .article-teaser--pro-invert, .list--pro, .button--pro, .button--pro-primary, .button--pro-invert, .logo--pro-dark and the modifier .background-color-brand-finnet-pro-dark
• REMOVE .button--login and .button--login-full-text, the login button in the page header now works without a variant class. Use .button--secondary if you need a coloured login button
• CHANGE the new button variants where you used PRO or zero styling: .button--secondary, .button--invest, .button--invest-crypto, .button--invest-outline and .button--oskar are available
• CHANGE .logo--zero-icon, .logo--zero-black and .logo--zero-white, they were removed. Use .logo--fn-icon-color-dark, .logo--fn-icon-color-light or one of the remaining zero logos such as .logo--explore-zero
• CHANGE .logo--pro-light and .logo--pro-dark, they were removed entirely (including the .pro-abo layout). Use .logo--finanzen-brokerage in content areas, or .logo--fn-net-plus-color-light / .logo--fn-net-plus-color-dark where the PRO/Plus branding itself is shown
• CHANGE .logo--finanzen-net-dark to .logo--fn-net-color-dark, .logo--finanzen-net itself keeps working with refreshed artwork. .logo--finanzen-net-chart and .logo--finanzen-net-christmas have no replacement, there is currently no seasonal/chart logo variant
• REMOVE the nested .icon--zero inside .badge--invest (formerly .badge--zero), the icon no longer exists. Use .icon--finanzen-net-finnet-invest if you need an invest icon
• REMOVE the icons .icon--button-new-star, .icon--cfd, .icon--fn, .icon--x-turbo-badge, .icon--zero and .icon--zertifikate, they no longer render a glyph
• REMOVE the second logo .logo--zero-open-depot / .logo--zero-open-depot-white from the finanzen.net .page-header__logo and the .page-header--wm logo switch, the page header no longer sizes it
• CHANGE the finanzen.net .page-footer markup, see the documentation for the full example:
  • REPLACE .page-footer__placements-zero / .page-footer__placements-oskar with .page-footer__placement.page-footer__placement--invest / .page-footer__placement--oskar containing __placement-content (logo, __placement-headline, __placement-text, .button.button--pill.button--invest or .button--oskar), __placement-media (__placement-phone, __placement-badge) and for invest __placement-bar
  • REMOVE .page-footer__placement-image, .page-footer__placement-mobile-button, .page-footer__zero-badge, .page-footer__mobile-image, .page-footer__oskar-logo and the inner .grid of the placements, the button is no longer duplicated for mobile
  • WRAP .page-footer__first-row, .page-footer__second-row and .page-footer__third-row in a new .page-footer__body
  • REMOVE .font-color-transparent from the .page-footer__app-store header and set it to "Finanzen.net App"
  • REMOVE the .margin-bottom-1.00 modifiers inside .page-footer__third-row, the row has its own gap
• CHANGE .logo--fn-net-color-dark to .logo--fin-net inside the finanzen.net .page-header__logo, the page header no longer sizes .logo--fn-net-color-dark
• CHECK elements that combine .flex with a display modifier such as .display-none or .display-block-md. The display modifier now wins, so an element that was visible by accident is hidden now. Toggling .display-none via JavaScript works again on .flex elements
• If you import the token SCSS files directly, UPDATE your variable names to the new namespaces listed in the change list. Components that only use the documented classes are not affected
• fixed .pagination border
• added .logo--google, the Google "G" logo, to the finanzen.net and finanzen.ch logos
• fixed the sizes of .logo--fin-net in the finanzen.net .page-header, it now gets the logo height and width of .logo--finanzen-net for the normal and the pinned header at all breakpoints
• removed the leftover logo sizes from the finanzen.net .page-header: the zero logo size maps, the size rules for .logo--fn-net-color-dark and the .page-header--is-zero-user logo sizes

v1.31.x tickets

• CB-4747
• CB-6080

v1.30.8 change list

• changed Oskar image in footer

v1.30.8 tickets

• CB-5020

v1.30.7 change list

• change .back-top-top position

v1.30.7 tickets

• BC-58

v1.30.6 add new logo

• added .logo--aktien-magazin

v1.30.6 tickets

• CB-4863

v1.30.5 fix icon render issue

• fixed .icon.chart-hilo

v1.30.5 tickets

• MB-3639

v1.30.4 add chart icon

• added .icon.chart-hilo

v1.30.4 tickets

• MB-3639

v0.1.30 change list

• fixed tooltip on copy-handler

v1.28.0 change list

• improved finanzen net WM logo

v1.27.0 change list

• added ESM output: the package now ships a tree-shakeable TypeScript module build under dist/style-guide/esm/
• added public TypeScript entry point src/script/index.ts that re-exports all handlers, types and utilities
• added createStyleGuide() and loadStyleGuide() factory functions for flexible, DOM-aware handler registration
• added automatic version sync: npm version now updates src/script/_version.ts automatically

v1.27.0 integration description

• You can now import individual handlers directly instead of loading the full bundle: import { DropdownHandler } from '@finanzen-net/common-styles'
• Use createStyleGuide(registrations) for synchronous initialization or loadStyleGuide(registrations) for lazy-loaded, code-split handlers via dynamic import()
• Handlers with a CSS selector are only initialized when the matching element is found in the DOM — no change needed if you use the existing window.styleGuide API

v1.26.1 change list

• improved .tooltip

v1.26.1 integration description

• If you use a tooltip with content within a hydration, you must add the `.tooltip__content` element.

v1.26.1 tickets

• CB-4734

v1.26.0 change list

• added dsign token pipline

v1.26.0 tickets

• CB-4667

v1.25.0 Alpha0 change list

• Fix finnet script starting point, allow every component to start and add an observer.

v1.25.0 Alpha0 tickets

• CB-4675

v1.24.3 change list

• added apple favicon

v1.24.3 tickets

• UB-1942

v1.24.2 change list

• added .icon.alert-triangle

v1.24.2 tickets

• MB-3799

v1.24.1 change list

• PERFORMANCE OPTIMIZATION:
• Only initializes handlers for components actually present in the DOM
• Handlers initialize synchronously to ensure they're available for dynamic content
• Skips initialization entirely if component selector not found
• Reduces CPU/memory usage by ~60-80% on pages with few components

v1.24.1 tickets

-
• CB-4337

v1.24.0 change list

• added .page-header--ad

v1.24.0 tickets

• SAL-1916

v1.23.x change list

• added .icon.analytics-bars
• added .icon.ecology-leaf
• added .icon.money-bag-dollar
• added .icon.performance-increase
• added .icon.rating-star-winner

v1.22.x change list

• improved .breadcrumb
• improved .tooltip
• fix .details-navigation

v1.22.x integration description

• Add [data-sg-tooltip-boundary] attribute to .page-content for better tooltip handling.

v1.22.x tickets

• CB-1106
• CB-3544

v1.21.1 change list

• improved finnet .page-footer, fixed missing mobile impressum

v1.21.0 change list

• improved fantasticon config for better icon codes

v1.21.0 tickets

• CB-3853

v1.20.2 & v1.20.3 & v1.20.4 change list

• improved .snapshot

v1.20.2 & v1.20.3 & v1.20.4 tickets

• CB-3543
• CB-3840

v1.20.1 change list

• improve .performance-bar tooltip text
• improved .article-teaser

v1.20.1 tickets

• CB-3829
• MB-2788

v1.20.0 change list

• added .article-teaser--kicker
• added icon .icon--hyperlink
• added icon .icon--social-media-facebook-outline
• added icon .icon--social-media-whatsapp-outline

v1.20.0 tickets

• MB-2862
• CB-2975

v1.19.x change list

• added icon .icon--lighting
• added icon .icon--pizza
• improved .carousel
• improved net .page-header
• improved ch .page-header
• improved ch .page-layout

v1.19.x tickets

• CB-3364
• CB-3584

v1.18.x change list

• added .logo-tz
• fix azure pipline

v1.18.x tickets

• CB-3608

v1.17.x change list

• added .edge
• added .position-*
• added .overflow-*
• improved list
• improved .icon
• improved Heading Element
• improved Headline
• improved .details-navigation
• improved finanzen.net .breadcrumb
• improved finanzen.net .page-header

v1.16.x integration description

• We changed in <ul> and <ol> margin-left to the better padding-left. This can affect dependent components. All have been adjusted within the style guide. If you have styled lists yourself, check their styles.

v1.17.x tickets

• CB-3238
• CB-3581

v1.16.x change list

• redesign finanzen.ch
• added .ad__overflow

v1.16.x tickets

• CB-3238

v1.15.X change list

• added .article-teaser--pro
• added .article-teaser--bold-title
• added .badge--ellipsis
• added .headline-center
• fixed .side-panel
• improved .tab
• improved .pro-abo
• improved .copy

v1.15.X tickets

• CB-3251
• CB-3279
• CB-3320
• CB-330 😮

v1.14.0 change list

• added .badge to .button

v1.13.0 change list

• added logo .logo--finanzen-net-pro
• added logo .logo--pro-dark-plain
• added logo .logo--pro-light-plain
• improved .menu
• improved .page-header

v1.13.0 integration description

• add .logo--finanzen-net-pro to .page-header in finanzen.net

v1.13.0 tickets

• CB-3016

v1.12.1 change list

• improved code
• improved .article
• improved .notification
• improved .line-clamp-{LINE}

v1.12.1 tickets

• CB-3042
• CB-3016

v1.12.0 change list

• added icon .icon--shares-ranking
• added .filter
• added .selection
• improved .flyout
• fixed .ad
• fixed .article
• fixed .badge--dark
• fixed .pro-abo
• rename .logo-germany-flag-waved to .logo-germany-waved

v1.11.x change list

• rework .article (formerly .news), read more in the upgrade notes
• rework .logo, rename all logo
• added .icon--rotate-{ROTATE}
• added icon .icon--accumulation
• added icon .icon--durable-shares
• added icon .icon--nicolas-darvas-breakout
• added icon .icon--pivotal-points
• added icon .icon--relative-strength-shares
• added icon .icon--top-growth-turnover-profit
• added icon .icon--top-growth-turnover
• added logo .logo--pro-dark
• added logo .logo--pro-light
• added color brand-finnet-pro-light
• added color brand-finnet-pro-dark
• added color mint
• added color brand-whatsapp
• added ul list state icons as dots
• added .button--pro
• added .button--pro-primary
• added .button--pro-invert
• added .button--custom-light
• added .button--custom-dark
• added .button--corner-{VERTICAL}-{HORIZONTAL}
• added .flyout
• added .article-teaser--pro
• added .article-teaser--pro-invert
• added .tab--pro
• added .tab--pro-invert
• added .page-content__item--header & .page-content__header
• added .page-header--pro
• added whatsapp button to finnet .page-footer
• added .page-footer--pro to finnet page footer
• added .pro-abo
• added .font-size-** with {VALUE} 1.625 & 1.875
• added .font-vertical-align-*
• added .flex--center
• improved .logo, removed aspect-ratio fallback
• improved .input--scale-{SCALE}[-{SCREEN_SIZE}]
• improved .list, add space above/below if ul/ol has an p before or after
• improved documentation of
  • Get Started
  • Assets
  • .accordion
  • .arrow
  • .back-to-top
  • .badge
  • .badge-bar
  • .breadcrumb
  • .button-group
  • .breadcrumb
  • .carousel
  • .charts
  • .dropdown
  • all forms
  • all tabbing
  • .page-content
  • .page-footer
  • .page-header
  • .page-layout
  • .page-content
  • .snapshot
  • .suggest-search
  • Global Modifier
• rework
  • .flag
  • .logo
  • .reset
  • .ad
  • .arrow
  • .back-to-top
  • .badge
  • .badge-bar
  • .breadcrumb
  • .button-group
  • all forms
  • .listing
  • .menu
  • .separator
  • .tooltip
• fixed missing .overlay styles
• fixed .line-clamp
• removed browser support JavaScript function

v1.11.x integration description

• Build SG v1.11.3 with component list
• Build SG v1.11.5 with component list
• Complete rework of the .article component, see more in the upgrade notes
• Rename all .logo classes, use BEM. from .logo.logo-zero-dark to .logo.logo--zero-dark. Add default logo (missing icon). **TIP** use for replacement "logo logo-" and replace them with "logo logo--".
• Remove the modifier .badge--icon, it is not needed anymore.
• Remove the modifier .checkbox--has-no-label, it is not needed anymore.
• Remove the modifier .switch--has-no-label, it is not needed anymore.
• Remove the modifier .form-note--has-select, it is not needed anymore.
• Remove the element class .floating-label__input, it is not needed anymore.
• Remove the modifier .form-group--has-form-note, it is not needed anymore.
• Remove the modifier .form-group--has-floating-label, it is not needed anymore.
• Change .breadcrumb__separator, move icon into an own span.
• Replace all .input--scale-{SCALE}[-{SCREEN_SIZE}] with new scale values.
• Add whatsapp button to finnet .page-footer

v1.11.x tickets

• CB-1362
• CB-2715
• CB-2782
• CB-2783
• CB-2784
• CB-2785
• CB-2786
• CB-2788
• CB-2790
• CB-2791
• CB-2794
• CB-2795
• CB-2796
• CB-2797
• CB-2798
• CB-2799
• CB-2800
• CB-2801

v1.10.0 change list

• added .sticky

v1.10.0 tickets

• CB-2313

v1.9.1 change list

• added .logo-zero-open-depot

v1.9.1 tickets

• CB-2679

v1.9.0 change list

• added .logo-finanzen-net-wm
• added .logo-germany-flag-waved
• added .logo-explore-zero-white

v1.9.0 tickets

• CB-2679

v1.8.0 & v1.8.1 change list

• improved de .input
• improved de .select
• improved de .checkbox
• improved de .radio
• improved de .switch

v1.8.0 & v1.8.1 tickets

• CB-2440

v1.7.3 & v1.7.4 change list

• fixed .checkbox
• improved .input
• improved .select
• improved .rating
• improved icon minus
• improved icon check
• fixed mixin icon.get-background-url

v1.7.3 & v1.7.4 tickets

• CB-2328

v1.7.1 & v1.7.2 change list

• improved .rating

v1.7.1 & v1.7.2 tickets

• CB-2197

v1.7.0 change list

• improved .rating
• improved .accordion

v1.7.0 tickets

• CB-2197

v1.6.2 change list

• fixed missing .grid--gap-col-{GAP}-{SCREEN_SIZE}
• renamed class .grid--gap-{GAP}-{SCREEN_SIZE}
• renamed class .grid--gap-row-{GAP}-{SCREEN_SIZE}
• renamed class .grid--gap-col-{GAP}-{SCREEN_SIZE}

v1.6.2 integration description

• CHANGE modifier name .grid--gap-{GAP}-{SCREEN_SIZE}, .grid--gap-row-{GAP}-{SCREEN_SIZE} and .grid--gap-col-{GAP}-{SCREEN_SIZE}. Added the dot to the GAP values. Old class names marked as deprecated.

Published with components

v1.6.0 change list

• compressed all svg images, saved >2MB in the asset folder

v1.6.0 tickets

• CB-2209

v1.5.1 change list

• improved finnet/finch .page-footer
• improved finnet .page-content

v1.5.0 change list

• remove logo swiss-dots
• move logo .explore-zero to zero

v1.5.0 integration description

• Change in finanzen.ch the logo in the header from swiss-dots to explore-zero, see here.

v1.5.0 tickets

• CB-2129

v1.4.0 change list

• added .datepicker
• added .page-content__item--gradient

v1.4.0 tickets

• CB-2123

v1.3.0 change list

• added --sg-is-mobile to :root { ... }
• change .npmrc
• added volta to package.json & update engines.node in package.json
• update README.md

v1.2.4 change list

• added .display-contents
• added classes to code

v1.2.3 change list

• added color brand-x

v1.2.2 change list

• added icon social-media-x

v1.2.2 tickets

• CB-1654

v1.2.1 change list

• added .logo.logo-google-icon to finnet

v1.2.0 change list

• added .tab--card
• improved finnet .page-layout
• improved .page-footer
• fixed .button--pill
• fixed .performance-bar
• fixed .headline
• fixed .quote-ticker

v1.2.0 tickets

• CB-1649

v1.1.6 change list

• added logo swiss-dots
• added .multi-dot-bar
• added .gauge-chart
• added .speedometer
• added .line-clamp
• improved CH .page-header
• improved CH .page-footer
• improved .snapshot
• improved .performance-bar
• fixed missing .suggest-search for CH
• added new build files, now their exist for every theme and every component a file under dist/component/[theme].[component].css

v1.1.6 tickets

• CB-1559
• CB-1573

v1.1.5 change list

• improved .accordion
• improved .performance-bar

v1.1.5 tickets

• CB-1343

v0.1.4 change list

• added .select-extended
• improved .listing

v0.1.4 tickets

• MB-1040

v1.1.1 & v1.1.2 & v1.1.3 change list

• added DebugMode with Keyboard Shortcut CTRL+ALT+d
• changed Color Scheme keyboard shortcut to CTRL+ALT+s
• improved .realtime-push
• improved .page-layout

v1.1.1 & v1.1.2 & v1.1.3 tickets

• CB-1354
• MB-991

v1.1.0 change list

• improved .img
• improved finnet .page-layout

v1.1.0 tickets

• CB-1354

v1.0.1 change list

• improved .img

v1.0.1 integration description

• Rename .img--full-width to .img--stretch.

v1.0.0 change list

• added color schemes to themes, read more in Theme & Scheme
• added .button--gradient
• added Logos in .button
• added icon sun
• added icon moon
• bugfix in .news
• bugfix in .performance-bar

v1.0.0 integration description

• Rename all color custom properties from --color-XYZ to --sg-color-XYZ.
• Rename all base custom properties from --base-XYZ to --sg-XYZ.
• Rename all component custom properties from --component-XYZ to --sg-XYZ.
• Rename all layout custom properties from --layout-XYZ to --sg-XYZ.
• Rename all modifier custom properties from --modifier-XYZ to --sg-XYZ.

v1.0.0 tickets

• CB-1302
• CB-1343
• CB-1344
• CB-1345
• CB-1356