Styleguide Navigation
Release Notes
2023-02-15
change .MainNav--icon from
to
/components/bootstrap/molecules/MainNav/MainNav.html
Add accessibility labels (visuallyhidden) inside .js-Slider--prev and .js-Slider--next [dme]
/components/bootstrap/widgets/Slider/Slider.html
change Intro--text from
to
(allows richtext inside)
/components/content/Intro/Intro.html
Add cachebuster (`?v=...`) to assets (script, styles)
2022-11-22
Always use h3 headline [pul]
/components/bootstrap/molecules/NewsListItem/NewsListItem.html
Added visuallyhidden h2 headline when there is no title, always use h3 for items [pul]
/components/related/NewsList/NewsList.html
2022-11-21
Added visuallyhidden h1 and h2 headlines, changed item headline level to h3 [pul]
/components/hero/HeroSlideshow/HeroSlideshow.html
2022-11-10
move `.Header--burger` into `.Header--mobileButtons`, add `.Header--search` link, refs
UZHR-6
(dme)
/components/global/Header/Header.html
2022-11-03
add variant with pretitle for news, refs
UZHR-85
[dme]
/components/corporate/BigTeaser/BigTeaser.html
2022-11-01
Added .TextImage--inner wrapper (needed for accordion aniimations, but always added) [pul]
/components/content/TextImage/TextImage.html
2022-10-24
Move template-* classes to data-template on root . Non-breaking for now: we keep template-* on body as deprecated.
2022-10-11
Changed image srcset attribute to data-srcset, added srcset placeholder, added data-sizes='auto' [pul]
/components/bootstrap/_base/Image/Image.html
Changed position of .TextImage--imageLink (now child of .TextImage--image) [pul]
/components/content/TextImage/TextImage.html
Reordered head and added default metatags (og, twitter etc.). Please make sure that the order is like:
,
, <base>, <link>, <style>, <meta>, <script>, <noscript>, <template>. (dme)</div></li></ul><h2 class="styleguide-h2" id="20221006">2022-10-06<button class="styleguide-headline-link" onclick="styleguide.copyHeadlineLink(this);" type="button" title="Copy link to this example"></button></h2><ul class="styleguide-notes"><li class="styleguide-release_note"><div class="StyleguideNoteText">Removed unnecessary element .js-MasonryGrid--gutterSizer [dme]</div><small><a href="../components/bootstrap/_layout/MasonryGrid/MasonryGrid.html">/components/bootstrap/_layout/MasonryGrid/MasonryGrid.html</a></small></li></ul><h2 class="styleguide-h2" id="20221004">2022-10-04<button class="styleguide-headline-link" onclick="styleguide.copyHeadlineLink(this);" type="button" title="Copy link to this example"></button></h2><ul class="styleguide-notes"><li class="styleguide-release_note"><div class="StyleguideNoteText">Class 'richtext' added to .Teaser--text element [pul]</div><small><a href="../components/related/Teaser/Teaser.html">/components/related/Teaser/Teaser.html</a></small></li></ul><h2 class="styleguide-h2" id="20220909">2022-09-09<button class="styleguide-headline-link" onclick="styleguide.copyHeadlineLink(this);" type="button" title="Copy link to this example"></button></h2><ul class="styleguide-notes"><li class="styleguide-release_note"><div class="StyleguideNoteText">Removed unnecessary element .js-MasonryGrid--columnWidthSizer [pul]</div><small><a href="../components/bootstrap/_layout/MasonryGrid/MasonryGrid.html">/components/bootstrap/_layout/MasonryGrid/MasonryGrid.html</a></small></li></ul><h2 class="styleguide-h2" id="20210713">2021-07-13<button class="styleguide-headline-link" onclick="styleguide.copyHeadlineLink(this);" type="button" title="Copy link to this example"></button></h2><ul class="styleguide-notes"><li class="styleguide-release_note"><div class="StyleguideNoteText">Releasenotes added</div><small><a href="releasenotes.html">/docs/releasenotes.html</a></small></li></ul></div></div></div><script src="../assets/js/ui.mjs?v=2023-04-26" type="module"></script><script src="../assets/js/ui.js?v=2023-04-26" nomodule defer></script><template id="template-lightbox"><!-- component: Lightbox --><div class="Lightbox"><div class="Lightbox--inner"><img src="" alt=""/><button class="Lightbox--close js-Lightbox--close" type="button"><!-- component: Icon --><span class="Icon" data-name="lightbox-close"><svg><use xlink:href="#lightbox-close"></use></svg></span><!-- /component: Icon --><span class="visuallyhidden">Bild-Overlay schliessen</span></button></div></div><!-- /component: Lightbox --></template><template id="template-lightbox-video"><!-- component: LightboxVideo --><div class="Lightbox"><div class="Lightbox--inner"><video src="" autoplay="autoplay" playsinline="playsinline"></video><button class="Lightbox--close js-Lightbox--close" type="button"><!-- component: Icon --><span class="Icon" data-name="lightbox-close"><svg><use xlink:href="#lightbox-close"></use></svg></span><!-- /component: Icon --><span class="visuallyhidden">Video-Overlay schliessen</span></button></div></div><!-- /component: LightboxVideo --></template><template id="main-nav-link"><!-- component: MainNav--link --><a class="MainNav--link js-MainNav--link" href="[%=href%]" aria-current="[%=ariaCurrent%]">[%=content%]</a><!-- /component: MainNav--link --></template><template id="main-nav-link-plain"><!-- component: MainNav--link --><a class="MainNav--link" href="[%=href%]" aria-current="[%=ariaCurrent%]">[%=content%]</a><!-- /component: MainNav--link --></template><template id="main-nav-button"><!-- component: MainNav--link --><a class="MainNav--link js-MainNav--link" role="button" href="[%=href%]" aria-current="[%=ariaCurrent%]" aria-controls="[%=ariaControls%]" aria-expanded="false">[%=content%]<span class="MainNav--icon"><!-- component: Icon --><span class="Icon" data-name="16--link-arrow-sm-right"><svg><use xlink:href="#16--link-arrow-sm-right"></use></svg></span><!-- /component: Icon --></span></a><!-- /component: MainNav--link --></template><template id="main-nav-overlay"><!-- component: MainNav--overlay --><div class="MainNav--overlay js-MainNav--overlay" id="[%=id%]"><div class="MainNav--overlay--scroller"><div class="MainNav--overlay--inner"><!-- Set data-mainnav-index to the level of nesting--><div class="MainNav--sub js-MainNav--sub" data-mainnav-index="1"><div class="MainNav--sub--back"><!-- component: Button --><button class="Button js-MainNav--back" type="button"><span class="Button--inner">Zurück</span><span class="Button--icon"><!-- component: Icon --><span class="Icon" data-name="16--link-arrow-sm-right"><svg><use xlink:href="#16--link-arrow-sm-right"></use></svg></span><!-- /component: Icon --></span></button><!-- /component: Button --></div><div class="MainNav--sub--title"><!-- component: Link --><a class="Link layout-standalone size-small" href="[%=href%]"><span class="visuallyhidden">Übersichtsseite</span>[%=text%]<span class="Link--icon"><!-- component: Icon --><span class="Icon" data-name="16--link-internal"><svg><use xlink:href="#16--link-internal"></use></svg></span><!-- /component: Icon --></span></a><!-- /component: Link --></div><ul class="MainNav--sub--list">[%=content%]</ul><button class="js-MainNav--close FocusOnly" type="button">Menü schliessen</button></div></div></div></div><!-- /component: MainNav--overlay --></template><template id="main-nav-subitem"><!-- component: MainNavSubItem --><!-- Button if there are nested subitems, link if there aren’t--><!-- Add aria-current="page" if this is the currently active page--><a class="MainNav--link js-MainNav--sublink" href="[%=href%]" aria-controls="[%=id%]" aria-expanded="false" role="button">[%=text%]<span class="MainNav--icon"><!-- component: Icon --><span class="Icon" data-name="16--link-arrow-sm-right"><svg><use xlink:href="#16--link-arrow-sm-right"></use></svg></span><!-- /component: Icon --></span></a><!-- Set data-mainnav-index to the level of nesting--><div class="MainNav--sub js-MainNav--sub" id="[%=id%]" data-mainnav-index="[%=index%]"><div class="MainNav--sub--back"><!-- component: Button --><button class="Button js-MainNav--back" type="button"><span class="Button--inner">Zurück</span><span class="Button--icon"><!-- component: Icon --><span class="Icon" data-name="16--link-arrow-sm-right"><svg><use xlink:href="#16--link-arrow-sm-right"></use></svg></span><!-- /component: Icon --></span></button><!-- /component: Button --></div><div class="MainNav--sub--title"><!-- component: Link --><a class="Link layout-standalone size-small" href="[%=href%]">[%=text%]<span class="Link--icon"><!-- component: Icon --><span class="Icon" data-name="16--link-internal"><svg><use xlink:href="#16--link-internal"></use></svg></span><!-- /component: Icon --></span></a><!-- /component: Link --></div><ul class="MainNav--sub--list">[%=content%]</ul></div><!-- /component: MainNavSubItem --></template><script>(function (url, revision) { function init(delayed) { var svgEl = document.getElementById('svgsprite'); svgEl && svgEl.parentNode.removeChild(svgEl); var svg = storage.svgicons.replace('<svg ', '<svg id="svgsprite" style="display: none"'); document.body.insertAdjacentHTML('beforeend', svg); } function fetchSprite(path, callback) { var httpRequest = new XMLHttpRequest(); httpRequest.onreadystatechange = function () { if (httpRequest.readyState === 4 && httpRequest.status === 200 && callback) { callback(httpRequest.responseText); } }; httpRequest.open('GET', path); httpRequest.send(); } var storage = window.localStorage || {}; if (!storage.svgicons || storage.svgicons_revision != revision) { fetchSprite(url, function (data) { storage.svgicons = data; storage.svgicons_revision = revision; init(true); }); } if (storage.svgicons) { init(); } })("../assets/icons/sprite.svg", "b762ba48453bafb78039d89a1c8fb9d3"); // Important for backend implementation: The revision (second parameter) should change whenever the svg sprite changes, e.g. you can use the modification timestamp of the svg file.</script></body></html>