merchandising/fare-upsell
Main to First
Unparalleled relaxation
First class seats and service.
Upgrade to First Class
Saver to Main
Upgrade to Main
Microsite
Upgrade to Main
#
🏠 Properties
#
🎰 Slots
Show Code
<script src="/components/shared/component-base.js"></script>
<script src="/components/fare-upsell/main.js"></script>
<link rel="stylesheet" href="/components/shared/component-base.css" />
<style>
.container {
display: grid;
max-width: 934px;
row-gap: 1rem;
margin-left: 0;
}
h1 {
font-size: 2rem;
}
</style>
<div class="container">
<h1>Main to First</h1>
<fare-upsell first price="180" totalPrice="180" upgradeLink="#"></fare-upsell>
<fare-upsell first price="280" totalPrice="560" upgradeLink="#" roundTrip luggage meal></fare-upsell>
<fare-upsell first departures="IAH|LAX|LAX|IAH" loungeAd price="280" totalPrice="560" upgradeLink="#" roundTrip boarding ></fare-upsell>
<fare-upsell first departures="LAX|IAH|IAH|DFW" price="280" totalPrice="560" upgradeLink="#" roundTrip luggage></fare-upsell>
<fare-upsell first departures="LAX|IAH|IAH|DFW" price="400" totalPrice="800" upgradeLink="#" luggage boarding meal>
<span slot="upsell-title">Unparalleled relaxation</span>
<span slot="sub-title">First class seats and service.</span>
<span slot="upgrade-cta">Upgrade to First Class</span>
</fare-upsell>
<h1>Saver to Main</h1>
<fare-upsell main price="-1" totalPrice="20" upgradeLink="#"></fare-upsell>
<fare-upsell main price="60" totalPrice="120" upgradeLink="#" roundTrip>
<span slot="upgrade-cta">Upgrade to Main</span>
</fare-upsell>
<h1>Microsite</h1>
<fare-upsell microsite first price="180" totalPrice="180" upgradeLink="#"></fare-upsell>
<fare-upsell microsite main price="60" totalPrice="120" upgradeLink="#" roundTrip>
<span slot="upgrade-cta">Upgrade to Main</span>
</fare-upsell>
</div>