Get more with Main*

Enjoy Main class offerings, such as:

• Expanded seat selection
• Earlier boarding and overhead bin access
• Flight changes and cancellations

# 🏠 Properties

# 🎰 Slots

            
Show  Code
            
<script src="/components/shared/component-base.js"></script>
<script src="/components/saver-to-main-single-upsell/main.js"></script>
<link rel="stylesheet" href="/components/shared/component-base.css" />
<saver-to-main-single-upsell price="60" upgradeLink="/" roundtrip></saver-to-main-single-upsell>

<br />

<saver-to-main-single-upsell price="60" upgradeLink="/" warningStrokeIcon='' accordion roundtrip>
    <style>
        .message-list {
            margin: 0px;
            font-weight: 300;
            font-family: 'ASCircular-Book';
            font-size: 24px;
            padding-left: 1.6rem;
            list-style-type: disc;
        }

        .message-list span {
            font-size: 16px;
        }

        .border-bottom {
            border-bottom: solid 1px rgba(0, 0, 0, 15%);
        }

        .message-list li {
            line-height: 1;
            padding: 4px;
        }

        .message-list li:last-child {
            padding: 4px 0px 0px 4px!important;
        }


    </style>
    <span slot="title-icon"></span>
    <span slot="title">Continue with Saver?</span>
    <p slot="paragraph-content">
        You can still upgrade now if you're having second thoughts. (But no fare upgrades allowed after purchase.)
    </p>
    <div slot="content">
        <ul class="message-list">
            <li>
                <span>Last to board/last to access overhead bins</span>
            </li>
            <li>
                <span>Limited/no seat selection</span>
            </li>
            <li style="display: none;">
                <span>No ticket changes beyond the first 24 hours after booking</span>
            </li>
        </ul>
    </div>
    <div slot="content-footer" class="border-bottom">
        <auro-hyperlink href="/">See what you get with Main</auro-hyperlink>
    </div>
</saver-to-main-single-upsell>

<br />

<saver-to-main-single-upsell price="60" upgradeLink="/" warningStrokeIcon='' accordion roundtrip bakedImage>
    <style>
        .message-list {
            margin: 0px;
            font-weight: 300;
            font-family: 'ASCircular-Book';
            font-size: 24px;
            padding-left: 1.6rem;
            list-style-type: disc;
        }

        .message-list span {
            font-size: 16px;
        }

        .border-bottom {
            border-bottom: solid 1px rgba(0, 0, 0, 15%);
        }

        .message-list li {
            line-height: 1;
            padding: 4px;
        }

        .message-list li:last-child {
            padding: 4px 0px 0px 4px!important;
        }


    </style>
    <span slot="title-icon"></span>
    <span slot="title">Continue with Saver?</span>
    <p slot="paragraph-content">
        You can still upgrade now if you're having second thoughts. (But no fare upgrades allowed after purchase.)
    </p>
    <div slot="content">
        <ul class="message-list">
            <li>
                <span>Last to board/last to access overhead bins</span>
            </li>
            <li>
                <span>Limited/no seat selection</span>
            </li>
            <li style="display: none;">
                <span>No ticket changes beyond the first 24 hours after booking</span>
            </li>
        </ul>
    </div>
    <div slot="content-footer" class="border-bottom">
        <auro-hyperlink href="/">See what you get with Main</auro-hyperlink>
    </div>
</saver-to-main-single-upsell>

<br />

<!-- Heavily customized example upsell -->
<saver-to-main-single-upsell price="60" upgradeLink="/">
    <style>
        .message-list {
            margin: 0px;
            font-weight: 300;
            font-family: 'ASCircular-Book';
            font-size: 24px;
            padding-left: 1.6rem;
            list-style-type: disc;
        }

        .message-list span {
            font-size: 16px;
        }

        .border-bottom {
            border-bottom: solid 1px rgba(0, 0, 0, 15%);
        }

        .message-list li {
            line-height: 1;
            padding: 4px;
        }

        .message-list li:last-child {
            padding: 4px 0px 0px 0px;
        }

        saver-to-main-single-upsell auro-hyperlink {
            color: rgb(0, 116, 200);
            padding: 12px 0px 16px 0px;
            display: block;
        }
    </style>
    <span slot="title-icon"></span>
    <span slot="title">Saver has restrictions</span>
    <div class="border-bottom" slot="content">
        <ul class="message-list">
            <li>
                <span>Last to board/last to access overhead bins</span>
            </li>
            <li>
                <span>Limited/no seat selection</span>
            </li>
            <li style="display: none;">
                <span>No ticket changes beyond the first 24 hours after booking</span>
            </li>
            <li>
                <span>No fare upgrades allowed after purchase</span>
            </li>
        </ul>
        <auro-hyperlink href="/">Want more choices?</auro-hyperlink>
    </div>
</saver-to-main-single-upsell>

<br />

<saver-to-main-single-upsell price="60" upgradeLink="/">
    <span slot="title-icon">
        <svg width="26" height="26">
            <circle cx="16" cy="16" r="8" stroke="green" stroke-width="4" fill="yellow" />
        </svg>
    </span>
    <span slot="title">Get more with Main*</span>
    <img slot="image"
        src="https://images.pexels.com/photos/12829/pexels-photo-12829.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
        width="300" />
    <style>
        .message-list {
            margin: 0px;
            font-weight: 300;
            font-family: 'ASCircular-Book';
            font-size: 24px;
            padding-left: 1.6rem;
            list-style-type: disc;
        }

        .message-list span {
            font-size: 16px;
        }
    </style>
    <div slot="content">
        Enjoy Main class offerings, such as:
        <ul class="message-list">
            <li>
                <span>Expanded seat selection</span>
            </li>
            <li>
                <span>Earlier boarding and overhead bin access</span>
            </li>
            <li>
                <span>Flight changes and cancellations</span>
            </li>
        </ul>
    </div>
</saver-to-main-single-upsell>