Dependencies
This layout uses the following components as "atoms" to create the full UI.
Uses: Layouts: Components: Objects:Accessories and Options
A grid layout view for accessories and options.
Key Features
- Touch Screen Media Centre
- M Carbon Bucket Seats
- Harmon Kardon Loudspeaker System
- 3x USB Connections
Driver Convenience
- BMW Teleservices
- BMW Emergency Call
- BMW Online Services
- High Beam Assistant
- Live Cockpit Professional
- Gesture Control
Passive Safety
- M Sport Seat Belts
- Active Pedestrian Safety
Security
- Alarm System
Interior Features
- Acoustic Glass
- Anthracite Healining
- Carbon Fibre Interior Trim
- Electric Memory Seats
- M Carbon Bucket Seats
Wheels
- Tyre Repair Kit
- M Brakes with Red Calipers
Trim
- Galvanic Controls
Exterior Features
- Auto Dimming Drivers Door Mirror
- Auto Dimming Rear View Mirror
- Sun Protection Glass
- Ext. Mirrors - folding with anti-dazzle
- Rear-view Mirror with Auto Dimming
Entertainment
- Harmon Kardon Loudspeaker System
- M Drivers Pack
- Connected Package Pro
Packs
- Ultimate Pack
- M Drivers Pack
- Connected Package Pro
<section class="c-vehicle-panels | o-section o-collapse">
<div class="o-wrapper">
<div 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="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" :class="open ? 'is-active' : 'is-inactive'">
<div class="o-grid | u-gap-xl u-justify-between">
<div class="o-grid__item | u-col-4-@bp4 u-col-3-@bp5">
<strong class="u-tc-headings | u-block u-mb-sm">Key Features</strong>
<ul class="o-grid">
<li class="o-grid__item | u-col-12 u-col-6-@bp2 u-col-12-@bp4">
<div class="c-card | u-p-sm u-p-@bp3 u-flex">
<div class="o-media | u-align-middle">
<div class="o-media__img | u-flex u-align-middle u-flex-fixed">
<svg class="c-icon c-icon--lg c-icon--xl-@bp3" viewbox="0 0 48 48" aria-hidden="true" width="48" height="48">
<g fill="none" fill-rule="evenodd">
<path fill="#00377C" d="M33.375 0a3.75 3.75 0 0 1 3.75 3.75v23.203l-1.875-.289V3.75c0-1.036-.84-1.875-1.875-1.875H7.125c-1.036 0-1.875.84-1.875 1.875v37.5c0 1.036.84 1.875 1.875 1.875h14.668c.013.027.025.054.039.08l.482.964a1 1 0 0 0 .596.508l1.034.323H7.125a3.75 3.75 0 0 1-3.75-3.75V3.75A3.75 3.75 0 0 1 7.125 0h26.25Zm-11.8 38.05a1.875 1.875 0 1 1-2.65 2.65 1.875 1.875 0 0 1 2.65-2.65ZM33.1 4.024a.938.938 0 1 1-1.325 1.325.938.938 0 0 1 1.325-1.325Z"/>
<path fill="#256EFF" fill-rule="nonzero" d="M24.393 18.74c1.137 0 2.177.643 2.686 1.66l3.781 7.564a3.8 3.8 0 0 1 3.544-1.404l.016.003 6.89 1.06a3.593 3.593 0 0 1 2.667 1.944l3.456 6.913a5.553 5.553 0 0 1-2.483 7.45l-6.093 3.047a9.338 9.338 0 0 1-6.961.56l-9.156-2.86a1 1 0 0 1-.596-.508l-.482-.964a2.573 2.573 0 0 1 2.301-3.723h5.404c.22 0 .363-.232.265-.43l-7.925-15.848a3.003 3.003 0 0 1-.317-1.343v-.117a3.003 3.003 0 0 1 3.003-3.003Zm.002 2c-.553 0-1.003.45-1.003 1.004v.117c0 .155.037.309.106.448l7.925 15.85c.763 1.526-.347 3.323-2.054 3.323h-5.403a.573.573 0 0 0-.513.829l.292.584 8.75 2.734a7.338 7.338 0 0 0 5.47-.44l6.093-3.047a3.553 3.553 0 0 0 1.589-4.767L42.19 30.46a1.593 1.593 0 0 0-1.182-.862l-6.876-1.057a1.8 1.8 0 0 0-1.897.972l-.522 1.044a1 1 0 0 1-1.789 0l-4.632-9.263a1.003 1.003 0 0 0-.897-.554Zm7.536-10.086c.863.325.863 1.546 0 1.871l-5.007 1.889a1 1 0 0 1-1.352-.991l.1-1.785a13.86 13.86 0 0 0-7.342 2.501 13.843 13.843 0 0 0-4.319 4.888 1 1 0 0 1-1.769-.934 15.843 15.843 0 0 1 4.941-5.592 15.885 15.885 0 0 1 14.748-1.847Z"/>
</g>
</svg>
</div>
<div class="o-media__content">
<strong>Touch Screen Media Centre</strong>
</div>
</div>
</div>
</li>
<li class="o-grid__item | u-col-12 u-col-6-@bp2 u-col-12-@bp4">
<div class="c-card | u-p-sm u-p-@bp3 u-flex">
<div class="o-media | u-align-middle">
<div class="o-media__img | u-flex u-align-middle u-flex-fixed">
<svg class="c-icon c-icon--lg c-icon--xl-@bp3" viewbox="0 0 48 48" aria-hidden="true" width="48" height="48">
<g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path stroke="#256EFF" d="m31.913 37.391 1.754-3.453a10.652 10.652 0 0 0 1.116-4.73 10.55 10.55 0 0 0-.544-3.346l-2.156-6.468c-.204-.614-.7-1.087-1.295-1.237-1.546-.388-3.936-.853-6.527-.853s-4.98.465-6.53.853c-.592.15-1.089.623-1.292 1.235l-2.156 6.47a10.566 10.566 0 0 0-.544 3.346c0 1.633.387 3.27 1.117 4.734l1.753 3.45"/>
<path stroke="#00377C" d="M20.435 13.478V9.652m7.652 3.826V9.652M17.565 4.87v3.826c0 .528.428.956.957.956H30a.957.957 0 0 0 .957-.956V4.87A2.87 2.87 0 0 0 28.087 2h-7.652a2.87 2.87 0 0 0-2.87 2.87Zm19.97 29.74a14.389 14.389 0 0 0 1.074-5.402c0-1.549-.25-3.087-.74-4.556l-2.155-6.467c-.614-1.841-2.11-3.265-3.992-3.738-1.917-.482-4.567-.969-7.461-.969s-5.545.487-7.461.969c-1.882.473-3.378 1.897-3.992 3.738l-2.156 6.467a14.407 14.407 0 0 0-.739 4.556c0 1.857.38 3.686 1.074 5.401"/>
<path stroke="#00377C" d="M11.514 46h25.633c.896 0 1.715-.506 2.115-1.307h0c.829-1.657 1.26-5.396 1.26-7.248v-.559a2.365 2.365 0 0 0-2.365-2.364h0c-.896 0-1.714.506-2.115 1.307l-1.26 2.519S30 36.435 24.262 36.435c-5.74 0-10.522 1.913-10.522 1.913l-1.26-2.52a2.365 2.365 0 0 0-2.114-1.306h0A2.365 2.365 0 0 0 8 36.886h0c0 1.598.305 5.093.898 6.576l.42 1.052A2.365 2.365 0 0 0 11.514 46Z"/>
<path stroke="#00377C" d="M14.696 41.217s2.87.957 9.565.957c6.696 0 9.565-.957 9.565-.957"/>
</g>
</svg>
</div>
<div class="o-media__content">
<strong>M Carbon Bucket Seats</strong>
</div>
</div>
</div>
</li>
<li class="o-grid__item | u-col-12 u-col-6-@bp2 u-col-12-@bp4">
<div class="c-card | u-p-sm u-p-@bp3 u-flex">
<div class="o-media | u-align-middle">
<div class="o-media__img | u-flex u-align-middle u-flex-fixed">
<svg class="c-icon c-icon--lg c-icon--xl-@bp3" viewbox="0 0 48 48" aria-hidden="true" width="48" height="48">
<g fill="none" fill-rule="evenodd">
<path stroke="#00377C" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m39.867 13.561 2.009-2.008a3.839 3.839 0 1 0-5.429-5.429L34.44 8.133A18.9 18.9 0 0 0 24 5a18.9 18.9 0 0 0-10.439 3.133l-2.008-2.009a3.838 3.838 0 0 0-5.429 5.429l2.009 2.008A18.9 18.9 0 0 0 5 24a18.9 18.9 0 0 0 3.133 10.439l-2.009 2.008a3.839 3.839 0 1 0 5.429 5.429l2.008-2.009A18.9 18.9 0 0 0 24 43a18.9 18.9 0 0 0 10.439-3.133l2.008 2.009a3.839 3.839 0 1 0 5.429-5.429l-2.009-2.008A18.9 18.9 0 0 0 43 24a18.9 18.9 0 0 0-3.133-10.439Z"/>
<circle cx="24" cy="24" r="15.381" stroke="#00377C" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<circle cx="24" cy="24" r="6.333" stroke="#256EFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<circle cx="8.619" cy="8.619" r="1" stroke="#256EFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<circle cx="39.381" cy="8.619" r="1" stroke="#256EFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<circle cx="8.619" cy="39.381" r="1" stroke="#256EFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<circle cx="39.381" cy="39.381" r="1" stroke="#256EFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
</svg>
</div>
<div class="o-media__content">
<strong>Harmon Kardon Loudspeaker System</strong>
</div>
</div>
</div>
</li>
<li class="o-grid__item | u-col-12 u-col-6-@bp2 u-col-12-@bp4">
<div class="c-card | u-p-sm u-p-@bp3 u-flex">
<div class="o-media | u-align-middle">
<div class="o-media__img | u-flex u-align-middle u-flex-fixed">
<svg class="c-icon c-icon--lg c-icon--xl-@bp3" viewbox="0 0 48 48" aria-hidden="true" width="48" height="48">
<g fill="none" fill-rule="evenodd">
<path stroke="#00377C" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.829 27.171A9.657 9.657 0 0 0 3 34.001h0C3 39.522 7.477 44 13 44h0a9.657 9.657 0 0 0 6.829-2.829L37 24 23 10 5.829 27.171Z"/>
<path stroke="#00377C" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m24 11 9-9 12 12-9 9z"/>
<path stroke="#00377C" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m33 8 1 1-3 3-1-1s3-3.125 3-3Zm5.002 5.002 1 1-3 3-1-1s3-3.125 3-3Z"/>
<path fill="#256EFF" fill-rule="nonzero" d="M24.997 20.765a1 1 0 0 1 1.265 1.265l-.707 2.12a1 1 0 0 1-1.656.392l-4.513 4.512 1.536.512a1 1 0 0 0 1.023-.241l.54-.54a1 1 0 0 1 0-1.415l1.414-1.414a1 1 0 0 1 1.415 0l1.414 1.414a1 1 0 0 1 0 1.414L25.314 30.2a1 1 0 0 1-1.415 0l-.54.54a3 3 0 0 1-3.07.725l-2.485-.828-1.871 1.876a2 2 0 0 1-.352 1.74l-.167.19a2 2 0 1 1-2.828-2.83l.188-.166a2 2 0 0 1 1.74-.352l.462-.46-.827-2.482a3 3 0 0 1 .725-3.07l.729-.73a2 2 0 0 1 .518-1.932l.189-.166a2 2 0 1 1 .709 3.513l-.73.73a1 1 0 0 0-.242 1.022l.51 1.533 5.928-5.924a1 1 0 0 1 .391-1.656l2.121-.707Z"/>
</g>
</svg>
</div>
<div class="o-media__content">
<strong>3x USB Connections</strong>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="o-grid__item | u-col-8-@bp4 u-col-9-@bp5">
<div class="c-vehicle-accessories">
<div class="c-vehicle-accessories__scroll-grid">
<div class="c-vehicle-accessories__list | o-grid o-gap-lg u-block-@bp3 o-columns-2-@bp3 o-columns-3-@bp5">
<div class="o-grid__item | u-w-16 u-w-20-@bp2 u-w-auto-@bp3 u-mb-lg-@bp3">
<strong class="u-tc-headings u-mb-xs u-block">Driver Convenience</strong>
<ul class="c-list--dash" role="list">
<li>BMW Teleservices</li>
<li>BMW Emergency Call</li>
<li>BMW Online Services</li>
<li>High Beam Assistant</li>
<li>Live Cockpit Professional</li>
<li>Gesture Control</li>
</ul>
</div>
<div class="o-grid__item | u-w-16 u-w-20-@bp2 u-w-auto-@bp3 u-mb-lg-@bp3">
<strong class="u-tc-headings u-mb-xs u-block">Passive Safety</strong>
<ul class="c-list--dash" role="list">
<li>M Sport Seat Belts</li>
<li>Active Pedestrian Safety</li>
</ul>
</div>
<div class="o-grid__item | u-w-16 u-w-20-@bp2 u-w-auto-@bp3 u-mb-lg-@bp3">
<strong class="u-tc-headings u-mb-xs u-block">Security</strong>
<ul class="c-list--dash" role="list">
<li>Alarm System</li>
</ul>
</div>
<div class="o-grid__item | u-w-16 u-w-20-@bp2 u-w-auto-@bp3 u-mb-lg-@bp3">
<strong class="u-tc-headings u-mb-xs u-block">Interior Features</strong>
<ul class="c-list--dash" role="list">
<li>Acoustic Glass</li>
<li>Anthracite Healining</li>
<li>Carbon Fibre Interior Trim</li>
<li>Electric Memory Seats</li>
<li>M Carbon Bucket Seats</li>
</ul>
</div>
<div class="o-grid__item | u-w-16 u-w-20-@bp2 u-w-auto-@bp3 u-mb-lg-@bp3">
<strong class="u-tc-headings u-mb-xs u-block">Wheels</strong>
<ul class="c-list--dash" role="list">
<li>Tyre Repair Kit</li>
<li>M Brakes with Red Calipers</li>
</ul>
</div>
<div class="o-grid__item | u-w-16 u-w-20-@bp2 u-w-auto-@bp3 u-mb-lg-@bp3">
<strong class="u-tc-headings u-mb-xs u-block">Trim</strong>
<ul class="c-list--dash" role="list">
<li>Galvanic Controls</li>
</ul>
</div>
<div class="o-grid__item | u-w-16 u-w-20-@bp2 u-w-auto-@bp3 u-mb-lg-@bp3">
<strong class="u-tc-headings u-mb-xs u-block">Exterior Features</strong>
<ul class="c-list--dash" role="list">
<li>Auto Dimming Drivers Door Mirror</li>
<li>Auto Dimming Rear View Mirror</li>
<li>Sun Protection Glass</li>
<li>Ext. Mirrors - folding with anti-dazzle</li>
<li>Rear-view Mirror with Auto Dimming</li>
</ul>
</div>
<div class="o-grid__item | u-w-16 u-w-20-@bp2 u-w-auto-@bp3 u-mb-lg-@bp3">
<strong class="u-tc-headings u-mb-xs u-block">Entertainment</strong>
<ul class="c-list--dash" role="list">
<li>Harmon Kardon Loudspeaker System</li>
<li>M Drivers Pack</li>
<li>Connected Package Pro</li>
</ul>
</div>
<div class="o-grid__item | u-w-16 u-w-20-@bp2 u-w-auto-@bp3 u-mb-lg-@bp3">
<strong class="u-tc-headings u-mb-xs u-block">Packs</strong>
<ul class="c-list--dash" role="list">
<li>Ultimate Pack</li>
<li>M Drivers Pack</li>
<li>Connected Package Pro</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Vehicle Icons
Click on the icons, to copy the code and use the correct icons for the vehicle key accessories. Check the icon library for a full searchable list of icons.