List Item: Sunken

No notes defined.

<div class="sds-listItem" data-scope-wrapper="box" data-scope="sunken">
    <div class="sds-listItem__leading">

        <span class="sds-iconBlock" aria-hidden="true">

            <span class="sds-iconBlock__icon sds-icon sds-icon-photo"></span>

        </span>

    </div>

    <div class="sds-staticStackXxs">
        <div class="h4">
            <label for="">
                {{ Heading }}
            </label>
        </div>
        <p class="sds-metaColor sds-textHelper">{{ Description }}</p>
    </div>

    <div class="sds-listItem__trailing">

        <label class="sds-switch" for="switch">
            <input type="checkbox" class="sds-switch__input custom-control-input" id="switch">

            <span class="sds-switch__shape custom-control custom-switch">

                <span aria-hidden="true" class="sds-switch__text sds-switch__textActive">OUI</span>
                <span aria-hidden="true" class="sds-switch__text sds-switch__textInactive">NON</span>

            </span>
        </label>

    </div>

</div>
 
{% extends "@list-item-frame" %}
{% block leading %}
	{% render "@icon-block" %}
{% endblock %}
{% block center %}
	<div class="{{ namespace }}staticStackXxs">
		<div class="h4">
			<label for="{{ switchListItemID }}">
				{{ title or "{{ Heading }}" }}
			</label>
		</div>
		<p class="{{ namespace }}metaColor {{ namespace }}textHelper">{{ text or "{{ Description }}" }}</p>
	</div>
{% endblock %}
{% block trailing %}
	{% render "@switch",{
		id: switchListItemID
	},true %}
{% endblock %}