GDL - Global Design Language

Items: Grid Medium 

<div class="l-grid l-grid--medium">

    <article class="c-story  c-story--stack l-grid__item  " data-grid-position="" data-channel="">

        <div class="c-story__media ">
            <figure class="o-skeleton o-skeleton-media--responsive u-relative">

                <a class="u-block u-size-full u-absolute u-left u-top" href="#">
                    <picture>

                        <source srcset="https://citynews-today.stgy.ovh/~media/horizontal-mid/51380415156697/coronavirus-ansa-4-2-2.jpg" media="(min-width: 740px)">
                        <img class="u-size-full" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://citynews-today.stgy.ovh/~media/vertical-hi/51380415156697/coronavirus-ansa-4-2-2.jpg" alt="Coronavirus, la fase 2 tra sicurezza e libertà: tutte le idee per ripartire">

                    </picture>

                </a>
            </figure>

        </div>

        <div class="c-story__content u-relative">

            <header class="c-story__header ">

                <div class="c-story__kicker u-mb-xsmall">

                    <span class="u-label-02 ">Emergenza Coronavirus</span>

                </div>

                <a class="o-link-text" href="#">
                    <h1 class="
         
        
        c-story__heading 
        u-heading-04
         
        u-m-none">Coronavirus, la fase 2 tra sicurezza e libertà: tutte le idee per ripartire</h1>
                </a>

            </header>

            <p class="
           
           
           
          c-story__summary u-mb-none  
          u-body-03">&quot;Ieri ci sono stati più di 500 morti e i casi totali sono ancora tanti&quot;, dice Giovanni Rezza, direttore del Dipartimento malattie infettive. La richiesta della regione Lombardia di riaprire le attività produttive il 4 maggio ha preso in contropiede il governo</p>

        </div>

    </article>

    <article class="c-story  c-story--stack l-grid__item  " data-grid-position="" data-channel="">

        <div class="c-story__media ">
            <figure class="o-skeleton o-skeleton-media--responsive u-relative">

                <a class="u-block u-size-full u-absolute u-left u-top" href="#">
                    <picture>

                        <source srcset="https://citynews-today.stgy.ovh/~media/horizontal-mid/19878683460037/casa-di-riposo-palermo-ansa-2.jpg" media="(min-width: 740px)">
                        <img class="u-size-full" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://citynews-today.stgy.ovh/~media/vertical-hi/19878683460037/casa-di-riposo-palermo-ansa-2.jpg" alt="Casa di riposo degli orrori: anziani legati e bastonati. Le immagini shock">

                    </picture>

                </a>
            </figure>

        </div>

        <div class="c-story__content u-relative">

            <header class="c-story__header ">

                <div class="c-story__kicker u-mb-xsmall">

                    <span class="u-label-02 ">Sei arresti</span>

                </div>

                <a class="o-link-text" href="#">
                    <h1 class="
         
        
        c-story__heading 
        u-heading-04
         
        u-m-none">Casa di riposo degli orrori: anziani legati e bastonati. Le immagini shock</h1>
                </a>

            </header>

            <p class="
           
           
           
          c-story__summary u-mb-none  
          u-body-03">&quot;Ieri ci sono stati più di 500 morti e i casi totali sono ancora tanti&quot;, dice Giovanni Rezza, direttore del Dipartimento malattie infettive. La richiesta della regione Lombardia di riaprire le attività produttive il 4 maggio ha preso in contropiede il governo</p>

        </div>

    </article>

    <article class="c-story  c-story--stack l-grid__item  " data-grid-position="" data-channel="">

        <div class="c-story__media ">
            <figure class="o-skeleton o-skeleton-media--responsive u-relative">

                <a class="u-block u-size-full u-absolute u-left u-top" href="#">
                    <picture>

                        <source srcset="https://citynews-today.stgy.ovh/~media/horizontal-mid/31908412136750/donald-trump-coronavirus-ansa-2.jpg" media="(min-width: 740px)">
                        <img class="u-size-full" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://citynews-today.stgy.ovh/~media/vertical-hi/31908412136750/donald-trump-coronavirus-ansa-2.jpg" alt="Coronavirus, negli Usa 2.500 morti in un giorno ma Trump &quot;ha fretta&quot; di riaprire">

                    </picture>

                </a>
            </figure>

        </div>

        <div class="c-story__content u-relative">

            <header class="c-story__header ">

                <div class="c-story__kicker u-mb-xsmall">

                    <span class="u-label-02 ">Esteri</span>

                </div>

                <a class="o-link-text" href="#">
                    <h1 class="
         
        
        c-story__heading 
        u-heading-04
         
        u-m-none">Coronavirus, negli Usa 2.500 morti in un giorno ma Trump &quot;ha fretta&quot; di riaprire</h1>
                </a>

            </header>

            <p class="
           
           
           
          c-story__summary u-mb-none  
          u-body-03">&quot;Ieri ci sono stati più di 500 morti e i casi totali sono ancora tanti&quot;, dice Giovanni Rezza, direttore del Dipartimento malattie infettive. La richiesta della regione Lombardia di riaprire le attività produttive il 4 maggio ha preso in contropiede il governo</p>

        </div>

    </article>

    <article class="c-story  c-story--stack l-grid__item  " data-grid-position="" data-channel="">

        <div class="c-story__media ">
            <figure class="o-skeleton o-skeleton-media--responsive u-relative">

                <a class="u-block u-size-full u-absolute u-left u-top" href="#">
                    <picture>

                        <source srcset="https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg" media="(min-width: 740px)">
                        <img class="u-size-full" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg" alt="Turismo e coronavirus, quali località più colpite nell&#39;estate 2020">

                    </picture>

                </a>
            </figure>

        </div>

        <div class="c-story__content u-relative">

            <header class="c-story__header ">

                <div class="c-story__kicker u-mb-xsmall">

                    <span class="u-label-02 ">Lo studio del Touring Club italiano</span>

                </div>

                <a class="o-link-text" href="#">
                    <h1 class="
         
        
        c-story__heading 
        u-heading-04
         
        u-m-none">Turismo e coronavirus, quali località più colpite nell&#39;estate 2020</h1>
                </a>

            </header>

            <p class="
           
           
           
          c-story__summary u-mb-none  
          u-body-03">Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c&#39;è stato nulla da fare</p>

        </div>

    </article>

    <article class="c-story  c-story--stack l-grid__item  " data-grid-position="" data-channel="">

        <div class="c-story__media ">
            <figure class="o-skeleton o-skeleton-media--responsive u-relative">

                <a class="u-block u-size-full u-absolute u-left u-top" href="#">
                    <picture>

                        <source srcset="https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg" media="(min-width: 740px)">
                        <img class="u-size-full" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg" alt="Turismo e coronavirus, quali località più colpite nell&#39;estate 2020">

                    </picture>

                </a>
            </figure>

        </div>

        <div class="c-story__content u-relative">

            <header class="c-story__header ">

                <div class="c-story__kicker u-mb-xsmall">

                    <span class="u-label-02 ">Lo studio del Touring Club italiano</span>

                </div>

                <a class="o-link-text" href="#">
                    <h1 class="
         
        
        c-story__heading 
        u-heading-04
         
        u-m-none">Turismo e coronavirus, quali località più colpite nell&#39;estate 2020</h1>
                </a>

            </header>

            <p class="
           
           
           
          c-story__summary u-mb-none  
          u-body-03">Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c&#39;è stato nulla da fare</p>

        </div>

    </article>

    <article class="c-story  c-story--stack l-grid__item  " data-grid-position="" data-channel="">

        <div class="c-story__media ">
            <figure class="o-skeleton o-skeleton-media--responsive u-relative">

                <a class="u-block u-size-full u-absolute u-left u-top" href="#">
                    <picture>

                        <source srcset="https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg" media="(min-width: 740px)">
                        <img class="u-size-full" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg" alt="Turismo e coronavirus, quali località più colpite nell&#39;estate 2020">

                    </picture>

                </a>
            </figure>

        </div>

        <div class="c-story__content u-relative">

            <header class="c-story__header ">

                <div class="c-story__kicker u-mb-xsmall">

                    <span class="u-label-02 ">Lo studio del Touring Club italiano</span>

                </div>

                <a class="o-link-text" href="#">
                    <h1 class="
         
        
        c-story__heading 
        u-heading-04
         
        u-m-none">Turismo e coronavirus, quali località più colpite nell&#39;estate 2020</h1>
                </a>

            </header>

            <p class="
           
           
           
          c-story__summary u-mb-none  
          u-body-03">Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c&#39;è stato nulla da fare</p>

        </div>

    </article>

    <article class="c-story  c-story--stack l-grid__item  " data-grid-position="" data-channel="">

        <div class="c-story__media ">
            <figure class="o-skeleton o-skeleton-media--responsive u-relative">

                <a class="u-block u-size-full u-absolute u-left u-top" href="#">
                    <picture>

                        <source srcset="https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg" media="(min-width: 740px)">
                        <img class="u-size-full" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg" alt="Turismo e coronavirus, quali località più colpite nell&#39;estate 2020">

                    </picture>

                </a>
            </figure>

        </div>

        <div class="c-story__content u-relative">

            <header class="c-story__header ">

                <div class="c-story__kicker u-mb-xsmall">

                    <span class="u-label-02 ">Lo studio del Touring Club italiano</span>

                </div>

                <a class="o-link-text" href="#">
                    <h1 class="
         
        
        c-story__heading 
        u-heading-04
         
        u-m-none">Turismo e coronavirus, quali località più colpite nell&#39;estate 2020</h1>
                </a>

            </header>

            <p class="
           
           
           
          c-story__summary u-mb-none  
          u-body-03">Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c&#39;è stato nulla da fare</p>

        </div>

    </article>

    <article class="c-story  c-story--stack l-grid__item  " data-grid-position="" data-channel="">

        <div class="c-story__media ">
            <figure class="o-skeleton o-skeleton-media--responsive u-relative">

                <a class="u-block u-size-full u-absolute u-left u-top" href="#">
                    <picture>

                        <source srcset="https://citynews-today.stgy.ovh/~media/horizontal-mid/65846868204321/pisicina-comunale-ansa-archivio-2.jpg" media="(min-width: 740px)">
                        <img class="u-size-full" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://citynews-today.stgy.ovh/~media/vertical-hi/65846868204321/pisicina-comunale-ansa-archivio-2.jpg" alt="Muore annegato nella piscina comunale il giorno prima di compiere 7 anni">

                    </picture>

                </a>
            </figure>

        </div>

        <div class="c-story__content u-relative">

            <header class="c-story__header ">

                <div class="c-story__kicker u-mb-xsmall">

                    <span class="u-label-02 ">Lo studio del Touring Club italiano</span>

                </div>

                <a class="o-link-text" href="#">
                    <h1 class="
         
        
        c-story__heading 
        u-heading-04
         
        u-m-none">Muore annegato nella piscina comunale il giorno prima di compiere 7 anni</h1>
                </a>

            </header>

            <p class="
           
           
           
          c-story__summary u-mb-none  
          u-body-03">Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c&#39;è stato nulla da fare</p>

        </div>

    </article>

    <article class="c-story  c-story--stack l-grid__item  " data-grid-position="" data-channel="">

        <div class="c-story__media ">
            <figure class="o-skeleton o-skeleton-media--responsive u-relative">

                <a class="u-block u-size-full u-absolute u-left u-top" href="#">
                    <picture>

                        <source srcset="https://citynews-today.stgy.ovh/~media/horizontal-mid/56625536121153/evasione-fiscale-controlli-finanza-ansa-2.jpg" media="(min-width: 740px)">
                        <img class="u-size-full" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://citynews-today.stgy.ovh/~media/vertical-hi/56625536121153/evasione-fiscale-controlli-finanza-ansa-2.jpg" alt="Riceve il reddito di cittadinanza, ma ha 40 case e percepisce 120mila euro d&#39;affitto">

                    </picture>

                </a>
            </figure>

        </div>

        <div class="c-story__content u-relative">

            <header class="c-story__header ">

                <div class="c-story__kicker u-mb-xsmall">

                    <span class="u-label-02 ">Economia</span>

                </div>

                <a class="o-link-text" href="#">
                    <h1 class="
         
        
        c-story__heading 
        u-heading-04
         
        u-m-none">Riceve il reddito di cittadinanza, ma ha 40 case e percepisce 120mila euro d&#39;affitto</h1>
                </a>

            </header>

            <p class="
           
           
           
          c-story__summary u-mb-none  
          u-body-03">L&#39;uomo è stato denunciato dalla Guardia di finanza a Lanciano, in provincia di Chieti. Gli immobili affittati, oltre quindici, secondo le Fiamme Gialle rendevano alla famiglia del beneficiario del sussidio oltre 120mila euro all&#39;anno</p>

        </div>

    </article>

    <div data-smb-version="3">

        <div class="
    c-smb  
    c-smb--story
    c-smb--native">

            <label class="c-smb__label" for="c-smb__panel-story"></label>

            <div class="c-smb__structure">

                <div class="c-smb__visual">
                    <div class="c-smb__slider" data-items="4">
                        <div class="c-smb__image">
                            <figure>
                                <picture>
                                    <img decoding="async" referrerpolicy="no-referrer" loading="lazy" src="/assets/images/adv/safe-area-smb.png" alt="" />
                                </picture>
                            </figure>
                        </div>

                        <div class="c-smb__image">
                            <figure>
                                <picture>
                                    <img decoding="async" referrerpolicy="no-referrer" src="/assets/images/adv/safe-area-smb1.png" alt="" />
                                </picture>
                            </figure>
                        </div>

                        <div class="c-smb__image">
                            <figure>
                                <picture>
                                    <img decoding="async" referrerpolicy="no-referrer" src="/assets/images/adv/safe-area-smb2.png" alt="" />
                                </picture>
                            </figure>
                        </div>

                        <div class="c-smb__image">
                            <figure>
                                <picture>
                                    <img decoding="async" referrerpolicy="no-referrer" src="/assets/images/adv/safe-area-smb3.png" alt="" />
                                </picture>
                            </figure>
                        </div>

                    </div>
                </div>

                <div class="c-smb__content">

                    <div class="c-smb__title">
                        <strong>Poke house</strong>
                    </div>

                    <div class="c-smb__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</div>

                    <div class="c-smb__bar">

                        <label class="c-smb--trigger">Leggi la nostra storia</label>

                    </div>

                </div>
            </div>
            <span class="c-smb__adsolution">Creato con <a href="https://www.adsolution.it/#/" target="_blank">ADSolution</a></span>
        </div>

        <input type="checkbox" id="c-smb__panel-story" class="c-smb__viewer" />
        <dialog open class="c-smb__panel">
            <div class="c-smb__panel__inner">
                <div class="c-smb__panel__body-top">
                    Poke house
                    <label class="c-smb__panel__close" for="c-smb__panel-story">
                        <svg>
                            <use xlink:href="#icon-x-circle"></use>
                        </svg>
                    </label>
                </div>
                <div class="c-smb__panel__body-center">

                    <h3 class="c-smb__details">
                        Piazza del Colosseo, 54 A
                    </h3>

                    <video class="c-smb__panel-video" autoplay muted src="https://www.w3schools.com/html/mov_bbb.mp4"></video>

                    <p>
                        Using a qualified staff ready to understand the needs of their customers, they have created a warm and welcoming atmosphere. Using a qualified staff ready to understand the needs of their customers, they have created a warm and welcoming atmosphere.
                    </p>

                </div>
                <div class="c-smb__panel__body-bottom">

                    <a>
                        <svg>
                            <use xlink:href="#icon-phone-call"></use>
                        </svg>

                        335.123123123
                    </a>

                    <a>
                        <svg>
                            <use xlink:href="#icon-map-pin"></use>
                        </svg>

                        Piazza del Colosseo, 54 A
                    </a>

                    <a>
                        <svg>
                            <use xlink:href="#icon-globe"></use>
                        </svg>

                        wwww.pokehouse.com
                    </a>

                </div>
            </div>
        </dialog>
        <svg style="position: absolute; width: 0; height: 0" xmlns="http://www.w3.org/2000/svg">
            <symbol id="icon-map-pin" viewBox="0 0 24 24">
                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
                <circle cx="12" cy="10" r="3" />
            </symbol>
            <symbol id="icon-calendar" viewBox="0 0 24 24">
                <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
                <line x1="16" y1="2" x2="16" y2="6" />
                <line x1="8" y1="2" x2="8" y2="6" />
                <line x1="3" y1="10" x2="21" y2="10" />
            </symbol>
            <symbol id="icon-clock" viewBox="0 0 24 24">
                <circle cx="12" cy="12" r="10" />
                <path d="M12 6v6l4 2" />
            </symbol>
            <symbol id="icon-whatsapp" viewBox="0 0 32 32">
                <path d="M20.52 17.75c.181 0 .858.306 2.032.917 1.174.61 1.795.979 1.865 1.104.027.07.041.173.041.312 0 .459-.118.986-.354 1.584-.222.541-.715.996-1.479 1.364-.764.368-1.472.552-2.125.552-.792 0-2.111-.43-3.958-1.291A11.889 11.889 0 0 1 13 19.833c-1-1.014-2.028-2.298-3.083-3.854-1-1.486-1.493-2.833-1.48-4.041v-.167c.042-1.264.556-2.361 1.542-3.292.334-.305.695-.458 1.084-.458.083 0 .208.01.375.031.166.02.298.031.395.031.264 0 .448.045.552.136.105.09.212.281.323.573.111.277.34.889.688 1.833.347.944.52 1.465.52 1.563 0 .291-.239.69-.718 1.197-.48.507-.719.83-.719.97 0 .096.035.2.104.312.473 1.014 1.181 1.965 2.125 2.854.778.736 1.827 1.437 3.146 2.104a.93.93 0 0 0 .459.146c.208 0 .583-.337 1.125-1.01.541-.674.902-1.011 1.083-1.011zm-4.228 11.042c1.764 0 3.454-.348 5.073-1.042 1.618-.694 3.01-1.625 4.177-2.792 1.166-1.166 2.097-2.559 2.791-4.177a12.731 12.731 0 0 0 1.042-5.073c0-1.764-.347-3.454-1.042-5.073-.694-1.618-1.625-3.01-2.791-4.177-1.167-1.166-2.56-2.097-4.177-2.791a12.732 12.732 0 0 0-5.073-1.042c-1.764 0-3.455.347-5.073 1.042-1.618.694-3.01 1.625-4.177 2.791-1.167 1.167-2.098 2.56-2.792 4.177a12.732 12.732 0 0 0-1.042 5.073c0 2.82.834 5.375 2.5 7.667L4.063 28.23l5.041-1.604c2.195 1.445 4.59 2.167 7.188 2.167zm0-28.792c2.125 0 4.156.417 6.093 1.25 1.938.833 3.608 1.951 5.01 3.354 1.404 1.403 2.522 3.073 3.355 5.01A15.264 15.264 0 0 1 32 15.709c0 2.125-.417 4.157-1.25 6.094-.833 1.938-1.951 3.608-3.354 5.01-1.403 1.403-3.073 2.521-5.01 3.355a15.264 15.264 0 0 1-6.094 1.25 15.46 15.46 0 0 1-7.604-1.959L0 32.25l2.833-8.437c-1.5-2.473-2.25-5.174-2.25-8.105 0-2.125.417-4.156 1.25-6.093.834-1.938 1.952-3.608 3.355-5.01C6.59 3.2 8.26 2.082 10.198 1.25A15.264 15.264 0 0 1 16.292 0z" fill-rule="evenodd" />
            </symbol>
            <symbol id="icon-phone-call" viewBox="0 0 24 24">
                <path d="M15.05 5A5 5 0 0 1 19 8.95M15.05 1A9 9 0 0 1 23 8.94m-1 7.98v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
            </symbol>
            <symbol id="icon-globe" viewBox="0 0 24 24">
                <circle cx="12" cy="12" r="10" />
                <line x1="2" y1="12" x2="22" y2="12" />
                <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
            </symbol>
            <symbol id="icon-x-circle" viewBox="0 0 24 24">
                <circle cx="12" cy="12" r="10" />
                <line x1="15" y1="9" x2="9" y2="15" />
                <line x1="9" y1="9" x2="15" y2="15" />
            </symbol>
        </svg>
    </div>

    <div data-smb-version="3">

        <div class="
    c-smb  
    c-smb--click-to-site
    c-smb--native">

            <a target="_blank" href="https://shop.today.it/citta/roma/"></a>

            <div class="c-smb__structure">

                <div class="c-smb__visual">
                    <div class="c-smb__slider" data-items="2">
                        <div class="c-smb__image">
                            <figure>
                                <picture>
                                    <img decoding="async" referrerpolicy="no-referrer" loading="lazy" src="/assets/images/adv/safe-area-smb.png" alt="" />
                                </picture>
                            </figure>
                        </div>

                        <div class="c-smb__image">
                            <figure>
                                <picture>
                                    <img decoding="async" referrerpolicy="no-referrer" src="/assets/images/adv/safe-area-smb1.png" alt="" />
                                </picture>
                            </figure>
                        </div>

                    </div>
                </div>

                <div class="c-smb__content">

                    <div class="c-smb__title">
                        <strong>Poke house</strong>
                    </div>

                    <div class="c-smb__description">Computer guasto? Windows o Mac non fa differenza.</div>

                    <div class="c-smb__bar">

                        <svg>
                            <use xlink:href="#icon-globe"></use>
                        </svg>

                        <p>

                            https://shop.today.it/citta/roma/?utm_source=adsolution&amp;utm_campaign=demo-adsolution
                        </p>

                        <button>scopri di più</button>

                    </div>

                </div>
            </div>
            <span class="c-smb__adsolution">Creato con <a href="https://www.adsolution.it/#/" target="_blank">ADSolution</a></span>
        </div>

        <input type="checkbox" id="c-smb__panel-click-to-site" class="c-smb__viewer" />
        <dialog open class="c-smb__panel">
            <div class="c-smb__panel__inner">
                <div class="c-smb__panel__body-top">
                    Poke house
                    <label class="c-smb__panel__close" for="c-smb__panel-click-to-site">
                        <svg>
                            <use xlink:href="#icon-x-circle"></use>
                        </svg>
                    </label>
                </div>
                <div class="c-smb__panel__body-center">

                </div>
                <div class="c-smb__panel__body-bottom">

                </div>
            </div>
        </dialog>
        <svg style="position: absolute; width: 0; height: 0" xmlns="http://www.w3.org/2000/svg">
            <symbol id="icon-map-pin" viewBox="0 0 24 24">
                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
                <circle cx="12" cy="10" r="3" />
            </symbol>
            <symbol id="icon-calendar" viewBox="0 0 24 24">
                <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
                <line x1="16" y1="2" x2="16" y2="6" />
                <line x1="8" y1="2" x2="8" y2="6" />
                <line x1="3" y1="10" x2="21" y2="10" />
            </symbol>
            <symbol id="icon-clock" viewBox="0 0 24 24">
                <circle cx="12" cy="12" r="10" />
                <path d="M12 6v6l4 2" />
            </symbol>
            <symbol id="icon-whatsapp" viewBox="0 0 32 32">
                <path d="M20.52 17.75c.181 0 .858.306 2.032.917 1.174.61 1.795.979 1.865 1.104.027.07.041.173.041.312 0 .459-.118.986-.354 1.584-.222.541-.715.996-1.479 1.364-.764.368-1.472.552-2.125.552-.792 0-2.111-.43-3.958-1.291A11.889 11.889 0 0 1 13 19.833c-1-1.014-2.028-2.298-3.083-3.854-1-1.486-1.493-2.833-1.48-4.041v-.167c.042-1.264.556-2.361 1.542-3.292.334-.305.695-.458 1.084-.458.083 0 .208.01.375.031.166.02.298.031.395.031.264 0 .448.045.552.136.105.09.212.281.323.573.111.277.34.889.688 1.833.347.944.52 1.465.52 1.563 0 .291-.239.69-.718 1.197-.48.507-.719.83-.719.97 0 .096.035.2.104.312.473 1.014 1.181 1.965 2.125 2.854.778.736 1.827 1.437 3.146 2.104a.93.93 0 0 0 .459.146c.208 0 .583-.337 1.125-1.01.541-.674.902-1.011 1.083-1.011zm-4.228 11.042c1.764 0 3.454-.348 5.073-1.042 1.618-.694 3.01-1.625 4.177-2.792 1.166-1.166 2.097-2.559 2.791-4.177a12.731 12.731 0 0 0 1.042-5.073c0-1.764-.347-3.454-1.042-5.073-.694-1.618-1.625-3.01-2.791-4.177-1.167-1.166-2.56-2.097-4.177-2.791a12.732 12.732 0 0 0-5.073-1.042c-1.764 0-3.455.347-5.073 1.042-1.618.694-3.01 1.625-4.177 2.791-1.167 1.167-2.098 2.56-2.792 4.177a12.732 12.732 0 0 0-1.042 5.073c0 2.82.834 5.375 2.5 7.667L4.063 28.23l5.041-1.604c2.195 1.445 4.59 2.167 7.188 2.167zm0-28.792c2.125 0 4.156.417 6.093 1.25 1.938.833 3.608 1.951 5.01 3.354 1.404 1.403 2.522 3.073 3.355 5.01A15.264 15.264 0 0 1 32 15.709c0 2.125-.417 4.157-1.25 6.094-.833 1.938-1.951 3.608-3.354 5.01-1.403 1.403-3.073 2.521-5.01 3.355a15.264 15.264 0 0 1-6.094 1.25 15.46 15.46 0 0 1-7.604-1.959L0 32.25l2.833-8.437c-1.5-2.473-2.25-5.174-2.25-8.105 0-2.125.417-4.156 1.25-6.093.834-1.938 1.952-3.608 3.355-5.01C6.59 3.2 8.26 2.082 10.198 1.25A15.264 15.264 0 0 1 16.292 0z" fill-rule="evenodd" />
            </symbol>
            <symbol id="icon-phone-call" viewBox="0 0 24 24">
                <path d="M15.05 5A5 5 0 0 1 19 8.95M15.05 1A9 9 0 0 1 23 8.94m-1 7.98v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
            </symbol>
            <symbol id="icon-globe" viewBox="0 0 24 24">
                <circle cx="12" cy="12" r="10" />
                <line x1="2" y1="12" x2="22" y2="12" />
                <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
            </symbol>
            <symbol id="icon-x-circle" viewBox="0 0 24 24">
                <circle cx="12" cy="12" r="10" />
                <line x1="15" y1="9" x2="9" y2="15" />
                <line x1="9" y1="9" x2="15" y2="15" />
            </symbol>
        </svg>
    </div>

</div>
 
<div class="l-grid l-grid--{{grid_layout}}">

  {% for story in stories | slice(limit) %}
    {% set i = loop.index0 %}

    {% render "@story", {
      modifier: modifier, 
      dossier: dossier, 
      approfondimento: approfondimento,
      size: size, 
      title: stories[i].title, 
      label: stories[i].label, 
      media: stories[i].media, 
      summary: stories[i].summary, 
      video: video, 
      contextMobile: contextMobile,
      hideSummary: hideSummary,
      showAuthor: showAuthor,
      showCounter: showCounter,
      showDate: showDate,
      grid: grid,
      channel: channel,
      square: square,
      deskSummary: deskSummary
    }, false %}  

  {% endfor %}
  
  {% render "@smb--story" %}  
  {% render "@smb--click-to-site" %}
  
</div>
 
{
  "limit": 9,
  "stories": [
    {
      "index": 1,
      "title": "Coronavirus, la fase 2 tra sicurezza e libertà: tutte le idee per ripartire",
      "label": "Emergenza Coronavirus",
      "date": "ieri pomeriggio, 15:51",
      "author": "Violetto Gorrasi",
      "number": 1,
      "summary": "\"Ieri ci sono stati più di 500 morti e i casi totali sono ancora tanti\", dice Giovanni Rezza, direttore del Dipartimento malattie infettive. La richiesta della regione Lombardia di riaprire le attività produttive il 4 maggio ha preso in contropiede il governo",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/51380415156697/coronavirus-ansa-4-2-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/51380415156697/coronavirus-ansa-4-2-2.jpg",
        "square": "https://www.romatoday.it/~media/square-hi/28324255677065/podcast-cover_9-16_2-2.jpg"
      }
    },
    {
      "index": 2,
      "title": "Casa di riposo degli orrori: anziani legati e bastonati. Le immagini shock",
      "label": "Sei arresti",
      "date": "ieri pomeriggio, 15:51",
      "author": "Matteo Scarlino",
      "number": 2,
      "summary": "\"Ieri ci sono stati più di 500 morti e i casi totali sono ancora tanti\", dice Giovanni Rezza, direttore del Dipartimento malattie infettive. La richiesta della regione Lombardia di riaprire le attività produttive il 4 maggio ha preso in contropiede il governo",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/19878683460037/casa-di-riposo-palermo-ansa-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/19878683460037/casa-di-riposo-palermo-ansa-2.jpg",
        "square": "https://www.romatoday.it/~media/square-hi/28324255677065/podcast-cover_9-16_2-2.jpg"
      }
    },
    {
      "index": 3,
      "title": "Coronavirus, negli Usa 2.500 morti in un giorno ma Trump \"ha fretta\" di riaprire",
      "label": "Esteri",
      "date": "ieri pomeriggio, 15:51",
      "author": "Fabio Grilli",
      "number": 3,
      "summary": "\"Ieri ci sono stati più di 500 morti e i casi totali sono ancora tanti\", dice Giovanni Rezza, direttore del Dipartimento malattie infettive. La richiesta della regione Lombardia di riaprire le attività produttive il 4 maggio ha preso in contropiede il governo",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/31908412136750/donald-trump-coronavirus-ansa-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/31908412136750/donald-trump-coronavirus-ansa-2.jpg",
        "square": "https://www.romatoday.it/~media/square-hi/28324255677065/podcast-cover_9-16_2-2.jpg"
      }
    },
    {
      "index": 4,
      "title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
      "label": "Lo studio del Touring Club italiano",
      "date": "ieri pomeriggio, 15:51",
      "author": "Ginevra Nozzoli",
      "number": 4,
      "summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "square": "https://www.romatoday.it/~media/square-hi/28324255677065/podcast-cover_9-16_2-2.jpg"
      }
    },
    {
      "index": 5,
      "title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
      "label": "Lo studio del Touring Club italiano",
      "date": "ieri pomeriggio, 15:51",
      "author": "Veronica Altimari",
      "number": 5,
      "summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "square": "https://www.romatoday.it/~media/square-hi/28324255677065/podcast-cover_9-16_2-2.jpg"
      }
    },
    {
      "index": 6,
      "title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
      "label": "Lo studio del Touring Club italiano",
      "date": "ieri pomeriggio, 15:51",
      "author": "Alberto Berlini",
      "number": 6,
      "summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "square": "https://www.romatoday.it/~media/square-hi/28324255677065/podcast-cover_9-16_2-2.jpg"
      }
    },
    {
      "index": 7,
      "title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
      "label": "Lo studio del Touring Club italiano",
      "date": "ieri pomeriggio, 15:51",
      "author": "Ginevra Nozzoli",
      "number": 7,
      "summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "square": "https://www.romatoday.it/~media/square-hi/28324255677065/podcast-cover_9-16_2-2.jpg"
      }
    },
    {
      "index": 8,
      "title": "Muore annegato nella piscina comunale il giorno prima di compiere 7 anni",
      "label": "Lo studio del Touring Club italiano",
      "date": "ieri pomeriggio, 15:51",
      "author": "Fabio Grilli",
      "number": 8,
      "summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/65846868204321/pisicina-comunale-ansa-archivio-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/65846868204321/pisicina-comunale-ansa-archivio-2.jpg",
        "square": "https://www.romatoday.it/~media/square-hi/28324255677065/podcast-cover_9-16_2-2.jpg"
      }
    },
    {
      "index": 9,
      "title": "Riceve il reddito di cittadinanza, ma ha 40 case e percepisce 120mila euro d'affitto",
      "label": "Economia",
      "date": "ieri pomeriggio, 15:51",
      "author": "Fabio Grilli",
      "number": 9,
      "summary": "L'uomo è stato denunciato dalla Guardia di finanza a Lanciano, in provincia di Chieti. Gli immobili affittati, oltre quindici, secondo le Fiamme Gialle rendevano alla famiglia del beneficiario del sussidio oltre 120mila euro all'anno",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/56625536121153/evasione-fiscale-controlli-finanza-ansa-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/56625536121153/evasione-fiscale-controlli-finanza-ansa-2.jpg",
        "square": "https://www.romatoday.it/~media/square-hi/28324255677065/podcast-cover_9-16_2-2.jpg"
      }
    }
  ],
  "opinions": [
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "17 luglio, 2020",
      "author": "Carlo Sala"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "12 luglio, 2020",
      "author": "Massimiliano Dona"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "30 giugno, 2020",
      "author": "Luciano Lanna"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "05 giugno, 2020",
      "author": "Marilia Parente"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "27 maggio, 2020",
      "author": "Dario Balotta"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "13 aprile, 2020",
      "author": "Rossella Lamina"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "11 aprile, 2020",
      "author": "Dario Balotta"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "04 marzo, 2020",
      "author": "Luciano Lanna"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "18 febbraio, 2020",
      "author": "Dario Balotta"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "01 febbraio, 2020",
      "author": "Rossella Lamina"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "25 gennaio, 2020",
      "author": "Dario Balotta"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "05 gennaio, 2020",
      "author": "Luciano Lanna"
    }
  ],
  "grid_layout": "medium",
  "modifier": "stack",
  "size": "compact",
  "grid": true
}

Items templates

Items templates are used to display list of articles.

Parameters

  • grid_layout - change grid layout, accepted values: small, medium
  • modifier - story layout modifier, string data type, accepted values: stack, inline, inset, card, overlay
  • size - story heading font-size, string data type, accepted values: big, compact, narrow, tiny
  • media - display image, boolean data type (default is true)
  • summary - display summary, boolean data type (default is true)
  • sublinks - display sublinks, boolean data type (default is true)
  • author - display author, boolean data type (default is true)
  • date - display date, boolean data type (default is true)
  • showCounter - display counter number, boolean data type (default is false)

Variants

  1. Grid - Default grid template, use grid_layout to between small or medium layout
  2. Grid Big
  3. Grid Large
  4. Grid Double
  5. Grid Compact
  6. List