Komponenten

Alerts

TIP

Zugehörige SASS Datei ist _alerts.scss.

Mit Hilfe der Klasse .itz-alert kann eine Warnung erzeugt werden.

<div class="itz-alert" role="alert">
    This is a warning!
    <button class="itz-alert-close">&times;</button>
</div>

Um die Warnung zu schließen, kann ein Schließ-Event auf .alert-close (z.B. mit Javascript) hinzugefügt werden.

Alerts mit Primärfarben

<div class="itz-alert itz-alert-primary-blue" role="alert">
    .itz-alert-primary-blue
    <button class="itz-alert-close">&times;</button>
</div>
<div class="itz-alert itz-alert-primary-gray" role="alert">
    .itz-alert-primary-gray
    <button class="itz-alert-close">&times;</button>
</div>

Alerts mit Sekundärfarben

<div class="itz-alert itz-alert-secondary-blue" role="alert">
    .itz-alert-secondary-blue
    <button class="itz-alert-close">&times;</button>
</div>
<div class="itz-alert itz-alert-secondary-gray" role="alert">
    .itz-alert-secondary-gray
</div>
<div class="itz-alert itz-alert-secondary-gray-AA" role="alert">
    .itz-alert-secondary-gray-AA
</div>

Alerts mit weiteren Farben

<div class="itz-alert itz-alert-red" role="alert">
    .itz-alert-red
</div>
<div class="itz-alert itz-alert-green" role="alert">
    .itz-alert-green
</div>
<div class="itz-alert itz-alert-yellow" role="alert">
    .itz-alert-yellow
</div>

Buttons

TIP

Zugehörige SASS Datei ist _buttons.scss.

Die Buttons haben eine feste Höhe und ein Padding links und rechts.

<button class="itz-btn">Default Button</button>
<button class="itz-btn itz-btn-transparent">Transparenter Button</button>

Block Buttons

<button class="itz-btn itz-btn-block">Block Button</button>

Kleine Buttons

<button class="itz-btn itz-btn-sm">Kleiner Button</button>

Buttons mit Primärfarben

Nur die Primärfabe Blau findet Verwendung.

<button class="itz-btn itz-btn-primary-blue">Primär</button>
<button class="itz-btn itz-btn-outline-primary-blue">Primär mit Outline</button>

Buttons mit Sekundärfarben

<button class="itz-btn itz-btn-secondary">Sekundär</button>
<button class="itz-btn itz-btn-outline-secondary">Sekundär mit Outline</button>

Buttons mit weiteren Farben

<button class="itz-btn itz-btn-red">Rot</button>
<button class="itz-btn itz-btn-yellow">Gelb</button>
<button class="itz-btn itz-btn-green">Grün</button>
<button class="itz-btn itz-btn-dark">Dunkel</button>
<button class="itz-btn itz-btn-light">Hell</button>

Forms

TIP

Zugehörige SASS Datei ist _forms.scss.

Das Layout von Textfeld, Textarea, Select, Checkbox und Radio Button Forms werden auf allen Systeme und Browser gleich dargestellt.

Textfelder

<input type="text" class="itz-form-control" placeholder="Insert your search term here">
<input type="text" class="itz-form-control itz-form-control-gray" placeholder="Insert your search term here">
<input type="text" class="itz-form-control" placeholder="Bad luck! This is disabled." disabled>

Textarea

<textarea class="itz-form-control">This is a textarea.</textarea>
<textarea class="itz-form-control itz-form-control-gray">This is a textarea.</textarea>
<textarea class="itz-form-control itz-form-control-gray" disabled>This is a disabled textarea.</textarea>
<select class="itz-form-control">
    <option value="1">First Item</option>
    <option value="2">Second Item</option>
</select>
<select class="itz-form-control itz-form-control-gray">
    <option value="1">First Item</option>
    <option value="2">Second Item</option>
</select>
<select class="itz-form-control itz-form-control-gray" disabled>
    <option value="2">Disabled Item</option>
    <option value="1">hello</option>
</select>

Checkbox und Radio

 <div class="itz-checkbox">
    <label class="itz-form-check">
        Checkbox
        <input type="checkbox">
        <span class="itz-checkmark"></span>
    </label>
</div>
<div>
    <label class="itz-form-check">Radio 1
        <input type="radio">
        <span class="itz-radiomark"></span>
    </label>
</div>

Suchfelder

<div class="itz-search-bar-inline">
    <input type="text" class="itz-form-control" placeholder="Suchbegriff eingeben..">
    <button class="itz-search-btn">
        <img src="assets/search-blue.svg" alt="Suche Button">
    </button>
</div>
<div class="itz-search-bar-inline">
    <input type="text" class="itz-form-control itz-form-control-gray" placeholder="Suchbegriff eingeben..">
    <button class="itz-search-btn">
        <img src="assets/search-blue.svg" alt="Suche Button">
    </button>
</div>

Pagination

Pfeil Links 1 ... 3 4 5 ... 7 Pfeil Rechts
<div class="itz-pagination my-3">
    <div>
        <a href="">
            <img src="assets/pager-pfeil-links.svg" alt="Pfeil Links">
        </a>
        <a href="#">1</a>
        <a href="#">...</a>
        <a href="#">3</a>
        <a href="#" class="itz-active">4</a>
        <a href="#">5</a>
        <a href="#">...</a>
        <a href="#">7</a>
        <a href="">
            <img src="assets/pager-pfeil-rechts.svg" alt="Pfeil Rechts">
        </a>
    </div>
</div>

Disabled Pagination

Pfeil Links 1 Pfeil Rechts
<div class="itz-pagination itz-pagination-disabled mt-3">
    <div>
        <a>
            <img src="assets/pager-pfeil-links.svg" alt="Pfeil Links">
        </a>
        <a class="itz-active">1</a>
        <a>
            <img src="assets/pager-pfeil-rechts.svg" alt="Pfeil Rechts">
        </a>
    </div>
</div>

Tabset

WARNING

Abhängigkeit: jQuery 3.3.1 oder höher

Damit das Tabset barrierefrei ist, werden die jeweiligen CSS Klassen und die aria-labels dynamisch erzeugt und entfernt.

TIP

Hier ist nur ein Screenshot zu sehen, da jQuery bis zur Abgabe Probleme in Verbindung mit Vue beim Stylguide bereitet hat, jedoch live voll funktional ist.

<div class="itz-tabset" id="tabset-misc">
    <ul class="itz-tabsList" role="tablist">
        <li class="itz-current" role="tab"><a href="#misc-tab1">
                <h3 class="d-inline-block itz-p itz-p-tab">Gesponsert</h3>
            </a></li>
        <li role="tab"><a href="#misc-tab2">
                <h3 class="d-inline-block itz-p itz-p-tab">Für Kfz Liebhaber</h3>
            </a></li>
    </ul>
    <div class="itz-tabPanel" id="misc-tab1">
        sfasdgsadfdsaf
    </div>
    <!-- Tab 2 Inhalt -->
    <div class="itz-tabPanel" id="misc-tab2">
        sdfasdfasdf
    </div>
</div>
$(function () {
    var tabs = $(".itz-tabset");

    // For each individual tab DIV, set class and aria-hidden attribute, and hide it
    $(tabs).find("> div").attr({
        "class": "itz-tabPanel flex-grow-1",
        "aria-hidden": "true"
    }).hide();

    // Get the list of tab links
    var tabsList = tabs.find("ul:first").attr({
        "class": "itz-tabsList",
    });

    // For each item in the tabs list...
    $(tabsList).find("li > a").each(
        function (a) {
            var tab = $(this);

            // Create a unique id using the tab link's href
            var tabId = "tab-" + tab.attr("href").slice(1);

            // Assign tab id and aria-selected attribute to the tab control, but do not remove the href
            tab.parent().attr({
                "id": tabId,
                "aria-selected": "false",
                "role": "tab"
            });

            // Assign aria attribute to the relevant tab panel
            $(tabs).find(".itz-tabPanel").eq(a).attr("aria-labelledby", tabId);

            // Set the click event for each tab link
            tab.click(
                function (e) {
                    var tabPanel;

                    // Prevent default click event
                    e.preventDefault();

                    // Change state of previously selected tabList item
                    $(tabsList).find("> li.itz-current").removeClass("itz-current").attr("aria-selected", "false");

                    // Hide previously selected tabPanel
                    $(tabs).find(".itz-tabPanel:visible").attr("aria-hidden", "true").hide();

                    // Show newly selected tabPanel
                    tabPanel = $(tabs).find(".itz-tabPanel").eq(tab.parent().index());
                    tabPanel.attr("aria-hidden", "false").show();

                    // Set state of newly selected tab list item
                    tab.parent().attr("aria-selected", "true").addClass("itz-current");

                    // Set focus to the first heading in the newly revealed tab content
                    tabPanel.children("h2").attr("tabindex", -1).focus();
                }
            );
        }
    );


    // Show the first tabPanel
    $(tabs).find(".itz-tabPanel:first").attr("aria-hidden", "false").show();

    // Set state for the first tabsList li
    $(tabsList).find("li:first").addClass("itz-current").attr({
        "aria-selected": "true",
        "tabindex": "0"
    });
});

Slider

Die Dokumentation kann auf noUiSlider abgerufen werden. Slider die auf der Listenansicht Verwendung finden, sind mit inlince script konfiguriert und mit CSS angepasst. Sie sind jeweils mit Input-Felder gekoppelt.

Slider

Range-Slider