Clever Component Library

Specifications: With Disclaimer 

<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 has-disclaimer">
                7.999 dkk
                <br><span class="disclaimer">* This is a disclaimer</span>
            </dd>
        </div>
    </div>
</dl>
 
<dl class="specifications">
	<div class="specifications-inner">
		{% for item in specifications %}
			<div class="specifications-item">
				<dt class="specifications-term">{{ item.term }}</dt>
				<dd class="specifications-description{% if item.disclaimer %} has-disclaimer{% endif %}">
					{{ item.description }}
					{% if item.disclaimer %}
						<br><span class="disclaimer">* {{ item.disclaimer }}</span>
					{% endif %}
				</dd>
			</div>
		{% endfor %}
	</div>
</dl>
 
{
  "specifications": [
    {
      "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",
      "disclaimer": "This is a disclaimer"
    }
  ]
}
  • Handle: @specifications--with-disclaimer
  • Preview:
  • Filesystem Path: resources/components/02-units/specifications/specifications.twig

No notes defined.