CO2 Class Label
Overview
The CO2 Class Label
component displays a vehicle's CO2 efficiency classification using a standardized energy label. It fetches the CO2 class data from the API and presents it with an explanatory headline and description.
Installation
The component is part of the Carpose application and requires no separate installation.
Usage
To use the CO2 Class Label component in a standard HTML page:
<div
data-carpose-component="co2-class-label"
data-api-key="your-api-key"
data-car-id="your-car-id"
data-type="wltp"
data-headline="CO2-Effizienzklasse"
></div>
Configuration Attributes
The component reads configuration from data attributes on the provided element:
data-carpose-component
string
-
Identifies the component type, must be set to "co2-class-label"
data-api-key
string
-
API key for authentication with the Carpose backend services. Required for data fetching.
data-car-id
string
-
ID of the car for which to display the CO2 class.
data-type
string
-
Type of CO2 classification to display (e.g., "wltp", "nedc").
data-headline
string
"CO2-Effizienzklasse"
Headline text displayed above the efficiency label.
Features
Displays a vehicle's CO2 efficiency class (A+, A, B, C, D, E, F, G)
Shows explanatory text about how the classification is determined
Fetches data dynamically from the Carpose API
Responsive layout that adapts to different screen sizes
Example
<!-- WLTP CO2 Efficiency Class -->
<div
data-carpose-component="co2-class-label"
data-api-key="your-api-key"
data-car-id="550e8400-e29b-41d4-a716-446655440000"
data-type="wltp"
data-headline="CO2-Effizienzklasse (WLTP)"
></div>
<!-- NEDC CO2 Efficiency Class -->
<div
data-carpose-component="co2-class-label"
data-api-key="your-api-key"
data-car-id="550e8400-e29b-41d4-a716-446655440000"
data-type="nedc"
data-headline="CO2-Effizienzklasse (NEDC)"
></div>
Behavior
Data Loading:
On initialization, the component fetches the CO2 class data from the API using the provided car ID and type.
If the specified type doesn't exist in the API response, an error is logged to the console.
The component doesn't render anything if the CO2 class data cannot be retrieved.
Display:
When data is successfully loaded, the component displays:
The headline specified in the
data-headline
attributeA standard explanatory text about how the CO2 class is determined
The energy efficiency label (A+ to G) based on the fetched data
Responsive Behavior:
The component adapts to different screen sizes
On larger screens, it typically occupies one-third of the available width
On smaller screens, it takes up half or full width depending on the viewport size
Integration with Other Components
The CO2 Class Label component is typically used in the Car Detail view, often in conjunction with the ConsumptionBox component, to display environmental information about the vehicle. It provides important efficiency information that is required by regulations in many countries when selling vehicles.
Last updated