webDCMi Responsiveness Example
Vehicle Information Component
Size: XS (<576px)
Single column
layout.
Field labels and values each in
full rows
.
Amount of secondary fields:
5
Size: SM (≥576px)
Mixed column
layout (1 + 2).
Secondary field labels and values in
(half) split rows
.
Amount of secondary fields:
7
Size: MD (≥768px)
Two-column layout
(1/4 and 3/4 widths).
Amount of secondary fields:
10
Size: LG (≥992px)
Mixed column
layout.
Two columns
for primary,
four columns
for secondary information, each using quarters grid.
Amount of secondary fields:
12
Size: XL (≥1200px)
Mixed column
layout
Two columns
for primary,
six columns
for secondary information, each using sixths grid.
Amount of secondary fields:
12
Size: XXL (≥1400px)
Mixed column
layout, same as XL but wider.
Two columns
for primary,
six columns
for secondary information, each using sixths grid.
Amount of secondary fields:
12
1 - Component with visualized borders
Type
Renault Zoe (06.2012->) Intens DE - LimS5, Intens (Miet-Batterie 22kWh), 2015 - 2018
ID
SA001
Fueltype
Diesel Partikelfilter / Plug-in Hybrid Diesel Partikelfilter / Plug-in Hybrid
Gearbox
Automatic
List Price
40'296.30 CHF
CO2 Emission
143 g/km
Body type
Kombi
HP
142
Mileage
42.000
First Registration
06.01.2019
Sum Price Options
5'750.15 CHF
Evaluation Price
46'000.00 CHF
Variant
Trend
Body type
Kombi
Variant
Trend
CO2 Emission
143 g/km
Evaluation Price
46'000.00 CHF
2 - Component without visible borders
Type
Renault Zoe (06.2012->) Intens DE - LimS5, Intens (Miet-Batterie 22kWh), 2015 - 2018
ID
SA001
Fueltype
Diesel Partikelfilter / Plug-in Hybrid Diesel Partikelfilter / Plug-in Hybrid
Gearbox
Automatic
List Price
40'296.30 CHF
CO2 Emission
143 g/km
Body type
Kombi
HP
142
Mileage
42.000
First Registration
06.01.2019
Sum Price Options
5'750.15 CHF
Evaluation Price
46'000.00 CHF
Variant
Trend
Body type
Kombi
Variant
Trend
CO2 Emission
143 g/km
Evaluation Price
46'000.00 CHF