> For the complete documentation index, see [llms.txt](https://docs.carpose.de/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.carpose.de/components/06_co2-class-label.md).

# CO2 Class Label

### Overview <a href="#overview" id="overview"></a>

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 <a href="#installation" id="installation"></a>

The component is part of the Carpose application and requires no separate installation.

### Usage <a href="#usage" id="usage"></a>

To use the CO2 Class Label component in a standard HTML page:

```html
<div 
  data-carpose-component="co2-class-label"
  data-api-key="your-api-key"
  data-vehicle-id="your-car-id"
  data-type="wltp"
  data-headline="CO2-Effizienzklasse"
></div>
```

### Configuration Attributes <a href="#configuration-attributes" id="configuration-attributes"></a>

The component reads configuration from data attributes on the provided element:

| Attribute                | Type   | Default               | Description                                                                               |
| ------------------------ | ------ | --------------------- | ----------------------------------------------------------------------------------------- |
| `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-vehicle-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 <a href="#features" id="features"></a>

* 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 <a href="#example" id="example"></a>

```html
<!-- WLTP CO2 Efficiency Class -->
<div 
  data-carpose-component="co2-class-label"
  data-api-key="your-api-key"
  data-vehicle-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-vehicle-id="550e8400-e29b-41d4-a716-446655440000"
  data-type="nedc"
  data-headline="CO2-Effizienzklasse (NEDC)"
></div>
```

### Behavior <a href="#behavior" id="behavior"></a>

1. **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.
2. **Display**:
   * When data is successfully loaded, the component displays:
     * The headline specified in the `data-headline` attribute
     * A standard explanatory text about how the CO2 class is determined
     * The energy efficiency label (A+ to G) based on the fetched data
3. **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