Raptus Design Theme

Example
Datum
01.01.2019
Bestellnummer
4567893
Gesamtbetrag
4228.00
Bezahlungsart
Kreditkarte
Kontakt E-Mail
name@provider.tld
Lieferadresse
Raptus AG
Gartenweg 1
3250 Lyss
Rechnungsadresse
Raptus AG
Gartenweg 1
3250 Lyss
Anmerkungen
Dies ist eine normale Bestellung benötigt eigentlich keine Anmerkung
Status
In Bearbeitung

Bestellte Produkte

Warenwert inkl. MwSt. 4'220.40
7.7% Mehrwertsteuer 324.95
Versandkosten 7.60
Gesamtsumme 4'228.00
Markup
<div class="order-detail">
    <dl class="order-detail__summary definition-list">
        <dt>Datum</dt>
        <dd>01.01.2019</dd>
        <dt>Bestellnummer</dt>
        <dd>4567893</dd>
        <dt>Gesamtbetrag</dt>
        <dd>4228.00</dd>
        <dt>Bezahlungsart</dt>
        <dd>Kreditkarte</dd>
        <dt>Kontakt E-Mail</dt>
        <dd><a href="javascript://">name@provider.tld</a></dd>
        <dt>Lieferadresse</dt>
        <dd>
            Raptus AG<br>
            Gartenweg 1<br>
            3250 Lyss
        </dd>
        <dt>Rechnungsadresse</dt>
        <dd>
            Raptus AG<br>
            Gartenweg 1<br>
            3250 Lyss
        </dd>
        <dt>Anmerkungen</dt>
        <dd>Dies ist eine normale Bestellung benötigt eigentlich keine Anmerkung</dd>
        <dt>Status</dt>
        <dd class="definition-list__price-text">In Bearbeitung</dd>
    </dl>
    <div class="order-detail__products-title card-title card-title--left-zero card-title--large">
        <h4 class="card-title__title">Bestellte Produkte</h4>
    </div>
    <div class="order-detail__products basket-product-list">
        <div class="product-card product-card--basket">
            <a href="javascript://" class="product-card__link">
                <div class="product-card__image">
                    <div class="image image--square image--fill">
                        <div class="image__image"><img src="images/test-image.jpg"></div>
                    </div>
                </div>
                <h4 class="product-card__title">
                    Title
                </h4>
                <div class="product-card__meta">
                    <span class="availability availability--good"></span>
                    Hersteller #545587
                </div>
                <div class="product-card__info">
                    Farbe Blau, Grösse M
                </div>
            </a>
            <div class="product-card__price price price--stacked">
                <span class="price__amount">69.90</span>
            </div>
            <div class="product-card__actions card-actions card-actions--extended">
                <div class="card-actions__quantity quantity">
                    <input type="number" class="quantity__widget input__widget" step="0.05" min="0.1" max="" value="1" size="4" disabled>
                </div>
                <div class="card-actions__disturber">
                    <span class="disturber">-11%</span>
                </div>
            </div>
        </div>
        <div class="product-card product-card--basket">
            <a href="javascript://" class="product-card__link">
                <div class="product-card__image">
                    <div class="image image--square image--fill">
                        <div class="image__image"><img src="images/test-image.jpg"></div>
                    </div>
                </div>
                <h4 class="product-card__title">
                    Title
                </h4>
                <div class="product-card__meta">
                    <span class="availability availability--good"></span>
                    Hersteller #545587
                </div>
                <div class="product-card__info">
                    Farbe Blau, Grösse M
                </div>
            </a>
            <div class="product-card__price price price--reduced price--stacked">
                <span class="price__amount">69.90</span>
                <span class="price__strikethrough">120.00</span>
            </div>
            <div class="product-card__actions card-actions card-actions--extended">
                <div class="card-actions__quantity quantity">
                    <input type="number" class="quantity__widget input__widget" step="0.05" min="0.1" max="" value="1" size="4" disabled>
                </div>
                <div class="card-actions__disturber">
                    <span class="disturber">-11%</span>
                </div>
            </div>
        </div>
    </div>
    <div class="order-detail__totals">
        <table class="totals-table">
            <tbody>
                <tr>
                    <th>Warenwert inkl. MwSt.</th>
                    <td>4'220.40</td>
                </tr>
                <tr>
                    <th>7.7% Mehrwertsteuer</th>
                    <td>324.95</td>
                </tr>
                <tr>
                    <th>Versandkosten</th>
                    <td>7.60</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th>Gesamtsumme</th>
                    <td>4'228.00</td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>
Source: assets/styles/04-organisms/01-base/_order-detail.scss, line 1