Navigation
Close Icon
CODE
×
HTML
<svg class='close' xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 640 640'><path d="M0 0h640v640H0z" fill="none" /> <path d="m489.87 180.35-22.63-22.63-144.86 144.86-144.85-144.86-22.63 22.63 144.86 144.86L154.9 470.06l22.63 22.63 144.85-144.86 144.86 144.86 22.63-22.63-144.86-144.85 144.86-144.86z" fill="currentColor"/></svg>
CSS
svg.close { width: 32px; height: 32px; } svg.close { transform: rotate(0deg); transition: 200ms ease-out; } svg.close.active { transform: rotate(180deg); transition: 200ms ease-out; }
JS
Close Icon
Last Edit: Oct 26, 2023, 11:41am
×
Search Icon
CODE
×
HTML
<svg class='search-icon' version='1.1' id='search' width='32' height='32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 640 640' style='enable-background:new 0 0 640 640;' xml:space='preserve'><rect y="0" fill="none" width="640" height="640"></rect> <path fill="currentColor" d="M614.7,591.1L467.5,443.9C495.8,410.4,513,367.2,513,320c0-105.9-86.1-192-192-192s-192,86.1-192,192s86.1,192,192,192 c47.2,0,90.4-17.2,123.9-45.5l147.2,147.2L614.7,591.1z M321,480c-88.2,0-160-71.8-160-160s71.8-160,160-160s160,71.8,160,160 S409.2,480,321,480z"></path></svg>
CSS
svg.search-icon { display:block; } .search-icon { --ind-p: 6px; position: absolute; width: 32px; height: 32px; cursor: pointer; transform: rotate(0deg); transition: 400ms ease-in-out; transition-property: all; top: 63px; right: clamp(calc(var(--header-vp-min) + var(--ind-p)), calc(var(--header-vp-ideal) + var(--ind-p)), calc(var(--header-vp-max) + var(--ind-p))); } @media (hover: hover) { .search-icon:hover { transform: rotate(90deg); } } @media (max-width: 1199.98px) { svg.search-icon { display: none !important; } } div.styleguide.atoms svg.search-icon { display: block !important; position: static; }
JS
Search Icon
Last Edit: Oct 26, 2023, 11:37am
×
Hamburger Menue (desktop)
CODE
×
HTML
<svg class='menue-icon desktop' version='1.1' id='menu' width='40' height='40' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 640 640' style='enable-background:new 0 0 640 640;' xml:space='preserve'><rect y="0" fill="none" width="640" height="640"></rect> <rect id="hm1" x="64" y="160" class="hm-line" fill="currentColor" width="512" height="32"></rect> <rect id="hm2" x="64" y="304" class="hm-line" fill="currentColor" width="512" height="32"></rect> <rect id="hm3" x="64" y="448" class="hm-line" fill="currentColor" width="512" height="32"></rect></svg>
CSS
svg.menue-icon.desktop { position:relative; cursor:pointer; display:inline-block; width: 40px; height: 40px; } svg.menue-icon { transition:all 200ms ease-in-out } @media (max-width: 1199px) { svg.menue-icon { display: block; } } #hm1, #hm2, #hm3 { transition: 200ms ease-in-out; transform-origin: 50% 50%; transition-property: transform } svg.menue-icon:hover > #hm1 { transform:translateY(144px) } svg.menue-icon:hover > #hm2 { transform:rotate(-90deg) } svg.menue-icon:hover > #hm3 { transform:translateY(-144px) } svg.menue-icon.open { transform:rotate(-45deg) } svg.menue-icon.open > #hm1 { transform:translateY(144px) } svg.menue-icon.open > #hm2 { transform:rotate(-90deg) } svg.menue-icon.open > #hm3 { transform:translateY(-144px) } div.styleguide.atoms svg.menue-icon { display: block !important; left: 3px; right: none: } svg.menue-icon { display:none; position:relative; cursor:pointer; width: 40px; height: 40px; } svg.menue-icon { --ind-p: 5px; top: -0.5px; right: clamp(calc(var(--header-vp-min) + var(--ind-p)), calc(var(--header-vp-ideal) + var(--ind-p)), calc(var(--header-vp-max) + var(--ind-p))); transition:all 200ms ease-in-out } @media (max-width: 1199px) { svg.menue-icon { display: block; } } #hm1, #hm2, #hm3 { transition: 200ms ease-in-out; transform-origin: 50% 50%; transition-property: transform } svg.menue-icon:hover > #hm1 { transform:translateY(144px) } svg.menue-icon:hover > #hm2 { transform:rotate(-90deg) } svg.menue-icon:hover > #hm3 { transform:translateY(-144px) } svg.menue-icon.open { transform:rotate(-45deg) } svg.menue-icon.open > #hm1 { transform:translateY(144px) } svg.menue-icon.open > #hm2 { transform:rotate(-90deg) } svg.menue-icon.open > #hm3 { transform:translateY(-144px) } div.styleguide.atoms svg.menue-icon { display: block !important; left: 3px; right: none: }
JS
Hamburger Menue (desktop)
Last Edit: Oct 26, 2023, 11:35am
×
Hamburger Menue (mobile)
CODE
×
HTML
<svg class='menue-icon' version='1.1' id='menu' width='40' height='40' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 640 640' style='enable-background:new 0 0 640 640;' xml:space='preserve'><rect y="0" fill="none" width="640" height="640"></rect> <rect id="hm1" x="64" y="160" class="hm-line" fill="currentColor" width="512" height="32"></rect> <rect id="hm2" x="64" y="304" class="hm-line" fill="currentColor" width="512" height="32"></rect> <rect id="hm3" x="64" y="448" class="hm-line" fill="currentColor" width="512" height="32"></rect></svg>
CSS
svg.menue-icon { display:none; position:relative; cursor:pointer; width: 40px; height: 40px; } svg.menue-icon { --ind-p: 5px; top: -0.5px; right: clamp(calc(var(--header-vp-min) + var(--ind-p)), calc(var(--header-vp-ideal) + var(--ind-p)), calc(var(--header-vp-max) + var(--ind-p))); transition:all 200ms ease-in-out } @media (max-width: 1199px) { svg.menue-icon { display: block; } } #hm1, #hm2, #hm3 { transition: 200ms ease-in-out; transform-origin: 50% 50%; transition-property: transform } svg.menue-icon:hover > #hm1 { transform:translateY(144px) } svg.menue-icon:hover > #hm2 { transform:rotate(-90deg) } svg.menue-icon:hover > #hm3 { transform:translateY(-144px) } svg.menue-icon.open { transform:rotate(-45deg) } svg.menue-icon.open > #hm1 { transform:translateY(144px) } svg.menue-icon.open > #hm2 { transform:rotate(-90deg) } svg.menue-icon.open > #hm3 { transform:translateY(-144px) } div.styleguide.atoms svg.menue-icon { display: block !important; left: 3px; right: none: }
JS
Hamburger Menue (mobile)
Last Edit: Oct 26, 2023, 11:35am
×
Language Switch
CODE
×
HTML
<div class='language-switch'><a href="#" class="menue-item language-de" role="listitem">DE</a> <span class="divider-language" aria-hidden="true">|</span> <a href="#" class="menue-item language-fr" role="listitem">FR</a> <span class="divider-language" aria-hidden="true">|</span> <a href="#" class="menue-item selected language-en" role="listitem">EN</a></div>
CSS
div.language-switch { display:inline-block; white-space:nowrap; letter-spacing: var(--lls-1); word-spacing: var(--lls-2); }
JS
Language Switch
Last Edit: Oct 23, 2023, 8:22pm
×
DE
|
FR
|
EN
Menue Item (with DropDown)
CODE
×
HTML
<li class='dropdown'><a href="#" class="menue-item" role="listitem">Menue Item</a> <nav class="subnavi" role="list"> <a href="#" class="menue-item" role="listitem">Submenue Item</a> <a href="#" class="menue-item selected" role="listitem">Active Item</a> <a href="#" class="menue-item" role="listitem">Platea non</a> <a href="#" class="menue-item" role="listitem">Molestie curabitur tempus</a> <a href="#" class="menue-item" role="listitem">Convallis</a> <a href="#" class="menue-item" role="listitem">Vehicula</a> </nav></li>
CSS
li.dropdown { display:inline-block; }
JS
Menue Item (with DropDown)
Last Edit: Oct 23, 2023, 8:17pm
×
Menue Item
Submenue Item
Active Item
Platea non
Molestie curabitur tempus
Convallis
Vehicula
Tooltip
CODE
×
HTML
<a class='tooltip-icon' href='#' data-bs-toggle='tooltip' data-bs-trigger='click' data-bs-title='Some tooltip text!'></a>
CSS
a.tooltip-icon { display:inline-block; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NjYuMTcgNDY2LjE3Ij4NCiAgPHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMjMzLjA4IDBDMTA0LjM2IDAgMCAxMDQuMzYgMCAyMzMuMDhzMTA0LjM2IDIzMy4wOCAyMzMuMDggMjMzLjA4UzQ2Ni4xNiAzNjEuOCA0NjYuMTYgMjMzLjA4IDM2MS44MSAwIDIzMy4wOCAwWm0xNDIuMTkgMzc1LjI3Yy0zNy45OCAzNy45OC04OC40OCA1OC45LTE0Mi4xOSA1OC45cy0xMDQuMjEtMjAuOTItMTQyLjE5LTU4LjljLTM3Ljk4LTM3Ljk4LTU4LjktODguNDgtNTguOS0xNDIuMTlzMjAuOTItMTA0LjIxIDU4LjktMTQyLjE5YzM3Ljk4LTM3Ljk4IDg4LjQ4LTU4LjkgMTQyLjE5LTU4LjlzMTA0LjIxIDIwLjkyIDE0Mi4xOSA1OC45IDU4LjkgODguNDggNTguOSAxNDIuMTktMjAuOTIgMTA0LjIxLTU4LjkgMTQyLjE5WiIgLz4NCiAgPHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMjQ5Ljc5IDE4Mi40NmgtNTAuMTR2MjFoMTguMTR2MTE2LjIyaC0yMS45M3YyMWg3Ni40NXYtMjFoLTIyLjUyVjE4Mi40NnoiIC8+DQogIDxjaXJjbGUgZmlsbD0iY3VycmVudENvbG9yIiBjeD0iMjMzLjgiIGN5PSIxMzQuMTUiIHI9IjIzLjczIiAvPg0KPC9zdmc+'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; width: 18px; height: 18px; } a.tooltip-icon:hover, a.tooltip-icon:focus { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NjYuMTcgNDY2LjE3Ij4NCiAgPHBhdGggZmlsbD0idmFyKC0tZnNjMSkiIGQ9Ik0yMzMuMDggMEMxMDQuMzYgMCAwIDEwNC4zNiAwIDIzMy4wOHMxMDQuMzYgMjMzLjA4IDIzMy4wOCAyMzMuMDhTNDY2LjE2IDM2MS44IDQ2Ni4xNiAyMzMuMDggMzYxLjgxIDAgMjMzLjA4IDBabTE0Mi4xOSAzNzUuMjdjLTM3Ljk4IDM3Ljk4LTg4LjQ4IDU4LjktMTQyLjE5IDU4LjlzLTEwNC4yMS0yMC45Mi0xNDIuMTktNTguOWMtMzcuOTgtMzcuOTgtNTguOS04OC40OC01OC45LTE0Mi4xOXMyMC45Mi0xMDQuMjEgNTguOS0xNDIuMTljMzcuOTgtMzcuOTggODguNDgtNTguOSAxNDIuMTktNTguOXMxMDQuMjEgMjAuOTIgMTQyLjE5IDU4LjkgNTguOSA4OC40OCA1OC45IDE0Mi4xOS0yMC45MiAxMDQuMjEtNTguOSAxNDIuMTlaIiAvPg0KICA8cGF0aCBmaWxsPSJ2YXIoLS1mc2MxKSIgZD0iTTI0OS43OSAxODIuNDZoLTUwLjE0djIxaDE4LjE0djExNi4yMmgtMjEuOTN2MjFoNzYuNDV2LTIxaC0yMi41MlYxODIuNDZ6IiAvPg0KICA8Y2lyY2xlIGZpbGw9InZhcigtLWZzYzEpIiBjeD0iMjMzLjgiIGN5PSIxMzQuMTUiIHI9IjIzLjczIiAvPg0KPC9zdmc+'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); }
JS
Tooltip
Last Edit: Sep 25, 2023, 5:58pm
×