Section Item Timeline

Use this wrapper for any section item elements that have to appear as if in a timeline but are not separated by standard timeline blocks. This crops first and last items' "thread".

<div class="sds-sectionItemTimeline">
    <div class="sds-sectionItem -isTimelineItem -hasNotif">
        <div class="sds-sectionItem__inner">
            <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 -secondary10" aria-hidden="true">

                        <img src="../../media/snet/svg-icons/22x/icon-comm-administration.svg" alt="">

                    </span>

                </div>
            </div>
            <div class="sds-sectionItem__innerCol -grow -content">
                <div>
                    <p>S-Payconiq devient partie intégrante de S-Net !</p>

                </div>
            </div>
            <div class="sds-sectionItem__innerCol">
                <div class="sds-sectionItem__textMeta sds-textHelper">
                    <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost">

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

                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="sds-sectionItem -isTimelineItem -hasNotif">
        <div class="sds-sectionItem__inner">
            <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 -secondary10" aria-hidden="true">

                        <img src="../../media/snet/svg-icons/22x/icon-comm-administration.svg" alt="">

                    </span>

                </div>
            </div>
            <div class="sds-sectionItem__innerCol -grow -content">
                <div>
                    <p><b>Découvrez les avantages Miles & More !</b><br>
                        Avec S-Net vous pouvez profiter d’avantages lors de vos voyages business.</p>

                    <div class="sds-borderedImage">
                        <img src="https:/design.spuerkeess.lu/media/illustrations/svg750x560/hero/sdsillu-lifepackagestudent.svg" class="img-fluid">
                    </div>

                </div>
            </div>
            <div class="sds-sectionItem__innerCol">
                <div class="sds-sectionItem__textMeta sds-textHelper">
                    <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost">

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

                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="sds-sectionItem -isTimelineItem">
        <div class="sds-sectionItem__inner">
            <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 -secondary10" aria-hidden="true">

                        <img src="../../media/snet/svg-icons/22x/icon-comm-administration.svg" alt="">

                    </span>

                </div>
            </div>
            <div class="sds-sectionItem__innerCol -grow -content">
                <div>
                    <p><b>Attention !</b> SMS de Phishing en circulation.</p>

                </div>
            </div>
            <div class="sds-sectionItem__innerCol">
                <div class="sds-sectionItem__textMeta sds-textHelper">
                    <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost">

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

                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="sds-sectionItem -isTimelineItem">
        <div class="sds-sectionItem__inner">
            <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 -secondary10" aria-hidden="true">

                        <img src="../../media/snet/svg-icons/22x/icon-comm-administration.svg" alt="">

                    </span>

                </div>
            </div>
            <div class="sds-sectionItem__innerCol -grow -content">
                <div>
                    <p><b>Menu S-Net ‘Instruments Financiers’ indisponible</b> temporairement le 12.03.2022</p>

                </div>
            </div>
            <div class="sds-sectionItem__innerCol">
                <div class="sds-sectionItem__textMeta sds-textHelper">
                    <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost">

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

                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="sds-sectionItem -isTimelineItem">
        <div class="sds-sectionItem__inner">
            <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 -secondary10" aria-hidden="true">

                        <img src="../../media/snet/svg-icons/22x/icon-comm-administration.svg" alt="">

                    </span>

                </div>
            </div>
            <div class="sds-sectionItem__innerCol -grow -content">
                <div>
                    <p>La <b>tarification</b> pour certains services bancaires changera <b>à partir du 1er Mars 2022</b></p>

                </div>
            </div>
            <div class="sds-sectionItem__innerCol">
                <div class="sds-sectionItem__textMeta sds-textHelper">
                    <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost">

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

                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="sds-sectionItem -isTimelineItem">
        <div class="sds-sectionItem__inner">
            <div class="sds-sectionItem__innerCol -date"></div>
            <div class="sds-sectionItem__innerCol -dot">
                <div class="sds-sectionItem__dotWrapper">
                    <button type="button" class="sds-btn -btnSecondary">

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

                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="{{ namespace }}sectionItemTimeline">
	{% render "@snet-section-item--newscenter",{
		text: "S-Payconiq devient partie intégrante de S-Net !",
		classes: ["-hasNotif"],
		sectionItemIconCircleOptions: {
			icon: false,
			img: "/snet/svg-icons/22x/icon-comm-administration.svg"
		}
	},true %}
	{% render "@snet-section-item--newscenter",{
		text: "<b>Découvrez les avantages Miles & More !</b><br>
					Avec S-Net vous pouvez profiter d’avantages lors de vos voyages business.",
		img:true,
		sectionItemIconCircleOptions: {
			icon: false,
			img: "/snet/svg-icons/22x/icon-comm-administration.svg"
		},
		classes: ["-hasNotif"]
	},true %}
	{% render "@snet-section-item--newscenter",{
		text: "<b>Attention !</b> SMS de Phishing en circulation.",
		sectionItemIconCircleOptions: {
			icon: false,
			img: "/snet/svg-icons/22x/icon-comm-administration.svg"
		}
	},true %}
	{% render "@snet-section-item--newscenter",{
		text: "<b>Menu S-Net ‘Instruments Financiers’ indisponible</b> temporairement le 12.03.2022",
		sectionItemIconCircleOptions: {
			icon: false,
			img: "/snet/svg-icons/22x/icon-comm-administration.svg"
		}
	},true %}
	{% render "@snet-section-item--newscenter",{
		text: "La <b>tarification</b> pour certains services bancaires changera <b>à partir du 1er Mars 2022</b>",
		sectionItemIconCircleOptions: {
			icon: false,
			img: "/snet/svg-icons/22x/icon-comm-administration.svg"
		}
	},true %}
    {% render "@snet-section-item--newscenter-btn" %}
</div>