Receipt
v0.0.0
The receipt component serves as a crucial document that verifies transactions, records purchase details.
Total list price
€ 123,45
21% OFF Total discount
€ -220,00
10% OFF Total discount
€ -220,00
Total discount
€ 36,00 remaining
€ 123,45
<!-- Receipt -->
<div class="vi-receipt">
<div class="vi-receipt__body">
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Total list price</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 123,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
21% OFF
</span>
Total discount
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="vi-receipt__discounted">€ -220,00</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
10% OFF
</span>
Total discount
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="vi-receipt__discounted">€ -220,00</p>
</div>
</div>
<div class="vi-receipt__row vi-form">
<div class="form-group">
<div class="custom-switch custom-control">
<input class="custom-control-input" id="sg-cc02d1" type="checkbox">
<label class="custom-control-label" for="sg-cc02d1">
Use my vouchers
</label>
</div>
</div>
</div>
<div class="vi-receipt__row vi-receipt__voucher-row d-none">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Total discount</p>
<p class="tiny">
€ 36,00 remaining
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="vi-receipt__discounted">€ 123,45</p>
</div>
</div>
</div>
<div class="vi-receipt__footer">
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
10% OFF
</span>
Total discount
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="vi-receipt__discounted">€ 123,45</p>
</div>
</div>
<div class="vi-receipt__row vi-receipt__final-price-row">
<div class="vi-receipt__column vi-receipt__name-column">
<p class="font-weight-bold">Product</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="font-weight-bold">€ 41144.40</p>
</div>
</div>
</div>
<!-- Button type: solid -->
<button type="button" class="mt-30 vi-btn-solid vi-btn-solid--lg vi-btn">Austin irony</button>
</div>Receipt component with header
Product
Qty
Price
Total list price
€ 123,45
21% OFF Total discount
€ -220,00
10% OFF Total discount
€ -220,00
Total discount
€ 36,00 remaining
€ 123,45
<!-- Receipt -->
<div class="vi-receipt">
<div class="vi-receipt__header">
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Product</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>Qty</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>Price</p>
</div>
</div>
</div>
<div class="vi-receipt__body">
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Total list price</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 123,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
21% OFF
</span>
Total discount
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="vi-receipt__discounted">€ -220,00</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
10% OFF
</span>
Total discount
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="vi-receipt__discounted">€ -220,00</p>
</div>
</div>
<div class="vi-receipt__row vi-form">
<div class="form-group">
<div class="custom-switch custom-control">
<input class="custom-control-input" id="sg-ad0a6c" type="checkbox">
<label class="custom-control-label" for="sg-ad0a6c">
Use my vouchers
</label>
</div>
</div>
</div>
<div class="vi-receipt__row vi-receipt__voucher-row d-none">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Total discount</p>
<p class="tiny">
€ 36,00 remaining
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="vi-receipt__discounted">€ 123,45</p>
</div>
</div>
</div>
<div class="vi-receipt__footer">
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
10% OFF
</span>
Total discount
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="vi-receipt__discounted">€ 123,45</p>
</div>
</div>
<div class="vi-receipt__row vi-receipt__final-price-row">
<div class="vi-receipt__column vi-receipt__name-column">
<p class="font-weight-bold">Product</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="font-weight-bold">€ 41144.40</p>
</div>
</div>
</div>
<!-- Button type: solid -->
<button type="button" class="mt-30 vi-btn-solid vi-btn-solid--lg vi-btn">Austin irony</button>
</div>Receipt component with error message and disabled button.
Total list price
€ 123,45
21% OFF Total discount
€ -220,00
10% OFF Total discount
€ -220,00
Total discount
€ 36,00 remaining
€ 123,45
Place for error message
<!-- Receipt -->
<div class="vi-receipt">
<div class="vi-receipt__body">
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Total list price</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 123,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
21% OFF
</span>
Total discount
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="vi-receipt__discounted">€ -220,00</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
10% OFF
</span>
Total discount
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="vi-receipt__discounted">€ -220,00</p>
</div>
</div>
<div class="vi-receipt__row vi-form">
<div class="form-group">
<div class="custom-switch custom-control">
<input class="custom-control-input" id="sg-90e200" type="checkbox">
<label class="custom-control-label" for="sg-90e200">
Use my vouchers
</label>
</div>
</div>
</div>
<div class="vi-receipt__row vi-receipt__voucher-row d-none">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Total discount</p>
<p class="tiny">
€ 36,00 remaining
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="vi-receipt__discounted">€ 123,45</p>
</div>
</div>
</div>
<div class="vi-receipt__footer">
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
10% OFF
</span>
Total discount
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="vi-receipt__discounted">€ 123,45</p>
</div>
</div>
<div class="vi-receipt__row vi-receipt__final-price-row">
<div class="vi-receipt__column vi-receipt__name-column">
<p class="font-weight-bold">Product</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="font-weight-bold">€ 41144.40</p>
</div>
</div>
</div>
<!-- Button type: solid -->
<button disabled type="button" class="mt-30 vi-btn-solid vi-btn-solid--lg vi-btn">Austin irony</button>
<p class="text-invalid mt-30">Place for error message</p>
</div>Receipt component with error message for basket validation and disabled button
Total list price
Validate the basket
Total discount
Validate the basket
Total discount
Validate the basket
Total discount
Validate the basket
Validate the basket
<!-- Receipt -->
<div class="vi-receipt">
<div class="vi-receipt__body">
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Total list price</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="text-invalid">Validate the basket</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
Total discount
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="text-invalid">Validate the basket</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
Total discount
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="text-invalid">Validate the basket</p>
</div>
</div>
<div class="vi-receipt__row vi-form">
<div class="form-group">
<div class="custom-switch custom-control">
<input class="custom-control-input" id="sg-3e7492" type="checkbox">
<label class="custom-control-label" for="sg-3e7492">
Use my vouchers
</label>
</div>
</div>
</div>
<div class="vi-receipt__row vi-receipt__voucher-row d-none">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Total discount</p>
<p class="tiny">
Validate the basket
</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="text-invalid">Validate the basket</p>
</div>
</div>
</div>
<div class="vi-receipt__footer">
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
Total discount
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="text-invalid">Validate the basket</p>
</div>
</div>
<div class="vi-receipt__row vi-receipt__final-price-row">
<div class="vi-receipt__column vi-receipt__name-column">
<p class="font-weight-bold">Product</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="text-invalid">Validate the basket</p>
</div>
</div>
</div>
<!-- Button type: solid -->
<button disabled type="button" class="mt-30 vi-btn-solid vi-btn-solid--lg vi-btn">Austin irony</button>
</div>Receipt component compact version with no padding around and smaller text.
Product
Qty
Price
Omeprazole Capsules, 20mg, 28 capsule
100
€ 443,45
Omeprazole Capsules, 20mg, 28 capsule
100
€ 443,45
<!-- Receipt (mods: --compact) -->
<div class="vi-receipt vi-receipt--compact">
<div class="vi-receipt__header">
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Product</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>Qty</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>Price</p>
</div>
</div>
</div>
<div class="vi-receipt__body">
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Omeprazole Capsules, 20mg, 28 capsule</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>100</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Omeprazole Capsules, 20mg, 28 capsule</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>100</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
</div>
<div class="vi-receipt__footer">
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
10% OFF
</span>
Total discount
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="vi-receipt__discounted">€ 123,45</p>
</div>
</div>
<div class="vi-receipt__row vi-receipt__final-price-row">
<div class="vi-receipt__column vi-receipt__name-column">
<p class="font-weight-bold">Product</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="font-weight-bold">€ 41144.40</p>
</div>
</div>
</div>
<!-- Button type: solid -->
<button type="button" class="mt-30 vi-btn-solid vi-btn">Austin irony</button>
</div>Greyed out receipt
Total list price
€ 123,45
21% OFF Total discount
€ -220,00
10% OFF Total discount
€ -220,00
Total discount
€ 36,00 remaining
€ 123,45
<!-- Receipt (mods: --greyed-out) -->
<div class="vi-receipt vi-receipt--greyed-out">
<div class="vi-receipt__body">
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Total list price</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 123,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
21% OFF
</span>
Total discount
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="vi-receipt__discounted">€ -220,00</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
10% OFF
</span>
Total discount
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="vi-receipt__discounted">€ -220,00</p>
</div>
</div>
<div class="vi-receipt__row vi-form">
<div class="form-group">
<div class="custom-switch custom-control">
<input class="custom-control-input" disabled id="sg-d095c4" type="checkbox">
<label class="custom-control-label" for="sg-d095c4">
Use my vouchers
</label>
</div>
</div>
</div>
<div class="vi-receipt__row vi-receipt__voucher-row d-none">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Total discount</p>
<p class="tiny">
€ 36,00 remaining
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="vi-receipt__discounted">€ 123,45</p>
</div>
</div>
</div>
<div class="vi-receipt__footer">
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
10% OFF
</span>
Total discount
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="vi-receipt__discounted">€ 123,45</p>
</div>
</div>
<div class="vi-receipt__row vi-receipt__final-price-row">
<div class="vi-receipt__column vi-receipt__name-column">
<p class="font-weight-bold">Product</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="font-weight-bold">€ 41144.40</p>
</div>
</div>
</div>
<!-- Button type: solid -->
<button disabled type="button" class="mt-30 vi-btn-solid vi-btn-solid--lg vi-btn">Austin irony</button>
</div>Receipt component in side panel with scrollpane
<!-- Button type: solid -->
<button data-toggle="modal" data-target="#sg-ed86a6" type="button" class="vi-btn-solid vi-btn">Launch side panel</button>
<!-- Modal -->
<div class="modal vi-side-panel vi-side-panel--fit modal-with-receipt vi-modal" id="sg-ed86a6" role="dialog" tabindex="-1">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<!-- Modal Layout (mods: --compact) -->
<div class="vi-modal-layout pr-10 vi-modal-layout--compact">
<div class="vi-modal-layout__body">
<div class="vi-modal-layout__section pr-20 vi-modal-layout__section--header-close">
<div class="vi-modal-layout__header vi-type-system vi-typesystem--collapse-last vi-typesystem">
<h4>Your Cart</h4>
</div>
<div class="vi-modal-layout__close">
<!-- Button type: close -->
<button aria-label="Message dialog - click to close or navigate to the message content" data-dismiss="modal" type="button" class="vi-btn-close vi-btn-close--accent-1 vi-btn"><span class="vi-btn-close__label vi-btn__label">Close</span></button>
</div>
</div>
<div class="vi-modal-layout__section overflow-hidden">
<!-- Receipt (mods: --compact, --in-modal) -->
<div class="vi-receipt vi-receipt--compact vi-receipt--in-modal">
<div class="vi-receipt__header">
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Product</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>Qty</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>Price</p>
</div>
</div>
</div>
<div class="vi-scrollpane vi-scrollpane--accent-1">
<div class="vi-scrollpane__bar vi-scrollpane__bar--accent-1">
<div class="vi-receipt__body">
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Omeprazole Capsules, 20mg, 28 capsule</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>100</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
21% OFF
</span>
Acitretin Capsules, USP, 0 Capsules/BottleNDC 00093‐1135‐56
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>
100
</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Omeprazole Capsules, 20mg, 28 capsule</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>100</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
21% OFF
</span>
Acitretin Capsules, USP, 0 Capsules/BottleNDC 00093‐1135‐56
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>
100
</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Omeprazole Capsules, 20mg, 28 capsule</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>100</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
21% OFF
</span>
Acitretin Capsules, USP, 0 Capsules/BottleNDC 00093‐1135‐56
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>
100
</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Omeprazole Capsules, 20mg, 28 capsule</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>100</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
21% OFF
</span>
Acitretin Capsules, USP, 0 Capsules/BottleNDC 00093‐1135‐56
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>
100
</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Omeprazole Capsules, 20mg, 28 capsule</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>100</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
21% OFF
</span>
Acitretin Capsules, USP, 0 Capsules/BottleNDC 00093‐1135‐56
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>
100
</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Omeprazole Capsules, 20mg, 28 capsule</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>100</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
21% OFF
</span>
Acitretin Capsules, USP, 0 Capsules/BottleNDC 00093‐1135‐56
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>
100
</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Omeprazole Capsules, 20mg, 28 capsule</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>100</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
21% OFF
</span>
Acitretin Capsules, USP, 0 Capsules/BottleNDC 00093‐1135‐56
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>
100
</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Omeprazole Capsules, 20mg, 28 capsule</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>100</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
21% OFF
</span>
Acitretin Capsules, USP, 0 Capsules/BottleNDC 00093‐1135‐56
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>
100
</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Omeprazole Capsules, 20mg, 28 capsule</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>100</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
21% OFF
</span>
Acitretin Capsules, USP, 0 Capsules/BottleNDC 00093‐1135‐56
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>
100
</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Omeprazole Capsules, 20mg, 28 capsule</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>100</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
21% OFF
</span>
Acitretin Capsules, USP, 0 Capsules/BottleNDC 00093‐1135‐56
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>
100
</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Omeprazole Capsules, 20mg, 28 capsule</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>100</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
21% OFF
</span>
Acitretin Capsules, USP, 0 Capsules/BottleNDC 00093‐1135‐56
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>
100
</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Omeprazole Capsules, 20mg, 28 capsule</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>100</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
21% OFF
</span>
Acitretin Capsules, USP, 0 Capsules/BottleNDC 00093‐1135‐56
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>
100
</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Omeprazole Capsules, 20mg, 28 capsule</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>100</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
21% OFF
</span>
Acitretin Capsules, USP, 0 Capsules/BottleNDC 00093‐1135‐56
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>
100
</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Omeprazole Capsules, 20mg, 28 capsule</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>100</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
21% OFF
</span>
Acitretin Capsules, USP, 0 Capsules/BottleNDC 00093‐1135‐56
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>
100
</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Omeprazole Capsules, 20mg, 28 capsule</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>100</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
21% OFF
</span>
Acitretin Capsules, USP, 0 Capsules/BottleNDC 00093‐1135‐56
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>
100
</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Omeprazole Capsules, 20mg, 28 capsule</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>100</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
21% OFF
</span>
Acitretin Capsules, USP, 0 Capsules/BottleNDC 00093‐1135‐56
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>
100
</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Omeprazole Capsules, 20mg, 28 capsule</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>100</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
21% OFF
</span>
Acitretin Capsules, USP, 0 Capsules/BottleNDC 00093‐1135‐56
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>
100
</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Omeprazole Capsules, 20mg, 28 capsule</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>100</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
21% OFF
</span>
Acitretin Capsules, USP, 0 Capsules/BottleNDC 00093‐1135‐56
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>
100
</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Omeprazole Capsules, 20mg, 28 capsule</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>100</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
21% OFF
</span>
Acitretin Capsules, USP, 0 Capsules/BottleNDC 00093‐1135‐56
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>
100
</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Omeprazole Capsules, 20mg, 28 capsule</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>100</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
21% OFF
</span>
Acitretin Capsules, USP, 0 Capsules/BottleNDC 00093‐1135‐56
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>
100
</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
</div>
</div>
</div>
<div class="vi-receipt__footer">
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
10% OFF
</span>
Total discount
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="vi-receipt__discounted">€ 123,45</p>
</div>
</div>
<div class="vi-receipt__row vi-receipt__final-price-row">
<div class="vi-receipt__column vi-receipt__name-column">
<p class="font-weight-bold">Product</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="font-weight-bold">€ 41144.40</p>
</div>
</div>
</div>
<!-- Button type: solid -->
<button type="button" class="mt-30 vi-btn-solid vi-btn">Austin irony</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Same, but with just a few items
<!-- Button type: solid -->
<button data-toggle="modal" data-target="#sg-8acae3" type="button" class="vi-btn-solid vi-btn">Launch side panel</button>
<!-- Modal -->
<div class="modal vi-side-panel vi-side-panel--fit modal-with-receipt vi-modal" id="sg-8acae3" role="dialog" tabindex="-1">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<!-- Modal Layout (mods: --compact) -->
<div class="vi-modal-layout pr-10 vi-modal-layout--compact">
<div class="vi-modal-layout__body">
<div class="vi-modal-layout__section pr-20 vi-modal-layout__section--header-close">
<div class="vi-modal-layout__header vi-type-system vi-typesystem--collapse-last vi-typesystem">
<h4>Your Cart</h4>
</div>
<div class="vi-modal-layout__close">
<!-- Button type: close -->
<button aria-label="Message dialog - click to close or navigate to the message content" data-dismiss="modal" type="button" class="vi-btn-close vi-btn-close--accent-1 vi-btn"><span class="vi-btn-close__label vi-btn__label">Close</span></button>
</div>
</div>
<div class="vi-modal-layout__section overflow-hidden">
<!-- Receipt (mods: --compact, --in-modal) -->
<div class="vi-receipt vi-receipt--compact vi-receipt--in-modal">
<div class="vi-receipt__header">
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Product</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>Qty</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>Price</p>
</div>
</div>
</div>
<div class="vi-scrollpane vi-scrollpane--accent-1">
<div class="vi-scrollpane__bar vi-scrollpane__bar--accent-1">
<div class="vi-receipt__body">
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Omeprazole Capsules, 20mg, 28 capsule</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>100</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
21% OFF
</span>
Acitretin Capsules, USP, 0 Capsules/BottleNDC 00093‐1135‐56
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>
100
</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>Omeprazole Capsules, 20mg, 28 capsule</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>100</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
21% OFF
</span>
Acitretin Capsules, USP, 0 Capsules/BottleNDC 00093‐1135‐56
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column">
<p>
100
</p>
</div>
<div class="vi-receipt__column vi-receipt__price-column">
<p>€ 443,45</p>
</div>
</div>
</div>
</div>
</div>
<div class="vi-receipt__footer">
<div class="vi-receipt__row">
<div class="vi-receipt__column vi-receipt__name-column">
<p>
<span class="vi-badge vi-badge--promo vi-badge--promo-2">
10% OFF
</span>
Total discount
</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="vi-receipt__discounted">€ 123,45</p>
</div>
</div>
<div class="vi-receipt__row vi-receipt__final-price-row">
<div class="vi-receipt__column vi-receipt__name-column">
<p class="font-weight-bold">Product</p>
</div>
<div class="vi-receipt__column vi-receipt__middle-column"></div>
<div class="vi-receipt__column vi-receipt__price-column">
<p class="font-weight-bold">€ 41144.40</p>
</div>
</div>
</div>
<!-- Button type: solid -->
<button type="button" class="mt-30 vi-btn-solid vi-btn">Austin irony</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Stylesheets #
The following stylesheets are required to display this component.
JavaScript #
The following javascripts are required to display this component.
The following additional javascripts are used to display the example(s).
Usage documentation #
Usage documentation can be found here.
Changelog #
Changelog
Fix
- 17 Nov 2023 - Added check if receipt is not in side panel that fixes calculations.
- 11 Sep 2023 - Scrollpane disapears in modal after multiple opens
- 31 Aug 2023 - Added null checks for when opening modal and something in receipt is missing.
- 11 Aug 2023 - Removed commented receipt footer to show the bottom line after the discounts.
- 04 Jul 2023 - Changed line-height of compact to new value. Updated badge tweaks to be centered to this value.
- 04 Jul 2023 - Modifier
--in-modal for when used inside a modal.
- 04 Jul 2023 - Fix missing js.
- 03 Jul 2023 - Tweak styling of the receipt component.
- 19 Jun 2023 - Add missing dependency to docs and set default.
- 07 Jun 2023 - More generic modal selector in js.
Added
- Initial draft