Clever Component Library

Chargingbox Specifications 

<div class="chargingbox-specs">
    <div class="chargingbox-specs-inner">
        <div class="chargingbox-specs-specifications">
            <dl class="specifications">
                <div class="specifications-inner">
                    <div class="specifications-item">
                        <dt class="specifications-term">Dimensions (l/w/h)</dt>
                        <dd class="specifications-description">
                            84 cm x 60 cm x 30 cm
                        </dd>
                    </div>
                    <div class="specifications-item">
                        <dt class="specifications-term">Cable length</dt>
                        <dd class="specifications-description">
                            4 m
                        </dd>
                    </div>
                    <div class="specifications-item">
                        <dt class="specifications-term">Charging power</dt>
                        <dd class="specifications-description">
                            3,7-11 kW
                        </dd>
                    </div>
                    <div class="specifications-item">
                        <dt class="specifications-term">Noise level (Normal mode)</dt>
                        <dd class="specifications-description">
                            42 dBa
                        </dd>
                    </div>
                    <div class="specifications-item">
                        <dt class="specifications-term">Warranty</dt>
                        <dd class="specifications-description">
                            Unlimited
                        </dd>
                    </div>
                    <div class="specifications-item">
                        <dt class="specifications-term">Support</dt>
                        <dd class="specifications-description">
                            24/7
                        </dd>
                    </div>
                    <div class="specifications-item">
                        <dt class="specifications-term">Price</dt>
                        <dd class="specifications-description">
                            7.999 dkk
                        </dd>
                    </div>
                </div>
            </dl>
        </div>

        <div class="chargingbox-specs-media">

            <div class="image" style="max-width: 304px;">
                <div class="image-inner">
                    <span style="padding-bottom: 186.8421052631579%;" class="image-placeholder transparent"></span>
                    <img src="/temp/blueprint-drawing.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="chargingbox-specs">
	<div class="chargingbox-specs-inner">
		<div class="chargingbox-specs-specifications">
			{% include '@specifications' with { specifications: chargingboxSpecsSpecifications } %}
		</div>

		<div class="chargingbox-specs-media">
			{% include '@image' with chargingboxSpecsMedia %}
		</div>
	</div>
</div>
 
{
  "chargingboxSpecsSpecifications": [
    {
      "term": "Dimensions (l/w/h)",
      "description": "84 cm x 60 cm x 30 cm"
    },
    {
      "term": "Cable length",
      "description": "4 m"
    },
    {
      "term": "Charging power",
      "description": "3,7-11 kW"
    },
    {
      "term": "Noise level (Normal mode)",
      "description": "42 dBa"
    },
    {
      "term": "Warranty",
      "description": "Unlimited"
    },
    {
      "term": "Support",
      "description": "24/7"
    },
    {
      "term": "Price",
      "description": "7.999 dkk"
    }
  ],
  "chargingboxSpecsMedia": {
    "url": "/temp/blueprint-drawing.jpg",
    "width": 304,
    "height": 568,
    "contain": true,
    "transparent": true
  }
}

Charging Box Specs

Purpose: Used to display relevant data regarding specifications.

Element: Specifications term

Purpose: Used to define the specific data displayed underneath it.
Required: Yes
Recommendations: Keep max to about 30 characters (including spaces)

Element: Specifications description

Purpose: Data about the product.
Required: Yes
Recommendations: Keep max to about 30 characters (including spaces)

Element: Image

Purpose: Used to illustrate the product.
Required: Yes
Recommendations: Use a transparent PNG/SVG image.