<div class="library-listing">
<div class="library-listing__container">
<h3 class="library-listing__title">Bibliothek</h3>
<div class="table-search">
<div class="table-search__container">
<div class="text-field--light text-field-search--light is-initialized" data-disable-text-field-js>
<div class="text-field__wrapper text-field-search__wrapper">
<input class="text-field__input text-field-search__input" id="variant-search" type="text" name="variant-search" data-library-table-search="true" placeholder="Suche in Einträgen" />
<label class="visually-hidden" for="variant-search">Suche in Einträgen</label>
<button type="reset" class="text-field-search__reset"></button>
<button type="submit" class="text-field-search__search"></button>
<div class="text-field-search__loader ">
<div class="loading-spinner -vertical -horizontal">
<div class="loading-spinner__spinner--small"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="library-listing__index visually-hidden">
<button type="button" onclick="document.getElementById('09').scrollIntoView({behavior: 'smooth'});" class="library-listing__index-button">0-9</button>
<button type="button" onclick="document.getElementById('A').scrollIntoView({behavior: 'smooth'});" class="library-listing__index-button">A</button>
<button type="button" onclick="document.getElementById('B').scrollIntoView({behavior: 'smooth'});" class="library-listing__index-button">B</button>
<button type="button" onclick="document.getElementById('C').scrollIntoView({behavior: 'smooth'});" class="library-listing__index-button">C</button>
<button type="button" onclick="document.getElementById('E').scrollIntoView({behavior: 'smooth'});" class="library-listing__index-button">E</button>
<button type="button" onclick="document.getElementById('F').scrollIntoView({behavior: 'smooth'});" class="library-listing__index-button">F</button>
<button type="button" onclick="document.getElementById('G').scrollIntoView({behavior: 'smooth'});" class="library-listing__index-button">G</button>
<button type="button" onclick="document.getElementById('H').scrollIntoView({behavior: 'smooth'});" class="library-listing__index-button">H</button>
<button type="button" onclick="document.getElementById('I').scrollIntoView({behavior: 'smooth'});" class="library-listing__index-button">I</button>
<button type="button" onclick="document.getElementById('J').scrollIntoView({behavior: 'smooth'});" class="library-listing__index-button">J</button>
<button type="button" onclick="document.getElementById('K').scrollIntoView({behavior: 'smooth'});" class="library-listing__index-button">K</button>
<button type="button" onclick="document.getElementById('L').scrollIntoView({behavior: 'smooth'});" class="library-listing__index-button">L</button>
<button type="button" onclick="document.getElementById('M').scrollIntoView({behavior: 'smooth'});" class="library-listing__index-button">M</button>
<button type="button" onclick="document.getElementById('N').scrollIntoView({behavior: 'smooth'});" class="library-listing__index-button">N</button>
<button type="button" onclick="document.getElementById('O').scrollIntoView({behavior: 'smooth'});" class="library-listing__index-button">O</button>
<button type="button" onclick="document.getElementById('P').scrollIntoView({behavior: 'smooth'});" class="library-listing__index-button">P</button>
<button type="button" onclick="document.getElementById('R').scrollIntoView({behavior: 'smooth'});" class="library-listing__index-button">R</button>
<button type="button" onclick="document.getElementById('S').scrollIntoView({behavior: 'smooth'});" class="library-listing__index-button">S</button>
<button type="button" onclick="document.getElementById('T').scrollIntoView({behavior: 'smooth'});" class="library-listing__index-button">T</button>
<button type="button" onclick="document.getElementById('U').scrollIntoView({behavior: 'smooth'});" class="library-listing__index-button">U</button>
<button type="button" onclick="document.getElementById('W').scrollIntoView({behavior: 'smooth'});" class="library-listing__index-button">W</button>
<button type="button" onclick="document.getElementById('X').scrollIntoView({behavior: 'smooth'});" class="library-listing__index-button">X</button>
<button type="button" onclick="document.getElementById('Y').scrollIntoView({behavior: 'smooth'});" class="library-listing__index-button">Y</button>
<button type="button" onclick="document.getElementById('Z').scrollIntoView({behavior: 'smooth'});" class="library-listing__index-button">Z</button>
</div>
<div class="library-listing__group-container" data-library-context>
<div class="library-listing__group" id="A">
<div class="library-listing__group-name">A</div>
<div class="library-listing__links">
<div class="library-listing__entry">
<a href="https://example.com" target="_blank" class="library-listing__entry-title"></a>
<div class="library-listing__entry-description">Bestellformular</div>
</div>
<div class="library-listing__entry">
<a href="https://example.com" target="_blank" class="library-listing__entry-title"></a>
<div class="library-listing__entry-description">Bestellformular</div>
</div>
<div class="library-listing__entry">
<a href="https://example.com" target="_blank" class="library-listing__entry-title"></a>
<div class="library-listing__entry-description">AGB, Garantie- und Rücksendebedingungen</div>
</div>
</div>
</div>
<div class="library-listing__group" id="B">
<div class="library-listing__group-name">B</div>
<div class="library-listing__links">
<div class="library-listing__entry">
<a href="https://example.com" class="library-listing__entry-title"></a>
<div class="library-listing__entry-description">Kurzanleitung zur Webplattform</div>
</div>
<div class="library-listing__entry">
<a href="https://example.com" class="library-listing__entry-title"></a>
<div class="library-listing__entry-description">Offizielles FUMO Bewerbungs-Formular</div>
</div>
<div class="library-listing__entry">
<a href="https://example.com" class="library-listing__entry-title"></a>
<div class="library-listing__entry-description"></div>
</div>
<div class="library-listing__entry">
<a href="https://example.com" class="library-listing__entry-title"></a>
<div class="library-listing__entry-description"></div>
</div>
<div class="library-listing__entry">
<a href="https://example.com" class="library-listing__entry-title"></a>
<div class="library-listing__entry-description">Nützliche Links zu Bosch</div>
</div>
</div>
</div>
<div class="library-listing__group" id="E">
<div class="library-listing__group-name">E</div>
<div class="library-listing__links">
<div class="library-listing__entry">
<a href="https://example.com" class="library-listing__entry-title"></a>
<div class="library-listing__entry-description">Preisliste für personalisierte Trinkflaschen</div>
</div>
<div class="library-listing__entry">
<a href="https://example.com" class="library-listing__entry-title"></a>
<div class="library-listing__entry-description"></div>
</div>
</div>
</div>
<div class="library-listing__group" id="F">
<div class="library-listing__group-name">F</div>
<div class="library-listing__links">
<div class="library-listing__entry">
<a href="https://example.com" class="library-listing__entry-title"></a>
<div class="library-listing__entry-description">Diverse Einstellungshilfen zu FOX</div>
</div>
<div class="library-listing__entry">
<a href="https://example.com" class="library-listing__entry-title"></a>
<div class="library-listing__entry-description">Ersatzteilübersicht zu FOX</div>
</div>
<div class="library-listing__entry">
<a href="https://example.com" class="library-listing__entry-title"></a>
<div class="library-listing__entry-description">Nützliche Dokumente zu FOX</div>
</div>
<div class="library-listing__entry">
<a href="https://example.com" class="library-listing__entry-title"></a>
<div class="library-listing__entry-description">Nützliche Links zu FOX</div>
</div>
<div class="library-listing__entry">
<a href="https://example.com" class="library-listing__entry-title"></a>
<div class="library-listing__entry-description">Diverse Servicehilfen zu FOX</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% include '@SharedComponents/modules/bricks/components/library/library.twig' %}
{
"headingLevel": "3",
"title": "Bibliothek",
"searchField": {
"id": "variant-search",
"label": "Suche in Einträgen",
"value": ""
},
"groups": [
{
"name": "A",
"id": "A",
"entries": [
{
"name": "ABUS OneKey Plus",
"description": "Bestellformular",
"href": "https://example.com",
"newTab": true
},
{
"name": "ABUS OneKey XPlus",
"description": "Bestellformular",
"href": "https://example.com",
"newTab": true
},
{
"name": "Allgemeine Geschäftsbedingungen",
"description": "AGB, Garantie- und Rücksendebedingungen",
"href": "https://example.com",
"newTab": true
}
]
},
{
"name": "B",
"id": "B",
"entries": [
{
"name": "B2FUMO 3.0 - Anleitung Webplattform",
"description": "Kurzanleitung zur Webplattform",
"href": "https://example.com"
},
{
"name": "Bewerbungs-Formular ",
"description": "Offizielles FUMO Bewerbungs-Formular",
"href": "https://example.com"
},
{
"name": "Bikefitting.com - Handbuch",
"href": "https://example.com"
},
{
"name": "Bosch – Nützliche Dokumente",
"href": "https://example.com"
},
{
"name": "Bosch – Nützliche Links",
"description": "Nützliche Links zu Bosch",
"href": "https://example.com"
}
]
},
{
"name": "E",
"id": "E",
"entries": [
{
"name": "Elite Customized",
"description": "Preisliste für personalisierte Trinkflaschen",
"href": "https://example.com"
},
{
"name": "Ergon Sattel Selector",
"href": "https://example.com"
}
]
},
{
"name": "F",
"id": "F",
"entries": [
{
"name": "FOX – Einstellungshilfen",
"description": "Diverse Einstellungshilfen zu FOX",
"href": "https://example.com"
},
{
"name": "FOX – Ersatzteile",
"description": "Ersatzteilübersicht zu FOX",
"href": "https://example.com"
},
{
"name": "FOX – Nützliche Dokumente",
"description": "Nützliche Dokumente zu FOX",
"href": "https://example.com"
},
{
"name": "FOX – Nützliche Links",
"description": "Nützliche Links zu FOX",
"href": "https://example.com"
},
{
"name": "FOX – Servicehilfen",
"description": "Diverse Servicehilfen zu FOX",
"href": "https://example.com"
}
]
}
]
}
import './library.scss';
import Library, {selector as sel} from 'cando-cx-components-library/components/modules/bricks/components/library/library';
export default Library;
export const selector = sel;
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/bricks/components/library/library";
No notes defined.