Section Item Detail: Default

Use the .sds-sectionItem__aboveClickArea class on items in columns that need to be interacted with. This lets them "float" over the js-sectionItem__toggle trigger element that covers the entirety of the section item.

<div class="sds-box sds-sectionItem__detail">
    <div class="sds-sectionItem__detailInner">
        <div class="sds-sectionItem__innerCol -date">
            <div class="sds-sectionItem__textMeta sds-textHelper">
                18/03/2022
            </div>
        </div>
        <div class="sds-sectionItem__innerCol -dot">
            <div class="sds-sectionItem__dotWrapper">
                <span class="sds-iconCircle -product -shopping" aria-hidden="true">

                    <span class="sds-icon sds-icon-shoppingbag"></span>

                </span>

            </div>
        </div>
        <div class="sds-sectionItem__innerCol -justifyEnd -grow">
            <div class="sds-btnGroup sds-sectionItem__aboveClickArea">
                <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Exclure de l’analyse">

                    <span class="sds-icon sds-icon-hidden"></span>

                </button>
            </div>
        </div>
        <button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button">
            <span class="sr-only">Close detail</span>
        </button>
    </div>
    <div class="sds-sectionItem__detailContent">
        <div class="h3">Domiciliation relevé Post Telecom Test 1</div>

        <table class="sds-infoTable table">
            <tbody>

                <tr>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div class="sds-label">
                                Montant de la transaction

                            </div>

                        </div>
                    </td>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div class="sds-amount -negative -amountXl">
                                <span class="sds-amount__value">-165</span>

                                <span class="sds-amount__currency">€</span>

                            </div>

                        </div>
                    </td>
                </tr>

                <tr>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div class="sds-label">
                                Date de la transaction

                            </div>

                        </div>
                    </td>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div>
                                30.09.2021
                            </div>

                        </div>
                    </td>
                </tr>

                <tr>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div class="sds-label">
                                Montant

                            </div>

                        </div>
                    </td>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div class="sds-amount -negative">
                                <span class="sds-amount__value">-165</span>

                                <span class="sds-amount__currency">€</span>

                            </div>

                        </div>
                    </td>
                </tr>

                <tr>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div class="sds-label">
                                Pays

                            </div>

                        </div>
                    </td>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div>
                                Luxembourg
                            </div>

                        </div>
                    </td>
                </tr>

            </tbody>
        </table>

    </div>
</div>
 
<div class="{{ namespace }}box {{ namespace }}sectionItem__detail">
	<div class="{{ namespace }}sectionItem__detailInner">
		<div class="{{ namespace }}sectionItem__innerCol -date">
			<div class="{{ namespace }}sectionItem__textMeta {{ namespace }}textHelper">
				18/03/2022
			</div>
		</div>
		<div class="{{ namespace }}sectionItem__innerCol -dot">
			<div class="{{ namespace }}sectionItem__dotWrapper">
				{% render "@icon-circle-mia"+product %}
			</div>
		</div>
		<div class="{{ namespace }}sectionItem__innerCol -justifyEnd -grow">
			<div class="{{ namespace }}btnGroup {{ namespace }}sectionItem__aboveClickArea">
				{% render "@icon-btn-secondary",{
					icon: "icon-hidden",
					attrs: {
						"data-toggle": "tooltip",
						"data-placement": "top",
						"data-title": "Exclure de l’analyse"
					}
				},true %}
			</div>
		</div>
		<button class="{{ namespace }}sectionItem__toggle js-sectionItem__detailToggle" type="button" {% for attrKey, attr in detailToggleOptions %} {{ attrKey }}="{{ attr }}"{% endfor %}>
			<span class="sr-only">Close detail</span>
		</button>
	</div>
	<div class="{{ namespace }}sectionItem__detailContent">
		<div class="h3">{{ communication }}</div>
		{% render "@snet-info-table",infotableOptions,true %}
	</div>
</div>