Masonry Bricks
Place elements into a masonry like layout.
<div class="o-grid o-grid--padded" data-masonry>
<div class="o-grid__item | u-w-100% u-w-50%-@bp2 u-w-25%-@bp3 u-mb">
<div class="u-p u-flex u-align-middle u-justify-center u-bg-purple-50 u-radius-lg u-h-8"></div>
</div>
<div class="o-grid__item | u-w-100% u-w-50%-@bp2 u-w-25%-@bp3 u-mb">
<div class="u-p u-flex u-align-middle u-justify-center u-bg-red-50 u-radius-lg u-h-12"></div>
</div>
<div class="o-grid__item | u-w-100% u-w-50%-@bp2 u-w-25%-@bp3 u-mb">
<div class="u-p u-flex u-align-middle u-justify-center u-bg-orange-50 u-radius-lg u-h-16"></div>
</div>
<div class="o-grid__item | u-w-100% u-w-50%-@bp2 u-w-25%-@bp3 u-mb">
<div class="u-p u-flex u-align-middle u-justify-center u-bg-yellow-50 u-radius-lg u-h-5"></div>
</div>
<div class="o-grid__item | u-w-100% u-w-50%-@bp2 u-w-25%-@bp3 u-mb">
<div class="u-p u-flex u-align-middle u-justify-center u-bg-green-50 u-radius-lg u-h-12"></div>
</div>
<div class="o-grid__item | u-w-100% u-w-50%-@bp2 u-w-25%-@bp3 u-mb">
<div class="u-p u-flex u-align-middle u-justify-center u-bg-teal-50 u-radius-lg u-h-8"></div>
</div>
<div class="o-grid__item | u-w-100% u-w-50%-@bp2 u-w-25%-@bp3 u-mb">
<div class="u-p u-flex u-align-middle u-justify-center u-bg-blue-50 u-radius-lg u-h-5"></div>
</div>
<div class="o-grid__item | u-w-100% u-w-50%-@bp2 u-w-25%-@bp3 u-mb">
<div class="u-p u-flex u-align-middle u-justify-center u-bg-indigo-50 u-radius-lg u-h-16"></div>
</div>
<div class="o-grid__item | u-w-100% u-w-50%-@bp2 u-w-25%-@bp3 u-mb">
<div class="u-p u-flex u-align-middle u-justify-center u-bg-purple-50 u-radius-lg u-h-5"></div>
</div>
<div class="o-grid__item | u-w-100% u-w-50%-@bp2 u-w-25%-@bp3 u-mb">
<div class="u-p u-flex u-align-middle u-justify-center u-bg-red-50 u-radius-lg u-h-8"></div>
</div>
<div class="o-grid__item | u-w-100% u-w-50%-@bp2 u-w-25%-@bp3 u-mb">
<div class="u-p u-flex u-align-middle u-justify-center u-bg-orange-50 u-radius-lg u-h-10"></div>
</div>
<div class="o-grid__item | u-w-100% u-w-50%-@bp2 u-w-25%-@bp3 u-mb">
<div class="u-p u-flex u-align-middle u-justify-center u-bg-yellow-50 u-radius-lg u-h-16"></div>
</div>
</div>Masonry Text
Use clumps of text in a masonry like layout.
Security
- Alarm System
Trim
- High-gloss black trim with Pearl Chrome
Engine, Drivetrain, Suspension
- M Sport Suspension
- Sport Automatic Transmission with Gear Shift
Passive Safety
- BMW Emergency Call
Wheels
- 18" RFT 400 M Light Star-Spoke Alloy Wheels
- Run-Flat Tyres
Interior Features
- Split Folding Rear Seats
- Sport Seats
- Automatic Air Conditioning
- Additional Interior Lighting
- Anthracite Headlining
- Heated Front Seats
Packs
- M Sport Package
Entertainment
- CD Player
- DAB Radio
Exterior Features
- RDE Exhaust Emissions Standard
- Rear-View Mirror with Auto Dimming
- LED Headlights
- Auto Headlights with Rain Sensor
- M Sport Exterior Styling
- High-Gloss Shadowline Exterior Trim
- Ext. Mirrors Folding with Anti Dazzle
Driver Convenience
- Servotronic Steering
- BMW TeleServices
- BMW Online Services
- Real Time Traffic Information
- Remote Services
- Bluetooth Hands-Free with USB Audio
- BMW Navigation System
- Model Year CO2 Change
<div class="o-grid o-grid--padded" data-masonry>
<div class="o-grid__item | u-w-100% u-w-50%-@bp2 u-w-33.33%-@bp3 u-mb-lg">
<h3 class="u-epsilon | u-mb-xs">Security</h3>
<ul class="o-list">
<li class="o-list__item">
Alarm System
</li>
</ul>
</div>
<div class="o-grid__item | u-w-100% u-w-50%-@bp2 u-w-33.33%-@bp3 u-mb-lg">
<h3 class="u-epsilon | u-mb-xs">Trim</h3>
<ul class="o-list">
<li class="o-list__item">
High-gloss black trim with Pearl Chrome
</li>
</ul>
</div>
<div class="o-grid__item | u-w-100% u-w-50%-@bp2 u-w-33.33%-@bp3 u-mb-lg">
<h3 class="u-epsilon | u-mb-xs">Engine, Drivetrain, Suspension</h3>
<ul class="o-list">
<li class="o-list__item">
M Sport Suspension
</li>
<li class="o-list__item">
Sport Automatic Transmission with Gear Shift
</li>
</ul>
</div>
<div class="o-grid__item | u-w-100% u-w-50%-@bp2 u-w-33.33%-@bp3 u-mb-lg">
<h3 class="u-epsilon | u-mb-xs">Passive Safety</h3>
<ul class="o-list">
<li class="o-list__item">
BMW Emergency Call
</li>
</ul>
</div>
<div class="o-grid__item | u-w-100% u-w-50%-@bp2 u-w-33.33%-@bp3 u-mb-lg">
<h3 class="u-epsilon | u-mb-xs">Wheels</h3>
<ul class="o-list">
<li class="o-list__item">
18" RFT 400 M Light Star-Spoke Alloy Wheels
</li>
<li class="o-list__item">
Run-Flat Tyres
</li>
</ul>
</div>
<div class="o-grid__item | u-w-100% u-w-50%-@bp2 u-w-33.33%-@bp3 u-mb-lg">
<h3 class="u-epsilon | u-mb-xs">Interior Features</h3>
<ul class="o-list">
<li class="o-list__item">
Split Folding Rear Seats
</li>
<li class="o-list__item">
Sport Seats
</li>
<li class="o-list__item">
Automatic Air Conditioning
</li>
<li class="o-list__item">
Additional Interior Lighting
</li>
<li class="o-list__item">
Anthracite Headlining
</li>
<li class="o-list__item">
Heated Front Seats
</li>
</ul>
</div>
<div class="o-grid__item | u-w-100% u-w-50%-@bp2 u-w-33.33%-@bp3 u-mb-lg">
<h3 class="u-epsilon | u-mb-xs">Packs</h3>
<ul class="o-list">
<li class="o-list__item">
M Sport Package
</li>
</ul>
</div>
<div class="o-grid__item | u-w-100% u-w-50%-@bp2 u-w-33.33%-@bp3 u-mb-lg">
<h3 class="u-epsilon | u-mb-xs">Entertainment</h3>
<ul class="o-list">
<li class="o-list__item">
CD Player
</li>
<li class="o-list__item">
DAB Radio
</li>
</ul>
</div>
<div class="o-grid__item | u-w-100% u-w-50%-@bp2 u-w-33.33%-@bp3 u-mb-lg">
<h3 class="u-epsilon | u-mb-xs">Exterior Features</h3>
<ul class="o-list">
<li class="o-list__item">
RDE Exhaust Emissions Standard
</li>
<li class="o-list__item">
Rear-View Mirror with Auto Dimming
</li>
<li class="o-list__item">
LED Headlights
</li>
<li class="o-list__item">
Auto Headlights with Rain Sensor
</li>
<li class="o-list__item">
M Sport Exterior Styling
</li>
<li class="o-list__item">
High-Gloss Shadowline Exterior Trim
</li>
<li class="o-list__item">
Ext. Mirrors Folding with Anti Dazzle
</li>
</ul>
</div>
<div class="o-grid__item | u-w-100% u-w-50%-@bp2 u-w-33.33%-@bp3 u-mb-lg">
<h3 class="u-epsilon | u-mb-xs">Driver Convenience</h3>
<ul class="o-list">
<li class="o-list__item">
Servotronic Steering
</li>
<li class="o-list__item">
BMW TeleServices
</li>
<li class="o-list__item">
BMW Online Services
</li>
<li class="o-list__item">
Real Time Traffic Information
</li>
<li class="o-list__item">
Remote Services
</li>
<li class="o-list__item">
Bluetooth Hands-Free with USB Audio
</li>
<li class="o-list__item">
BMW Navigation System
</li>
<li class="o-list__item">
Model Year CO2 Change
</li>
</ul>
</div>
</div>Masonry Images
Use images in a masonry like layout.
<div class="o-grid o-grid--padded" data-masonry>
<div class="o-grid__item | u-w-100% u-w-50%-@bp2 u-w-33.33%-@bp3 u-mb">
<img class="c-img | u-aspect--16x9 u-radius-lg" src="https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=484&q=80" loading="lazy" width="484" height="272" alt>
</div>
<div class="o-grid__item | u-w-100% u-w-50%-@bp2 u-w-33.33%-@bp3 u-mb">
<img class="c-img | u-aspect u-radius-lg" src="https://images.unsplash.com/photo-1434394354979-a235cd36269d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=484&q=80" loading="lazy" width="484" height="484" alt>
</div>
<div class="o-grid__item | u-w-100% u-w-50%-@bp2 u-w-33.33%-@bp3 u-mb">
<img class="c-img | u-aspect u-radius-lg" src="https://images.unsplash.com/photo-1491904768633-2b7e3e7fede5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=484&q=80" loading="lazy" width="484" height="484" alt>
</div>
<div class="o-grid__item | u-w-100% u-w-50%-@bp2 u-w-33.33%-@bp3 u-mb">
<img class="c-img | u-aspect u-radius-lg" src="https://images.unsplash.com/photo-1463288889890-a56b2853c40f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=484&q=80" loading="lazy" width="484" height="484" alt>
</div>
<div class="o-grid__item | u-w-100% u-w-50%-@bp2 u-w-33.33%-@bp3 u-mb">
<img class="c-img | u-aspect--16x9 u-radius-lg" src="https://images.unsplash.com/photo-1611605645802-c21be743c321?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=484&q=80" loading="lazy" width="484" height="272" alt>
</div>
<div class="o-grid__item | u-w-100% u-w-50%-@bp2 u-w-33.33%-@bp3 u-mb">
<img class="c-img | u-aspect u-radius-lg" src="https://images.unsplash.com/photo-1498603993951-8a027a8a8f84?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=484&q=80" loading="lazy" width="484" height="484" alt>
</div>
<div class="o-grid__item | u-w-100% u-w-50%-@bp2 u-w-33.33%-@bp3 u-mb">
<img class="c-img | u-aspect u-radius-lg" src="https://images.unsplash.com/photo-1526400473556-aac12354f3db?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=484&q=80" loading="lazy" width="484" height="484" alt>
</div>
<div class="o-grid__item | u-w-100% u-w-50%-@bp2 u-w-33.33%-@bp3 u-mb">
<img class="c-img | u-aspect u-radius-lg" src="https://images.unsplash.com/photo-1617369120004-4fc70312c5e6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=484&q=80" loading="lazy" width="484" height="484" alt>
</div>
<div class="o-grid__item | u-w-100% u-w-50%-@bp2 u-w-33.33%-@bp3 u-mb">
<img class="c-img | u-aspect--16x9 u-radius-lg" src="https://images.unsplash.com/photo-1518892096458-a169843d7f7f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=484&q=80" loading="lazy" width="484" height="272" alt>
</div>
</div>Using Text Columns
A rudimentary way of achieving masonry layouts is to use text columns. Not quite the same effect though.
Security
- Alarm System
Trim
- High-gloss black trim with Pearl Chrome
Engine, Drivetrain, Suspension
- M Sport Suspension
- Sport Automatic Transmission with Gear Shift
Passive Safety
- BMW Emergency Call
Wheels
- 18" RFT 400 M Light Star-Spoke Alloy Wheels
- Run-Flat Tyres
Interior Features
- Split Folding Rear Seats
- Sport Seats
- Automatic Air Conditioning
- Additional Interior Lighting
- Anthracite Headlining
- Heated Front Seats
Packs
- M Sport Package
Entertainment
- CD Player
- DAB Radio
Exterior Features
- RDE Exhaust Emissions Standard
- Rear-View Mirror with Auto Dimming
- LED Headlights
- Auto Headlights with Rain Sensor
- M Sport Exterior Styling
- High-Gloss Shadowline Exterior Trim
- Ext. Mirrors Folding with Anti Dazzle
Driver Convenience
- Servotronic Steering
- BMW TeleServices
- BMW Online Services
- Real Time Traffic Information
- Remote Services
- Bluetooth Hands-Free with USB Audio
- BMW Navigation System
- Model Year CO2 Change
<div class="o-columns-2-@bp2 o-columns-3-@bp3 o-flow-lg">
<div>
<h3 class="u-epsilon | u-mb-sm">Security</h3>
<ul class="c-list--dash | o-list" role="list">
<li class="o-list__item">
Alarm System
</li>
</ul>
</div>
<div>
<h3 class="u-epsilon | u-mb-sm">Trim</h3>
<ul class="c-list--dash | o-list" role="list">
<li class="o-list__item">
High-gloss black trim with Pearl Chrome
</li>
</ul>
</div>
<div>
<h3 class="u-epsilon | u-mb-sm">Engine, Drivetrain, Suspension</h3>
<ul class="c-list--dash | o-list" role="list">
<li class="o-list__item">
M Sport Suspension
</li>
<li class="o-list__item">
Sport Automatic Transmission with Gear Shift
</li>
</ul>
</div>
<div>
<h3 class="u-epsilon | u-mb-sm">Passive Safety</h3>
<ul class="c-list--dash | o-list" role="list">
<li class="o-list__item">
BMW Emergency Call
</li>
</ul>
</div>
<div>
<h3 class="u-epsilon | u-mb-sm">Wheels</h3>
<ul class="c-list--dash | o-list" role="list">
<li class="o-list__item">
18" RFT 400 M Light Star-Spoke Alloy Wheels
</li>
<li class="o-list__item">
Run-Flat Tyres
</li>
</ul>
</div>
<div>
<h3 class="u-epsilon | u-mb-sm">Interior Features</h3>
<ul class="c-list--dash | o-list" role="list">
<li class="o-list__item">
Split Folding Rear Seats
</li>
<li class="o-list__item">
Sport Seats
</li>
<li class="o-list__item">
Automatic Air Conditioning
</li>
<li class="o-list__item">
Additional Interior Lighting
</li>
<li class="o-list__item">
Anthracite Headlining
</li>
<li class="o-list__item">
Heated Front Seats
</li>
</ul>
</div>
<div>
<h3 class="u-epsilon | u-mb-sm">Packs</h3>
<ul class="c-list--dash | o-list" role="list">
<li class="o-list__item">
M Sport Package
</li>
</ul>
</div>
<div>
<h3 class="u-epsilon | u-mb-sm">Entertainment</h3>
<ul class="c-list--dash | o-list" role="list">
<li class="o-list__item">
CD Player
</li>
<li class="o-list__item">
DAB Radio
</li>
</ul>
</div>
<div>
<h3 class="u-epsilon | u-mb-sm">Exterior Features</h3>
<ul class="c-list--dash | o-list" role="list">
<li class="o-list__item">
RDE Exhaust Emissions Standard
</li>
<li class="o-list__item">
Rear-View Mirror with Auto Dimming
</li>
<li class="o-list__item">
LED Headlights
</li>
<li class="o-list__item">
Auto Headlights with Rain Sensor
</li>
<li class="o-list__item">
M Sport Exterior Styling
</li>
<li class="o-list__item">
High-Gloss Shadowline Exterior Trim
</li>
<li class="o-list__item">
Ext. Mirrors Folding with Anti Dazzle
</li>
</ul>
</div>
<div>
<h3 class="u-epsilon | u-mb-sm">Driver Convenience</h3>
<ul class="c-list--dash | o-list" role="list">
<li class="o-list__item">
Servotronic Steering
</li>
<li class="o-list__item">
BMW TeleServices
</li>
<li class="o-list__item">
BMW Online Services
</li>
<li class="o-list__item">
Real Time Traffic Information
</li>
<li class="o-list__item">
Remote Services
</li>
<li class="o-list__item">
Bluetooth Hands-Free with USB Audio
</li>
<li class="o-list__item">
BMW Navigation System
</li>
<li class="o-list__item">
Model Year CO2 Change
</li>
</ul>
</div>
</div>