Actions List Block: Multiple Lists

No notes defined.

<div class="sds-box -insetLg">
    <div class="sds-actionsList -isListItem">
        <div class="sds-actionsList__heading">
            <div class="sds-actionsList__title">
                List item 1
            </div>

        </div>
        <div class="sds-actionsList__body">

            <div class="sds-actionsList__bodyItem">
                <div class="sds-listItem sds-hoverContentSecondary sds-hoverContentSecondary">

                    <div class="sds-avatar centeredBgi">

                        <img class="img-fluid" src="../../media/snet/avatars/avatarBankerMain.png" alt="">

                    </div>
                    <div class="sds-listItem__text">
                        <div class="sds-listItem__textMain">List item helper with text</div>
                        <div class="sds-listItem__textMeta sds-textHelper">helper text</div>
                    </div>

                    <div class="sds-listItem__rightContent">
                        <div class="sds-btnGroup">
                            <button type="button" class="sds-btn -iconBtn -btnSecondary">

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

                            </button>
                            <button type="button" class="sds-btn -btnSecondary">

                                <span class="sds-btn__text">Activer</span>

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

                            </button>

                        </div>
                    </div>
                </div>
            </div>

            <div class="sds-actionsList__bodyItem">
                <div class="sds-listItem sds-hoverContentSecondary sds-hoverContentSecondary">

                    <div class="sds-avatar centeredBgi">

                        <img class="img-fluid" src="../../media/snet/avatars/avatarBankerMain.png" alt="">

                    </div>
                    <div class="sds-listItem__text">
                        <div class="sds-listItem__textMain">text</div>
                        <div class="sds-listItem__textMeta sds-textHelper"></div>
                    </div>

                    <div class="sds-listItem__rightContent">
                        <div class="sds-listItem__textMeta sds-textHelper">Nécessite une double signature</div>
                        <button type="button" class="sds-btn -btnSecondary">

                            <span class="sds-btn__text">Activer</span>

                        </button>
                    </div>
                </div>
            </div>

            <div class="sds-actionsList__bodyItem">
                <div class="sds-listItem sds-hoverContentSecondary sds-hoverContentSecondary">

                    <div class="sds-avatar centeredBgi">

                        <img class="img-fluid" src="../../media/snet/avatars/avatarCactus.png" alt="">

                    </div>
                    <div class="sds-listItem__text">
                        <div class="sds-listItem__textMain">List item helper with text</div>
                        <div class="sds-listItem__textMeta sds-textHelper">helper text</div>
                    </div>

                    <div class="sds-listItem__rightContent">
                        <button type="button" class="sds-btn -btnSecondary">

                            <span class="sds-btn__text">Activer</span>

                        </button>
                    </div>
                </div>
            </div>

        </div>

    </div>
    <div class="sds-actionsList -isListItem">
        <div class="sds-actionsList__heading">
            <div class="sds-actionsList__title">
                List item 2
            </div>

        </div>
        <div class="sds-actionsList__body">

            <div class="sds-actionsList__bodyItem">
                <div class="sds-listItem sds-hoverContentSecondary sds-hoverContentSecondary">

                    <div class="sds-avatar centeredBgi">

                        <img class="img-fluid" src="../../media/snet/avatars/avatarBankerMain.png" alt="">

                    </div>
                    <div class="sds-listItem__text">
                        <div class="sds-listItem__textMain">List item helper with text</div>
                        <div class="sds-listItem__textMeta sds-textHelper">helper text</div>
                    </div>

                    <div class="sds-listItem__rightContent">
                        <div class="sds-btnGroup">
                            <button type="button" class="sds-btn -iconBtn -btnSecondary">

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

                            </button>
                            <button type="button" class="sds-btn -btnSecondary">

                                <span class="sds-btn__text">Activer</span>

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

                            </button>

                        </div>
                    </div>
                </div>
            </div>

            <div class="sds-actionsList__bodyItem">
                <div class="sds-listItem sds-hoverContentSecondary sds-hoverContentSecondary">

                    <div class="sds-avatar centeredBgi">

                        <img class="img-fluid" src="../../media/snet/avatars/avatarBankerMain.png" alt="">

                    </div>
                    <div class="sds-listItem__text">
                        <div class="sds-listItem__textMain">text</div>
                        <div class="sds-listItem__textMeta sds-textHelper"></div>
                    </div>

                    <div class="sds-listItem__rightContent">
                        <div class="sds-listItem__textMeta sds-textHelper">Nécessite une double signature</div>
                        <button type="button" class="sds-btn -btnSecondary">

                            <span class="sds-btn__text">Activer</span>

                        </button>
                    </div>
                </div>
            </div>

            <div class="sds-actionsList__bodyItem">
                <div class="sds-listItem sds-hoverContentSecondary sds-hoverContentSecondary">

                    <div class="sds-avatar centeredBgi">

                        <img class="img-fluid" src="../../media/snet/avatars/avatarCactus.png" alt="">

                    </div>
                    <div class="sds-listItem__text">
                        <div class="sds-listItem__textMain">List item helper with text</div>
                        <div class="sds-listItem__textMeta sds-textHelper">helper text</div>
                    </div>

                    <div class="sds-listItem__rightContent">
                        <button type="button" class="sds-btn -btnSecondary">

                            <span class="sds-btn__text">Activer</span>

                        </button>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>
 
<div class="{{ namespace }}box -insetLg{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	{% render "@snet-actions-list",{heading: "List item 1",classes: ["-isListItem"]},true %}
	{% render "@snet-actions-list",{heading: "List item 2",classes: ["-isListItem"]},true %}
</div>