Zoll-Auktion Komponenten

Kategorien-Element

Kategoriename

Kategorie Bild
<a href="#">
    <div class="itz-category-item">
        <h3 class="itz-h4 text-left w-50">Kategoriename</h3>
        <span class="itz-category-pic">
            <img src="assets/Categories/Antiquitaeten.svg" alt="Kategorie Bild">
        </span>
    </div>
</a>

Top-Auktion-Element

<div class="itz-top-auktion-item">
    <div class="itz-head">
        <span class="itz-undertitle">Noch X Tage X Stunden X Min</span>
        <a class="itz-bookmark">
            <img src="assets/star.svg" alt="Merken">
        </a>
    </div>
    <div class="itz-title">
        <a href="" class="itz-txt-dark">
            <h3 class="itz-p itz-body-big">
                Hier kommt ein langer Titel lorem ipsum lorem ipsum lorem ipsum
            </h3>
        </a>
    </div>
    <div class="itz-price clearfix">
        <span class="itz-h4">EUR 1.000,00</span>
    </div>
    <div class="itz-pictures">
        <img src="assets/580338_1.png" alt="Auktion Bild">
        <img src="assets/580338_1.png" alt="Auktion Bild">
    </div>
</div>

Bietfenster

Status: Noch nicht geboten

TIP

Um die Hintergrundfarbe zu ändern, könnten die .itz-bg-* Klassen in Farben benutzt werden.

Bietprozess Beschreibung
Hier kommt die Beschreibung von der Bietprozess

Aktuelles Gebot

EUR 2.231.00

99 Gebote | 245 mal angesehen

Anfangsgebot: 500,00 EUR

Minimalgebot: 2.331,00 EUR

<div class="col-12 itz-bid-window itz-bg-primary-gray">
    <div class="itz-more-info">
        <div class="itz-info-icon">
            <img src="assets/info.svg" alt="Bietprozess Beschreibung">
        </div>
        <span class="itz-info-text itz-undertitle">Hier
            kommt die Beschreibung
            von der
            Bietprozess
        </span>
    </div>
    <div class="itz-current-bid">
        <p>Aktuelles Gebot</p>
        <h3>EUR 2.231.00</h3>
        <p><a href="#gebotsübersicht">99
                Gebote</a> | <span>
                245
                mal angesehen</span></p>
    </div>
    <div class="itz-bid-now">
        <input type="text" class="itz-form-control" placeholder="Maximalbetrag eingeben"
            aria-label="Maximalbetrag">
        <button class="itz-btn itz-btn-primary-blue itz-btn-block">
            Bieten
        </button>
    </div>
    <div class="itz-bid-info">
        <p>
            <span>Anfangsgebot:</span>
            <span>500,00 EUR</span>
        </p>
        <p>
            <span>Minimalgebot:</span>
            <span>2.331,00 EUR</span>
        </p>
    </div>
</div>

Status: Geboten

Bietprozess Beschreibung
Hier kommt die Beschreibung von der Bietprozess

Aktuelles Gebot

EUR 2.231.00

99 Gebote | 245 mal angesehen

Ihr maximaler Gebot: EUR 2.231.00

Anfangsgebot: 500,00 EUR

Minimalgebot: 2.331,00 EUR

<div class="itz-bid-window bg-primary-gray">
    <div class="itz-more-info">
        <div class="itz-info-icon">
            <img src="assets/info.svg" alt="Bietprozess Beschreibung">
        </div>
        <span class="itz-info-text itz-undertitle">
            Here's how you can bid 
        </span>
    </div>
    <div class="itz-current-bid">
        <p>Aktuelles Gebot</p>
        <h3>EUR 2.231.00</h3>
        <p><a>99 Gebote</a> | <span> 245 mal angesehen</span></p>
    </div>
    <div class="your-bid">
        <p>Ihr maximaler Gebot: EUR 2.231.00</p>
    </div>
    <div class="itz-bid-now">
        <input type="text" class="itz-form-control" placeholder="Maximal Beitrag eingeben">
        <button class="itz-btn itz-btn-outline-primary-blue itz-btn-block">
            Maximaler Gebot erhöhen
        </button>
    </div>
    <div class="itz-bid-info">
    <p>
        <span>Anfangsgebot:</span>
        <span>500,00 EUR</span>
    </p>
    <p>
        <span>Minimalgebot:</span>
        <span>2.331,00 EUR</span>
    </p>
    </div>
</div>

Listen

Um den Border bei den letzten Element zu entfernen, sollten die Elemente in einem .items Container und einem Bootstrap .container oder .container-fluid enthalten werden.

<div class="container-fluid">
    <div class="items"> 
        // liste von .itz-list-item oder .itz-misc-item Elemente
    </div>
</div>

WARNING

In .items sollten nur Listenelemente eingefügt werden. In .container-fluid können auch andere Elemente wie Pagination plaziert werden.

Listen-Element

Dieses Element wird auf der Listenansicht der Auktionen angezeigt.

Auktion Bild

1 Posten Skatepark Elemente sadfasdfasdf "Pyramide mit schräger Lorem

1000,00 EUR

99 Gebote
30T 22Std 59 Min
Abholung / Versand
<div class="row itz-list-item">
    <div class="col-xl-2 col-lg-3 col-4 itz-list-item-pic">
        <img src="assets/auk2.png" alt="Auktion Bild" class="itz-img-fluid">
    </div>
    <div class="col-xl-8 col-lg-7 col-8 itz-list-item-content">
        <h4 class="itz-p mb-0"><a href="">1 Posten Skatepark Elemente sadfasdfasdf
                "Pyramide mit schräger Lorem</a></h4>
        <div class="itz-list-item-price">
            <p class="itz-custom-price mb-0">1000,00 EUR</p>
            <span class="itz-bids">99 Gebote</span>
            <div>30T 22Std 59 Min</div>
            <div class="itz-shipping">
                Abholung / Versand
            </div>
        </div>
    </div>
    <div class="col-lg-2">
        <a class=" itz-bookmark">
            <span> </span>
            <img src="assets/star.svg" alt="Merken">
        </a>
    </div>
</div>

"Verschiedenes"-Element

Dieses Element wird auf der Hauptseite unter "Verschiedenes" angezeigt

Auktion Bild

1 Posten Skatepark Elemente "Pyramide mit schräger Lorem

1000,00 EUR
Noch 30 Tage 22 Std. 59 Min.
<div class="row itz-misc-item">
    <div class="col-lg-2 col-3 itz-misc-pic">
        <img src="assets/580338_1.png" alt="Auktion Bild">
    </div>
    <div class="col-lg-8 col-7 itz-misc-content itz-truncate">
        <h4 class="itz-p mb-0"><a href="" class="itz-body-big">1 Posten
                Skatepark Elemente "Pyramide
                mit
                schräger Lorem</a></h4>
        <div class="itz-misc-price">1000,00 EUR</div>
        <div>Noch 30 Tage 22 Std. 59 Min.</div>
    </div>
    <div class="col-2">
        <a class="itz-bookmark itz-bookmark-selected">
            <span></span>
            <img src="assets/star.svg" alt="Merken">
        </a>
    </div>
</div>

Nutzerkonto Elemente

Gebote

Auktion Bild

1 Posten Skatepark Elemente sadfasdfasdf "Pyramide mit schräger Lorem

1000,00 EUR

99 Gebote
30T 22Std 59 Min
Abholung / Versand
<div class="row itz-list-item">
    <div class="col-xl-2 col-lg-3 col-4 itz-list-item-pic">
        <img src="assets/auk2.png" alt="Auktion Bild" class="itz-img-fluid">
    </div>
    <div class="col-xl-8 col-lg-7 col-8 itz-list-item-content">
        <h4 class="itz-p mb-0"><a href="">1 Posten Skatepark Elemente sadfasdfasdf
                "Pyramide mit schräger Lorem</a></h4>
        <div class="itz-list-item-price">
            <p class="itz-custom-price mb-0">1000,00 EUR</p>
            <span class="itz-bids">99 Gebote</span>
            <div>30T 22Std 59 Min</div>
            <div class="itz-shipping">
                Abholung / Versand
            </div>
        </div>
    </div>
</div>

Gemerkt

Auktion Bild

1 Posten Skatepark Elemente sadfasdfasdf "Pyramide mit schräger Lorem

1000,00 EUR

99 Gebote
30T 22Std 59 Min
Abholung / Versand
<div class="row itz-list-item">
    <div class="col-xl-2 col-lg-3 col-4 itz-list-item-pic">
        <img src="assets/auk2.png" alt="Auktion Bild" class="itz-img-fluid">
    </div>
    <div class="col-xl-8 col-lg-7 col-8 itz-list-item-content">
        <h4 class="itz-p mb-0"><a href="">1 Posten Skatepark Elemente sadfasdfasdf
                "Pyramide mit schräger Lorem</a></h4>
        <div class="itz-list-item-price">
            <p class="itz-custom-price mb-0">1000,00 EUR</p>
            <span class="itz-bids">99 Gebote</span>
            <div>30T 22Std 59 Min</div>
            <div class="itz-shipping">
                Abholung / Versand
            </div>
        </div>
    </div>
    <div class="col-lg-2">
        <a class=" itz-bookmark-remove">
            <span></span>
            <img src="assets/remove.svg" alt="Entfernen">
        </a>
    </div>
</div>