Digital Signage Formations

No notes defined.

<div class="sds-digitalSignage d-flex flex-column -portraitFormations">
    <header class="sds-digitalSignage__header">
        <div class="row align-items-center justify-content-between">
            <div class="col">
                <svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_1072_101)">
                        <path d="M90 0H0V90H90V0Z" fill="#DE0000" />
                        <path d="M61.38 35.6399V22.4099L54.72 9.17993L48.06 22.4099V35.6399H51.48V23.2199L54.72 16.5599L58.05 23.2199V35.6399H61.38Z" fill="white" />
                        <path d="M72.09 39.8699H18.09V43.3799H72.09V39.8699Z" fill="white" />
                        <path d="M71.91 50.3099C66.06 50.3099 61.38 54.9899 61.38 60.8399V81.8099C60.3 80.1899 59.13 78.4799 57.87 76.9499V60.8399C57.87 53.0999 64.08 46.7999 71.91 46.7999V50.3099Z" fill="white" />
                        <path d="M52.11 53.8199C52.11 49.9499 48.96 46.7999 45 46.7999C41.04 46.7999 37.98 49.9499 37.98 53.8199V61.1999C39.15 61.6499 40.32 62.1899 41.49 62.8199V53.8199C41.49 51.9299 43.02 50.3099 45 50.3099C46.89 50.3099 48.51 51.8399 48.51 53.8199V67.0499L52.02 69.7499L52.11 53.8199Z" fill="white" />
                        <path d="M25.02 46.7999C28.98 46.7999 32.13 49.9499 32.13 53.8199H32.04V59.8499C30.87 59.4899 29.7 59.1299 28.53 58.8599V53.8199C28.53 51.8399 26.91 50.3099 25.02 50.3099C23.04 50.3099 21.51 51.9299 21.51 53.8199V57.5999L18 57.3299V53.8199C18 49.9499 21.06 46.7999 25.02 46.7999Z" fill="white" />
                    </g>
                    <defs>
                        <clipPath id="clip0_1072_101">
                            <rect width="90" height="90" fill="white" />
                        </clipPath>
                    </defs>
                </svg>
            </div>
            <div class="col-auto">
                <div class="sds-headingColor sds-digitalSignage__text11xl5">
                    08:10
                </div>
            </div>
        </div>

        <div class="sds-digitalSignage__headerBottom">
            <div class="h-pageCover">Aujourd'hui</div>
        </div>

    </header>
    <main class="sds-digitalSignage__main flex-grow-1">

        <div class="d-flex flex-grow no-bottom-gutter-1 align-items-center">
            <div class="sds-slider w-100">
                <div class="sds-slider__inner swiper" id="digitalSignageFormations" data-visible-slides="5" data-delay="5000" data-speed="1250">
                    <ul class="swiper-wrapper list-unstyled">

                        <li class="swiper-slide">
                            <div class="sds-box -insetLg sds-scaleInteraction">
                                <div class="row no-bottom-gutter h-100">
                                    <div class="col-12 col-md-8">
                                        <div class="sds-stackXxl h-100 d-flex flex-column justify-content-between">
                                            <div class="sds-staticStackXs">
                                                <div class="sds-metaColor">Formation</div>
                                                <div class="h2 sds-textEllipsisSm">Réussir une présentation efficace et impactante</div>
                                            </div>
                                            <div class="row no-bottom-gutter row-double-gutter col-separator">
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Horaire

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            08h00 - 12h00 &middot; 12h30 - 18h00
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Formateur(s) - organisme

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            Orsys
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <div class="sds-staticStackSm">
                                            <div class="sds-box -boxSunken -insetLg text-center">
                                                <div class="sds-textSemiBold sds-bodyXl">
                                                    Salle
                                                </div>
                                                <h1 class="h1">
                                                    08

                                                </h1>

                                            </div>
                                            <div class="sds-badge badge -badgeSuccess -badgeMuted -badgeBlock text-center -badgeLg">

                                                en cours
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="swiper-slide">
                            <div class="sds-box -insetLg sds-scaleInteraction">
                                <div class="row no-bottom-gutter h-100">
                                    <div class="col-12 col-md-8">
                                        <div class="sds-stackXxl h-100 d-flex flex-column justify-content-between">
                                            <div class="sds-staticStackXs">
                                                <div class="sds-metaColor">Formation</div>
                                                <div class="h2 sds-textEllipsisSm">Dashboard Design</div>
                                            </div>
                                            <div class="row no-bottom-gutter row no-bottom-gutter-double-gutter col-separator">
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Horaire

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            09h00 - 12h00 &middot; 12h30 - 18h00
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Formateur(s) - organisme

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            Orsys
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <div class="sds-alertBanner sds-staticInlineMd  -alertDanger text-center h-100">

                                            <div class="sds-alertBanner__text sds-staticStackXxs">

                                                <h4 class="h4 sds-colorInherit">
                                                    annulé

                                                </h4>

                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="swiper-slide">
                            <div class="sds-box -insetLg sds-scaleInteraction">
                                <div class="row no-bottom-gutter h-100">
                                    <div class="col-12 col-md-8">
                                        <div class="sds-stackXxl h-100 d-flex flex-column justify-content-between">
                                            <div class="sds-staticStackXs">
                                                <div class="sds-metaColor">Réunion</div>
                                                <div class="h2 sds-textEllipsisSm">Mise en place du Knowledge Management - Organisation Process & Project Governance</div>
                                            </div>
                                            <div class="row no-bottom-gutter row no-bottom-gutter-double-gutter col-separator">
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Horaire

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            08h00 - 12h00
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Service - organisme

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            SGE
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <div class="sds-staticStackSm">
                                            <div class="sds-box -boxSunken -insetLg text-center">
                                                <div class="sds-textSemiBold sds-bodyXl">
                                                    Salle
                                                </div>
                                                <h1 class="h1">
                                                    05

                                                </h1>

                                            </div>
                                            <div class="sds-badge badge -badgeWarning -badgeMuted -badgeBlock text-center -badgeLg">

                                                dans 1h et 20min
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="swiper-slide">
                            <div class="sds-box -insetLg sds-scaleInteraction">
                                <div class="row no-bottom-gutter h-100">
                                    <div class="col-12 col-md-8">
                                        <div class="sds-stackXxl h-100 d-flex flex-column justify-content-between">
                                            <div class="sds-staticStackXs">
                                                <div class="sds-metaColor">Formation</div>
                                                <div class="h2 sds-textEllipsisSm">Organisation Process & Project Governance</div>
                                            </div>
                                            <div class="row no-bottom-gutter row no-bottom-gutter-double-gutter col-separator">
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Horaire

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            08h00 - 12h00 &middot; 12h30 - 18h00
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Formateur(s) - organisme

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            Orsys
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <div class="sds-staticStackSm">
                                            <div class="sds-box -boxSunken -insetLg text-center">
                                                <div class="sds-textSemiBold sds-bodyXl">
                                                    Salle
                                                </div>
                                                <h1 class="h1">
                                                    05

                                                </h1>

                                            </div>
                                            <div class="sds-badge badge -badgeInfo -badgeMuted -badgeBlock text-center -badgeLg">

                                                dans 1h et 20min
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li class="swiper-slide">
                            <div class="sds-box -insetLg sds-scaleInteraction">
                                <div class="row no-bottom-gutter h-100">
                                    <div class="col-12 col-md-8">
                                        <div class="sds-stackXxl h-100 d-flex flex-column justify-content-between">
                                            <div class="sds-staticStackXs">
                                                <div class="sds-metaColor">Formation</div>
                                                <div class="h2 sds-textEllipsisSm">Réussir une présentation efficace et impactante</div>
                                            </div>
                                            <div class="row no-bottom-gutter row-double-gutter col-separator">
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Horaire

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            08h00 - 12h00 &middot; 12h30 - 18h00
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Formateur(s) - organisme

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            Orsys
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <div class="sds-staticStackSm">
                                            <div class="sds-box -boxSunken -insetLg text-center">
                                                <div class="sds-textSemiBold sds-bodyXl">
                                                    Salle
                                                </div>
                                                <h1 class="h1">
                                                    08

                                                </h1>

                                            </div>
                                            <div class="sds-badge badge -badgeSuccess -badgeMuted -badgeBlock text-center -badgeLg">

                                                en cours
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="swiper-slide">
                            <div class="sds-box -insetLg sds-scaleInteraction">
                                <div class="row no-bottom-gutter h-100">
                                    <div class="col-12 col-md-8">
                                        <div class="sds-stackXxl h-100 d-flex flex-column justify-content-between">
                                            <div class="sds-staticStackXs">
                                                <div class="sds-metaColor">Formation</div>
                                                <div class="h2 sds-textEllipsisSm">Dashboard Design</div>
                                            </div>
                                            <div class="row no-bottom-gutter row no-bottom-gutter-double-gutter col-separator">
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Horaire

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            09h00 - 12h00 &middot; 12h30 - 18h00
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Formateur(s) - organisme

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            Orsys
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <div class="sds-alertBanner sds-staticInlineMd  -alertDanger text-center h-100">

                                            <div class="sds-alertBanner__text sds-staticStackXxs">

                                                <h4 class="h4 sds-colorInherit">
                                                    annulé

                                                </h4>

                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="swiper-slide">
                            <div class="sds-box -insetLg sds-scaleInteraction">
                                <div class="row no-bottom-gutter h-100">
                                    <div class="col-12 col-md-8">
                                        <div class="sds-stackXxl h-100 d-flex flex-column justify-content-between">
                                            <div class="sds-staticStackXs">
                                                <div class="sds-metaColor">Réunion</div>
                                                <div class="h2 sds-textEllipsisSm">Mise en place du Knowledge Management - Organisation Process & Project Governance</div>
                                            </div>
                                            <div class="row no-bottom-gutter row no-bottom-gutter-double-gutter col-separator">
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Horaire

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            08h00 - 12h00
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Service - organisme

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            SGE
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <div class="sds-staticStackSm">
                                            <div class="sds-box -boxSunken -insetLg text-center">
                                                <div class="sds-textSemiBold sds-bodyXl">
                                                    Salle
                                                </div>
                                                <h1 class="h1">
                                                    05

                                                </h1>

                                            </div>
                                            <div class="sds-badge badge -badgeWarning -badgeMuted -badgeBlock text-center -badgeLg">

                                                dans 1h et 20min
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="swiper-slide">
                            <div class="sds-box -insetLg sds-scaleInteraction">
                                <div class="row no-bottom-gutter h-100">
                                    <div class="col-12 col-md-8">
                                        <div class="sds-stackXxl h-100 d-flex flex-column justify-content-between">
                                            <div class="sds-staticStackXs">
                                                <div class="sds-metaColor">Formation</div>
                                                <div class="h2 sds-textEllipsisSm">Organisation Process & Project Governance</div>
                                            </div>
                                            <div class="row no-bottom-gutter row no-bottom-gutter-double-gutter col-separator">
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Horaire

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            08h00 - 12h00 &middot; 12h30 - 18h00
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Formateur(s) - organisme

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            Orsys
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <div class="sds-staticStackSm">
                                            <div class="sds-box -boxSunken -insetLg text-center">
                                                <div class="sds-textSemiBold sds-bodyXl">
                                                    Salle
                                                </div>
                                                <h1 class="h1">
                                                    05

                                                </h1>

                                            </div>
                                            <div class="sds-badge badge -badgeInfo -badgeMuted -badgeBlock text-center -badgeLg">

                                                dans 1h et 20min
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li class="swiper-slide">
                            <div class="sds-box -insetLg sds-scaleInteraction">
                                <div class="row no-bottom-gutter h-100">
                                    <div class="col-12 col-md-8">
                                        <div class="sds-stackXxl h-100 d-flex flex-column justify-content-between">
                                            <div class="sds-staticStackXs">
                                                <div class="sds-metaColor">Formation</div>
                                                <div class="h2 sds-textEllipsisSm">Réussir une présentation efficace et impactante</div>
                                            </div>
                                            <div class="row no-bottom-gutter row-double-gutter col-separator">
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Horaire

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            08h00 - 12h00 &middot; 12h30 - 18h00
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Formateur(s) - organisme

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            Orsys
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <div class="sds-staticStackSm">
                                            <div class="sds-box -boxSunken -insetLg text-center">
                                                <div class="sds-textSemiBold sds-bodyXl">
                                                    Salle
                                                </div>
                                                <h1 class="h1">
                                                    08

                                                </h1>

                                            </div>
                                            <div class="sds-badge badge -badgeSuccess -badgeMuted -badgeBlock text-center -badgeLg">

                                                en cours
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="swiper-slide">
                            <div class="sds-box -insetLg sds-scaleInteraction">
                                <div class="row no-bottom-gutter h-100">
                                    <div class="col-12 col-md-8">
                                        <div class="sds-stackXxl h-100 d-flex flex-column justify-content-between">
                                            <div class="sds-staticStackXs">
                                                <div class="sds-metaColor">Formation</div>
                                                <div class="h2 sds-textEllipsisSm">Dashboard Design</div>
                                            </div>
                                            <div class="row no-bottom-gutter row no-bottom-gutter-double-gutter col-separator">
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Horaire

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            09h00 - 12h00 &middot; 12h30 - 18h00
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Formateur(s) - organisme

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            Orsys
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <div class="sds-alertBanner sds-staticInlineMd  -alertDanger text-center h-100">

                                            <div class="sds-alertBanner__text sds-staticStackXxs">

                                                <h4 class="h4 sds-colorInherit">
                                                    annulé

                                                </h4>

                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="swiper-slide">
                            <div class="sds-box -insetLg sds-scaleInteraction">
                                <div class="row no-bottom-gutter h-100">
                                    <div class="col-12 col-md-8">
                                        <div class="sds-stackXxl h-100 d-flex flex-column justify-content-between">
                                            <div class="sds-staticStackXs">
                                                <div class="sds-metaColor">Réunion</div>
                                                <div class="h2 sds-textEllipsisSm">Mise en place du Knowledge Management - Organisation Process & Project Governance</div>
                                            </div>
                                            <div class="row no-bottom-gutter row no-bottom-gutter-double-gutter col-separator">
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Horaire

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            08h00 - 12h00
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Service - organisme

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            SGE
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <div class="sds-staticStackSm">
                                            <div class="sds-box -boxSunken -insetLg text-center">
                                                <div class="sds-textSemiBold sds-bodyXl">
                                                    Salle
                                                </div>
                                                <h1 class="h1">
                                                    05

                                                </h1>

                                            </div>
                                            <div class="sds-badge badge -badgeWarning -badgeMuted -badgeBlock text-center -badgeLg">

                                                dans 1h et 20min
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="swiper-slide">
                            <div class="sds-box -insetLg sds-scaleInteraction">
                                <div class="row no-bottom-gutter h-100">
                                    <div class="col-12 col-md-8">
                                        <div class="sds-stackXxl h-100 d-flex flex-column justify-content-between">
                                            <div class="sds-staticStackXs">
                                                <div class="sds-metaColor">Formation</div>
                                                <div class="h2 sds-textEllipsisSm">Organisation Process & Project Governance</div>
                                            </div>
                                            <div class="row no-bottom-gutter row no-bottom-gutter-double-gutter col-separator">
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Horaire

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            08h00 - 12h00 &middot; 12h30 - 18h00
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Formateur(s) - organisme

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            Orsys
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <div class="sds-staticStackSm">
                                            <div class="sds-box -boxSunken -insetLg text-center">
                                                <div class="sds-textSemiBold sds-bodyXl">
                                                    Salle
                                                </div>
                                                <h1 class="h1">
                                                    05

                                                </h1>

                                            </div>
                                            <div class="sds-badge badge -badgeInfo -badgeMuted -badgeBlock text-center -badgeLg">

                                                dans 1h et 20min
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li class="swiper-slide">
                            <div class="sds-box -insetLg sds-scaleInteraction">
                                <div class="row no-bottom-gutter h-100">
                                    <div class="col-12 col-md-8">
                                        <div class="sds-stackXxl h-100 d-flex flex-column justify-content-between">
                                            <div class="sds-staticStackXs">
                                                <div class="sds-metaColor">Formation</div>
                                                <div class="h2 sds-textEllipsisSm">Réussir une présentation efficace et impactante</div>
                                            </div>
                                            <div class="row no-bottom-gutter row-double-gutter col-separator">
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Horaire

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            08h00 - 12h00 &middot; 12h30 - 18h00
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Formateur(s) - organisme

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            Orsys
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <div class="sds-staticStackSm">
                                            <div class="sds-box -boxSunken -insetLg text-center">
                                                <div class="sds-textSemiBold sds-bodyXl">
                                                    Salle
                                                </div>
                                                <h1 class="h1">
                                                    08

                                                </h1>

                                            </div>
                                            <div class="sds-badge badge -badgeSuccess -badgeMuted -badgeBlock text-center -badgeLg">

                                                en cours
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="swiper-slide">
                            <div class="sds-box -insetLg sds-scaleInteraction">
                                <div class="row no-bottom-gutter h-100">
                                    <div class="col-12 col-md-8">
                                        <div class="sds-stackXxl h-100 d-flex flex-column justify-content-between">
                                            <div class="sds-staticStackXs">
                                                <div class="sds-metaColor">Formation</div>
                                                <div class="h2 sds-textEllipsisSm">Dashboard Design</div>
                                            </div>
                                            <div class="row no-bottom-gutter row no-bottom-gutter-double-gutter col-separator">
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Horaire

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            09h00 - 12h00 &middot; 12h30 - 18h00
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Formateur(s) - organisme

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            Orsys
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <div class="sds-alertBanner sds-staticInlineMd  -alertDanger text-center h-100">

                                            <div class="sds-alertBanner__text sds-staticStackXxs">

                                                <h4 class="h4 sds-colorInherit">
                                                    annulé

                                                </h4>

                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="swiper-slide">
                            <div class="sds-box -insetLg sds-scaleInteraction">
                                <div class="row no-bottom-gutter h-100">
                                    <div class="col-12 col-md-8">
                                        <div class="sds-stackXxl h-100 d-flex flex-column justify-content-between">
                                            <div class="sds-staticStackXs">
                                                <div class="sds-metaColor">Réunion</div>
                                                <div class="h2 sds-textEllipsisSm">Mise en place du Knowledge Management - Organisation Process & Project Governance</div>
                                            </div>
                                            <div class="row no-bottom-gutter row no-bottom-gutter-double-gutter col-separator">
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Horaire

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            08h00 - 12h00
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Service - organisme

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            SGE
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <div class="sds-staticStackSm">
                                            <div class="sds-box -boxSunken -insetLg text-center">
                                                <div class="sds-textSemiBold sds-bodyXl">
                                                    Salle
                                                </div>
                                                <h1 class="h1">
                                                    05

                                                </h1>

                                            </div>
                                            <div class="sds-badge badge -badgeWarning -badgeMuted -badgeBlock text-center -badgeLg">

                                                dans 1h et 20min
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="swiper-slide">
                            <div class="sds-box -insetLg sds-scaleInteraction">
                                <div class="row no-bottom-gutter h-100">
                                    <div class="col-12 col-md-8">
                                        <div class="sds-stackXxl h-100 d-flex flex-column justify-content-between">
                                            <div class="sds-staticStackXs">
                                                <div class="sds-metaColor">Formation</div>
                                                <div class="h2 sds-textEllipsisSm">Organisation Process & Project Governance</div>
                                            </div>
                                            <div class="row no-bottom-gutter row no-bottom-gutter-double-gutter col-separator">
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Horaire

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            08h00 - 12h00 &middot; 12h30 - 18h00
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12 col-sm-6">
                                                    <div class="sds-stackXxs">
                                                        <div class="sds-label">
                                                            Formateur(s) - organisme

                                                        </div>
                                                        <div class="sds-textSemiBold sds-bodyXl">
                                                            Orsys
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <div class="sds-staticStackSm">
                                            <div class="sds-box -boxSunken -insetLg text-center">
                                                <div class="sds-textSemiBold sds-bodyXl">
                                                    Salle
                                                </div>
                                                <h1 class="h1">
                                                    05

                                                </h1>

                                            </div>
                                            <div class="sds-badge badge -badgeInfo -badgeMuted -badgeBlock text-center -badgeLg">

                                                dans 1h et 20min
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>

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

    </main>
    <footer class="sds-digitalSignage__footer position-sticky sds-headingColor">
        <div class="row justify-content-between flex-nowrap no-bottom-gutter">
            <div class="sds-digitalSignage__footerUrl col sds-digitalSignage__text11xl5 d-flex">
                <span class="sds-fontHeadingLight text-uppercase">SPUERKEESS.LU/</span>
                <span class="sds-fontHeadingBold">extension</span>
            </div>
            <div class="col d-flex justify-content-end">

            </div>

            <div class="col-auto text-right">
                <div class="sds-digitalSignage__text11xl5">
                    <div class="swiper-pagination"></div>
                </div>
            </div>

        </div>
    </footer>
</div>
{% extends "@spk-digital-signage-portrait-layout" %}
{% block headerBottom %}
<div class="{{ namespace }}digitalSignage__headerBottom">
	<div class="h-pageCover">Aujourd'hui</div>
</div>
{% endblock %}
{% block main %}
	<div class="d-flex flex-grow no-bottom-gutter-1 align-items-center">
		<div class="{{ namespace }}slider w-100">
			<div class="{{ namespace }}slider__inner swiper" id="digitalSignageFormations" data-visible-slides="5" data-delay="5000" data-speed="1250">
				<ul class="swiper-wrapper list-unstyled">
				{% for i in range(0,4) %}
					<li class="swiper-slide">
						<div class="{{ namespace }}box -insetLg {{ namespace }}scaleInteraction">
							<div class="row no-bottom-gutter h-100">
								<div class="col-12 col-md-8">
									<div class="{{ namespace }}stackXxl h-100 d-flex flex-column justify-content-between">
										<div class="{{ namespace }}staticStackXs">
											<div class="{{ namespace }}metaColor">Formation</div>
											<div class="h2 {{ namespace }}textEllipsisSm">Réussir une présentation efficace et impactante</div>
										</div>
										<div class="row no-bottom-gutter row-double-gutter col-separator">
											<div class="col-12 col-sm-6">
												<div class="{{ namespace }}stackXxs">
													{% render "@label--div",{
														text: "Horaire"
													},true %}
													<div class="{{ namespace }}textSemiBold {{ namespace }}bodyXl">
														08h00 - 12h00 &middot; 12h30 - 18h00
													</div>
												</div>
											</div>
											<div class="col-12 col-sm-6">
												<div class="{{ namespace }}stackXxs">
													{% render "@label--div",{
														text: "Formateur(s) - organisme"
													},true %}
													<div class="{{ namespace }}textSemiBold {{ namespace }}bodyXl">
														Orsys
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="col-12 col-md-4">
									<div class="{{ namespace }}staticStackSm">
										<div class="{{ namespace }}box -boxSunken -insetLg text-center">
											<div class="{{ namespace }}textSemiBold {{ namespace }}bodyXl">
												Salle
											</div>
											{% render "@heading--h1",{
												text: "08"
											},true %}
										</div>
										{% render "@badge--success-muted",{
											text: "en cours",
											classes: ["-badgeBlock", "text-center", "-badgeLg"]
										},true %}
									</div>
								</div>
							</div>
						</div>
					</li>
					<li class="swiper-slide">
						<div class="{{ namespace }}box -insetLg {{ namespace }}scaleInteraction">
							<div class="row no-bottom-gutter h-100">
								<div class="col-12 col-md-8">
									<div class="{{ namespace }}stackXxl h-100 d-flex flex-column justify-content-between">
										<div class="{{ namespace }}staticStackXs">
											<div class="{{ namespace }}metaColor">Formation</div>
											<div class="h2 {{ namespace }}textEllipsisSm">Dashboard Design</div>
										</div>
										<div class="row no-bottom-gutter row no-bottom-gutter-double-gutter col-separator">
											<div class="col-12 col-sm-6">
												<div class="{{ namespace }}stackXxs">
													{% render "@label--div",{
														text: "Horaire"
													},true %}
													<div class="{{ namespace }}textSemiBold {{ namespace }}bodyXl">
														09h00 - 12h00 &middot; 12h30 - 18h00
													</div>
												</div>
											</div>
											<div class="col-12 col-sm-6">
												<div class="{{ namespace }}stackXxs">
													{% render "@label--div",{
														text: "Formateur(s) - organisme"
													},true %}
													<div class="{{ namespace }}textSemiBold {{ namespace }}bodyXl">
														Orsys
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="col-12 col-md-4">
									{% render "@alert-banner--danger",{
										classes: ["text-center","h-100"],
										heading: "annulé",
										icon: false,
										description: false,
										link: false,
										close: false
									},true %}
								</div>
							</div>
						</div>
					</li>
					<li class="swiper-slide">
						<div class="{{ namespace }}box -insetLg {{ namespace }}scaleInteraction">
							<div class="row no-bottom-gutter h-100">
								<div class="col-12 col-md-8">
									<div class="{{ namespace }}stackXxl h-100 d-flex flex-column justify-content-between">
										<div class="{{ namespace }}staticStackXs">
											<div class="{{ namespace }}metaColor">Réunion</div>
											<div class="h2 {{ namespace }}textEllipsisSm">Mise en place du Knowledge Management - Organisation Process & Project Governance</div>
										</div>
										<div class="row no-bottom-gutter row no-bottom-gutter-double-gutter col-separator">
											<div class="col-12 col-sm-6">
												<div class="{{ namespace }}stackXxs">
													{% render "@label--div",{
														text: "Horaire"
													},true %}
													<div class="{{ namespace }}textSemiBold {{ namespace }}bodyXl">
														08h00 - 12h00
													</div>
												</div>
											</div>
											<div class="col-12 col-sm-6">
												<div class="{{ namespace }}stackXxs">
													{% render "@label--div",{
														text: "Service - organisme"
													},true %}
													<div class="{{ namespace }}textSemiBold {{ namespace }}bodyXl">
														SGE
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="col-12 col-md-4">
									<div class="{{ namespace }}staticStackSm">
										<div class="{{ namespace }}box -boxSunken -insetLg text-center">
											<div class="{{ namespace }}textSemiBold {{ namespace }}bodyXl">
												Salle
											</div>
											{% render "@heading--h1",{
												text: "05"
											},true %}
										</div>
										{% render "@badge--warning-muted",{
											text: "dans 1h et 20min",
											classes: ["-badgeBlock", "text-center", "-badgeLg"]
										},true %}
									</div>
								</div>
							</div>
						</div>
					</li>
					<li class="swiper-slide">
						<div class="{{ namespace }}box -insetLg {{ namespace }}scaleInteraction">
							<div class="row no-bottom-gutter h-100">
								<div class="col-12 col-md-8">
									<div class="{{ namespace }}stackXxl h-100 d-flex flex-column justify-content-between">
										<div class="{{ namespace }}staticStackXs">
											<div class="{{ namespace }}metaColor">Formation</div>
											<div class="h2 {{ namespace }}textEllipsisSm">Organisation Process & Project Governance</div>
										</div>
										<div class="row no-bottom-gutter row no-bottom-gutter-double-gutter col-separator">
											<div class="col-12 col-sm-6">
												<div class="{{ namespace }}stackXxs">
													{% render "@label--div",{
														text: "Horaire"
													},true %}
													<div class="{{ namespace }}textSemiBold {{ namespace }}bodyXl">
														08h00 - 12h00 &middot; 12h30 - 18h00
													</div>
												</div>
											</div>
											<div class="col-12 col-sm-6">
												<div class="{{ namespace }}stackXxs">
													{% render "@label--div",{
														text: "Formateur(s) - organisme"
													},true %}
													<div class="{{ namespace }}textSemiBold {{ namespace }}bodyXl">
														Orsys
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="col-12 col-md-4">
									<div class="{{ namespace }}staticStackSm">
										<div class="{{ namespace }}box -boxSunken -insetLg text-center">
											<div class="{{ namespace }}textSemiBold {{ namespace }}bodyXl">
												Salle
											</div>
											{% render "@heading--h1",{
												text: "05"
											},true %}
										</div>
										{% render "@badge--info-muted",{
											text: "dans 1h et 20min",
											classes: ["-badgeBlock", "text-center", "-badgeLg"]
										},true %}
									</div>
								</div>
							</div>
						</div>
					</li>
				{% endfor %}
				</ul>
			</div>
		</div>
	</div>
{% endblock %}
  • Content:
    import Swiper from "swiper/bundle";
    
    export default class DigitalSignageFormations {
    
        constructor() {
    
            this.swiperGroupGlide();
    
        }
    
    	swiperGroupGlide() {
    
    		let swiperElt = document.querySelector("#digitalSignageFormations");
    
    		let visibleSlides 	= swiperElt.dataset.visibleSlides,
    			delay 			= swiperElt.dataset.delay,
    			speed 			= swiperElt.dataset.speed,
    			spacing 		= window.getComputedStyle(document.body).getPropertyValue('--sys-space-stack-1000');
    
    		const swiper = new Swiper('#digitalSignageFormations', {
    			// Optional parameters
    			direction: 'vertical',
    			keyboard: true,
    			freeMode: false,
    			spaceBetween: parseInt(spacing, 10),
    			slidesPerView: visibleSlides,
    			slidesPerGroup: parseInt(visibleSlides),
    			speed: speed,
    			pagination: {
    				el: ".swiper-pagination",
    				type: "fraction",
    			},
    			autoplay: {
    				delay: delay,
    				disableOnInteraction: false,
    			},
    			on: {
    				init: function () {
    					this.el.style.height = (((this.slides[0].clientHeight + this.passedParams.spaceBetween)) * visibleSlides) - (this.passedParams.spaceBetween) + "px"
    				}
    			}
    		});
    
        }
    
    }
  • URL: /components/raw/spk-digital-signage-formations/DigitalSignageFormations.js
  • Filesystem Path: components/spuerkeess-site/pages/digital-signage/digital-signage-formations/DigitalSignageFormations.js
  • Size: 1.1 KB