# 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.carpose.de/components/co2-class-label.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.