Clever Component Library

Checklist 

<div class="checklist">

    <ul class="checklist-list">
        <li class="checklist-item">
            <span class="icon icon-checkmark">
                <span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.15 24.18">
                        <path d="M11.09 24.18L0 13.1l2.12-2.13 8.91 8.92L29.97 0l2.18 2.07-21.06 22.11z" />
                    </svg>
                </span>
            </span>
            <span class="text">Ubegrænset opladning hjemme og på farten</span>
        </li>
        <li class="checklist-item">
            <span class="icon icon-checkmark">
                <span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.15 24.18">
                        <path d="M11.09 24.18L0 13.1l2.12-2.13 8.91 8.92L29.97 0l2.18 2.07-21.06 22.11z" />
                    </svg>
                </span>
            </span>
            <span class="text">Installation af ladeboks med fast kabel</span>
        </li>
        <li class="checklist-item">
            <span class="icon icon-checkmark">
                <span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.15 24.18">
                        <path d="M11.09 24.18L0 13.1l2.12-2.13 8.91 8.92L29.97 0l2.18 2.07-21.06 22.11z" />
                    </svg>
                </span>
            </span>
            <span class="text">Ladekabel og ladebrik</span>
        </li>
        <li class="checklist-item">
            <span class="icon icon-checkmark">
                <span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.15 24.18">
                        <path d="M11.09 24.18L0 13.1l2.12-2.13 8.91 8.92L29.97 0l2.18 2.07-21.06 22.11z" />
                    </svg>
                </span>
            </span>
            <span class="text">Ubegrænset opladning på Clevers ladenetværk i Danmark, Sverige og Nordtyskland</span>
        </li>
    </ul>
</div>
 
<div class="checklist">
	{% if heading %}
		<{{ headingLevel|default('h3') }} class="heading checklist-heading {% if headingSmall %} heading--context {% endif %}">{{ heading }}</{{ headingLevel|default('h3') }}>
	{% endif %}

	<ul class="checklist-list">
		{% for item in items %}
			<li class="checklist-item">
				{% include '@icon' with { source: 'icon-checkmark.svg' }  %}
				<span class="text">{{ item }}</span>
			</li>
		{% endfor %}
	</ul>
</div>
 
{
  "items": [
    "Ubegrænset opladning hjemme og på farten",
    "Installation af ladeboks med fast kabel",
    "Ladekabel og ladebrik",
    "Ubegrænset opladning på Clevers ladenetværk i Danmark, Sverige og Nordtyskland"
  ]
}

No notes defined.