Vehicle Panels

Dependencies

Uses: Components:
Utilities:
Flex Utilities
Extends:
Collapse Object
Vehicle Panels

Vehicle section panels which progressively disclose content allowing users to pick what information is important to them.
How to Finance Your Car

Finance Table
<section class="c-vehicle-panels | o-section o-collapse">
    <div class="o-wrapper">
        <section class="c-vehicle__panel" id="vehicle_finance">
            <div class="c-vehicle-panels__title c-sub-header u-flex u-flex-row u-flex-no-wrap">
                <span class="c-sub-header__heading | u-mr-auto">
                    <h2 class="u-heading u-beta">How to Finance Your Car</h2>
                </span>
            </div>
            <div class="c-vehicle-panels__content | o-collapse__panel">
                <div class="u-mb-lg">
                    <div class="u-p u-flex u-align-middle u-justify-center u-bg-purple-50 u-radius-lg" style="height: 400px;"><span class="u-flex u-tc-purple-600 u-fw-500">Finance Table</span></div>
                </div>
            </div>
        </section>

        <section class="c-vehicle__panel | o-collapse__section" id="vehicle_offers" x-data="{open: false}">
            <button class="c-vehicle-panels__title c-sub-header | o-collapse__title u-flex u-flex-row u-flex-no-wrap" id="vehicle_offers_btn" type="button" aria-controls="vehicle_offers_panel"
                @click="open = ! open"
                :aria-expanded="open"
                :class="open ? 'is-active' : 'is-inactive'"
            >
                <span class="c-sub-header__heading | u-mr-auto">
                    <h2 class="u-heading u-beta">Related Offers and Services</h2>
                </span>
                <span class="c-sub-header__right | u-ml-sm">
                    <svg class="c-icon c-icon--md c-icon--lg-@bp3" viewBox="0 0 16 16" aria-hidden="true" width="16" height="16">
                        <g fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10">
                            <path d="M2 2l12 12"></path>
                            <path d="M14 2L2 14"></path>
                        </g>
                    </svg>
                </span>
            </button>
            <div class="c-vehicle-panels__content | o-collapse__panel" id="vehicle_offers_panel" role="region" aria-labelledby="vehicle_offers_btn" style="display: none;"
                    x-show="open" x-collapse
            >
                <div class="o-collapse__content | u-mb-lg" :class="open ? 'is-active' : 'is-inactive'">
                    <div class="u-p u-flex u-align-middle u-justify-center u-bg-red-50 u-radius-lg" style="height: 400px;"><span class="u-flex u-tc-red-600 u-fw-500">Offers Cards</span></div>
                </div>
            </div>
        </section>

        <section class="c-vehicle__panel | o-collapse__section" id="vehicle_accessories" x-data="{open: false}">
            <button class="c-vehicle-panels__title c-sub-header | o-collapse__title u-flex u-flex-row u-flex-no-wrap" id="vehicle_accessories_btn" type="button" aria-controls="vehicle_accessories_panel"
                @click="open = ! open"
                :aria-expanded="open"
                :class="open ? 'is-active' : 'is-inactive'"
            >
                <span class="c-sub-header__heading | u-mr-auto">
                    <h2 class="u-heading u-beta">Accessories and Options</h2>
                </span>
                <span class="c-sub-header__right | u-ml-sm">
                    <svg class="c-icon c-icon--md c-icon--lg-@bp3" viewBox="0 0 16 16" aria-hidden="true">
                        <g fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10">
                            <path d="M2 2l12 12"></path>
                            <path d="M14 2L2 14"></path>
                        </g>
                    </svg>
                </span>
            </button>
            <div class="c-vehicle-panels__content | o-collapse__panel" id="vehicle_accessories_panel" role="region" aria-labelledby="vehicle_accessories_btn" style="display: none;"
                    x-show="open" x-collapse
            >
                <div class="o-collapse__content | u-mb-lg" :class="open ? 'is-active' : 'is-inactive'">
                    <div class="u-p u-flex u-align-middle u-justify-center u-bg-orange-50 u-radius-lg" style="height: 400px;"><span class="u-flex u-tc-orange-600 u-fw-500">Vehicle Accessories Lists</span></div>
                </div>
            </div>
        </section>

        <section class="c-vehicle__panel | o-collapse__section" id="vehicle_specifications" x-data="{open: false}">
            <button class="c-vehicle-panels__title c-sub-header | o-collapse__title u-flex u-flex-row u-flex-no-wrap" id="vehicle_specifications_btn" type="button" aria-controls="vehicle_specifications_panel"
                @click="open = ! open"
                :aria-expanded="open"
                :class="open ? 'is-active' : 'is-inactive'"
            >
                <span class="c-sub-header__heading | u-mr-auto">
                    <h2 class="u-heading u-beta">Technical Specifications</h2>
                </span>
                <span class="c-sub-header__right | u-ml-sm">
                    <svg class="c-icon c-icon--md c-icon--lg-@bp3" viewBox="0 0 16 16" aria-hidden="true" width="24" height="24">
                        <g fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10">
                            <path d="M2 2l12 12"></path>
                            <path d="M14 2L2 14"></path>
                        </g>
                    </svg>
                </span>
            </button>
            <div class="c-vehicle-panels__content | o-collapse__panel" id="vehicle_specifications_panel" role="region" aria-labelledby="vehicle_specifications_btn" style="display: none;"
                    x-show="open" x-collapse
            >
                <div class="o-collapse__content | u-mb-lg" :class="open ? 'is-active' : 'is-inactive'">
                    <div class="u-p u-flex u-align-middle u-justify-center u-bg-yellow-50 u-radius-lg" style="height: 400px;"><span class="u-flex u-tc-yellow-600 u-fw-500">Vehicle Specifications Lists</span></div>
                </div>
            </div>
        </section>

        <section class="c-vehicle__panel | o-collapse__section" id="vehicle_costs" x-data="{open: false}">
            <button class="c-vehicle-panels__title c-sub-header | o-collapse__title u-flex u-flex-row u-flex-no-wrap" id="vehicle_costs_btn" type="button" aria-controls="vehicle_costs_panel"
                @click="open = ! open"
                :aria-expanded="open"
                :class="open ? 'is-active' : 'is-inactive'"
            >
                <span class="c-sub-header__heading | u-mr-auto">
                    <h2 class="u-heading u-beta">Accessories and Options</h2>
                </span>
                <span class="c-sub-header__right | u-ml-sm">
                    <svg class="c-icon c-icon--md c-icon--lg-@bp3" viewBox="0 0 16 16" aria-hidden="true" width="24" height="24">
                        <g fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10">
                            <path d="M2 2l12 12"></path>
                            <path d="M14 2L2 14"></path>
                        </g>
                    </svg>
                </span>
            </button>

            <div class="c-vehicle-panels__content | o-collapse__panel" id="vehicle_costs_panel" role="region" aria-labelledby="vehicle_costs_btn" style="display: none;"
                    x-show="open" x-collapse
            >
                <div class="o-collapse__content | u-mb-lg" :class="open ? 'is-active' : 'is-inactive'">
                    <div class="u-p u-flex u-align-middle u-justify-center u-bg-green-50 u-radius-lg" style="height: 400px;"><span class="u-flex u-tc-green-600 u-fw-500">Running Costs Calculator</span></div>
                </div>
            </div>
        </section>

        <section class="c-vehicle__panel | o-collapse__section" id="vehicle_approved" x-data="{open: false}">
            <button class="c-vehicle-panels__title c-sub-header | o-collapse__title u-flex u-flex-row u-flex-no-wrap" id="vehicle_approved_btn" type="button" aria-controls="vehicle_approved_panel"
                @click="open = ! open"
                :aria-expanded="open"
                :class="open ? 'is-active' : 'is-inactive'"
            >
                <span class="c-sub-header__heading | u-mr-auto">
                    <h2 class="u-heading u-beta">BMW Approved Used</h2>
                </span>
                <span class="c-sub-header__right | u-ml-sm">
                    <svg class="c-icon c-icon--md c-icon--lg-@bp3" viewBox="0 0 16 16" aria-hidden="true" width="24" height="24">
                        <g fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10">
                            <path d="M2 2l12 12"></path>
                            <path d="M14 2L2 14"></path>
                        </g>
                    </svg>
                </span>
            </button>
            <div class="c-vehicle-panels__content | o-collapse__panel" id="vehicle_approved_panel" role="region" aria-labelledby="vehicle_approved_btn" style="display: none;"
                    x-show="open" x-collapse
            >
                <div class="o-collapse__content | u-mb-lg" :class="open ? 'is-active' : 'is-inactive'">
                    <div class="u-p u-flex u-align-middle u-justify-center u-bg-teal-50 u-radius-lg" style="height: 400px;"><span class="u-flex u-tc-teal-600 u-fw-500">Approved Used Information</span></div>
                </div>
            </div>
        </section>
    </div>
</section>