List Item

No notes defined.

<!-- Default -->
<div class="sds-listItem" data-scope-wrapper="box" data-scope="flat">
    <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">Test</div>
        <p class="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>


<!-- Sunken -->
<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">Test</div>
        <p class="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>


<!-- Transparent -->
<div class="sds-listItem" data-scope-wrapper="box" data-scope="transparent" data-scope-no-surface>
    <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">Test</div>
        <p class="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>


<!-- Transparent No -->
<div class="sds-listItem" data-scope-wrapper="box" data-scope="transparent" data-scope-no-surface>
    <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">Test</div>
        <p class="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>


<!-- Msp -->
<div class="sds-listItem" data-scope-wrapper="box" data-scope="flat">
    <div class="sds-listItem__leading">

        <div class="sds-staticStackXs">
            <p class="sds-textSemiBold">Suis-je indemnisé si j’ai un accident de voiture sur le trajet vers mon lieu de travail?</p>
            <p class="sds-textHelper sds-metaColor">il y a 3 heures</p>
        </div>

    </div>

    <div class="sds-listItem__trailing">

        <div class="sds-staticGapSm d-flex align-items-center">
            <span class="sds-badge badge -badgeHighlight -badgeMuted">

                En cours

            </span>
            <span class="sds-icon sds-icon-chevronright"></span>
        </div>

    </div>

</div>


<!-- Default -->
{% extends "@list-item-frame" %}
{% block leading %}
	{% render "@icon-block" %}
{% endblock %}
{% block center %}
	<div class="{{ namespace }}staticStackXxs">
		<div class="h4">Test</div>
		<p class="{{ namespace }}textHelper">Description</p>
	</div>
{% endblock %}
{% block trailing %}
	{% render "@switch" %}
{% endblock %}

<!-- Sunken -->
{% extends "@list-item-frame" %}
{% block leading %}
	{% render "@icon-block" %}
{% endblock %}
{% block center %}
	<div class="{{ namespace }}staticStackXxs">
		<div class="h4">Test</div>
		<p class="{{ namespace }}textHelper">Description</p>
	</div>
{% endblock %}
{% block trailing %}
	{% render "@switch" %}
{% endblock %}

<!-- Transparent -->
{% extends "@list-item-frame" %}
{% block leading %}
	{% render "@icon-block" %}
{% endblock %}
{% block center %}
	<div class="{{ namespace }}staticStackXxs">
		<div class="h4">Test</div>
		<p class="{{ namespace }}textHelper">Description</p>
	</div>
{% endblock %}
{% block trailing %}
	{% render "@switch" %}
{% endblock %}

<!-- Transparent No -->
{% extends "@list-item-frame" %}
{% block leading %}
	{% render "@icon-block" %}
{% endblock %}
{% block center %}
	<div class="{{ namespace }}staticStackXxs">
		<div class="h4">Test</div>
		<p class="{{ namespace }}textHelper">Description</p>
	</div>
{% endblock %}
{% block trailing %}
	{% render "@switch" %}
{% endblock %}

<!-- Msp -->
{% extends "@list-item-frame" %}
{% block leading %}
	<div class="{{ namespace }}staticStackXs">
		<p class="{{ namespace }}textSemiBold">Suis-je indemnisé si j’ai un accident de voiture sur le trajet vers mon lieu de travail?</p>
		<p class="{{ namespace }}textHelper {{ namespace }}metaColor">il y a 3 heures</p>
	</div>
{% endblock %}
{% block trailing %}
	<div class="{{ namespace }}staticGapSm d-flex align-items-center">
		{% render "@badge--highlight-muted",{
			text: "En cours"
		},true %}
		<span class="{{ namespace }}icon {{ namespace }}icon-chevronright"></span>
	</div>
{% endblock %}