Regione Toscana Design System

Video Gallery: Default 

<section class="rtds-video-gallery">
    <div class="rtds-container rtds-space-y-4 md:rtds-space-y-6">
        <div>
            <div class="rtds-section-header">
                <div class="rtds-flex rtds-items-center rtds-gap-4 md:rtds-gap-6 rtds-content-01">
                    <div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-2 md:rtds-gap-4">

                        <div class="rtds-vertical-divider rtds-w-4 md:rtds-w-6 lg:rtds-w-8">
                            <img class="rtds-w-full rtds-h-auto" src="/images/vertical-divider.svg" alt="">
                        </div>

                        <h2 class="rtds-heading-3 md:rtds-heading-2">Video</h2>

                    </div>

                </div>
            </div>
        </div>
        <ul class="rtds-grid rtds-grid-cols-1 md:rtds-grid-cols-2 rtds-gap-4">

            <li>

                <div class="rtds-video-item rtds-border rtds-border-gray-01">

                    <div class="rtds-aspect-video">
                        <iframe title="Video youtube: titolo video lorem ipsum dolor sit amet" width="1167" height="656" src="https://www.youtube.com/embed/p_rEJBW27bY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
                    </div>

                </div>

            </li>

            <li>

                <div class="rtds-video-item rtds-border rtds-border-gray-01">

                    <div class="rtds-aspect-video">
                        <iframe title="Video youtube: titolo video lorem ipsum dolor sit amet" width="1167" height="656" src="https://www.youtube.com/embed/p_rEJBW27bY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
                    </div>

                </div>

            </li>

            <li>

                <div class="rtds-video-item rtds-border rtds-border-gray-01">

                    <div class="rtds-aspect-video">
                        <iframe title="Video youtube: titolo video lorem ipsum dolor sit amet" width="1167" height="656" src="https://www.youtube.com/embed/p_rEJBW27bY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
                    </div>

                </div>

            </li>

            <li>

                <div class="rtds-video-item rtds-border rtds-border-gray-01">

                    <div class="rtds-aspect-video">
                        <iframe title="Video youtube: titolo video lorem ipsum dolor sit amet" width="1167" height="656" src="https://www.youtube.com/embed/p_rEJBW27bY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
                    </div>

                </div>

            </li>

        </ul>
    </div>
</section>
 
<section class="rtds-video-gallery">
    <div class="rtds-container rtds-space-y-4 md:rtds-space-y-6">
    <div>
        {% render '@section-header--divider-left' , {heading: 'Video'}, true %}
    </div>
    <ul class="rtds-grid rtds-grid-cols-1 md:rtds-grid-cols-2 rtds-gap-4">
        {% for i in range(0, 4) %}
            <li>
                {% block videoItem %}
                    {% render '@video-item' %}
                {% endblock videoItem %}
            </li>
        {% endfor %}
        </ul>
    </div>
</section>
 
/* No context defined. */
  • Content: 
    @layer components {
    .rtds-video-item {
        @apply rtds-aspect-video;
    }

    .rtds-video-item iframe {
        @apply !rtds-w-full !rtds-h-full;
    }
}
  • URL: /components/raw/video-gallery/video-gallery.css
  • Filesystem Path: components/04-organisms/video-gallery/video-gallery.css
  • Size: 164 Bytes

No notes defined.