University of Staffordshire Pattern Library

Playlist

No notes defined.

<section class="slab  slab--bg-dark-blue  align-full">
    <div class="wrap">
        <article class="playlist" data-guid="01c0d22e-e404-4571-ad15-421fedc15304">
            <h2 class="playlist__title">Video playlist</h2>
            <div class="grid">
                <section class="playlist__list  col-1/4@tablet">
                    <ol class="list--unstyled">
                        <li><a class="playlist__link  selected" href="#" data-url="https://www.youtube.com/embed/0ctsZ8w2sQI">Esports hub tour</a></li>
                        <li><a class="playlist__link" href="#" data-url="https://www.youtube.com/embed/9cHyGKVYuYs">Games development showreel 2023</a></li>
                        <li><a class="playlist__link" href="#" data-url="https://www.youtube.com/embed/fiiB4p6ORsc">Esports Arena London</a></li>
                        <li><a class="playlist__link" href="#" data-url="https://www.youtube.com/embed/h7A-Xyx50HI">Luke Seagrove - BA (Hons) Esports</a></li>
                    </ol>
                </section>
                <section class="playlist__video  col-3/4@tablet">
                    <div id="playlist__item-container" class="ratio  ratio--16x9">
                        <iframe id="playlist__item" data-guid="01c0d22e-e404-4571-ad15-421fedc15304" src="https://www.youtube.com/embed/0ctsZ8w2sQI" allowfullscreen></iframe>
                    </div>
                </section>
            </div>
        </article>
    </div>
</section>
 
<section class="slab  slab--bg-dark-blue  align-full">
    <div class="wrap">
        <article class="playlist" data-guid="01c0d22e-e404-4571-ad15-421fedc15304">
            <h2 class="playlist__title">Video playlist</h2>
            <div class="grid">
                <section class="playlist__list  col-1/4@tablet">
                    <ol class="list--unstyled">
                        <li><a class="playlist__link  selected" href="#" data-url="https://www.youtube.com/embed/0ctsZ8w2sQI">Esports hub tour</a></li>
                        <li><a class="playlist__link" href="#" data-url="https://www.youtube.com/embed/9cHyGKVYuYs">Games development showreel 2023</a></li>
                        <li><a class="playlist__link" href="#" data-url="https://www.youtube.com/embed/fiiB4p6ORsc">Esports Arena London</a></li>
                        <li><a class="playlist__link" href="#" data-url="https://www.youtube.com/embed/h7A-Xyx50HI">Luke Seagrove - BA (Hons) Esports</a></li>
                    </ol>
                </section>
                <section class="playlist__video  col-3/4@tablet">
                    <div id="playlist__item-container" class="ratio  ratio--16x9">
                        <iframe id="playlist__item" data-guid="01c0d22e-e404-4571-ad15-421fedc15304" src="https://www.youtube.com/embed/0ctsZ8w2sQI" allowfullscreen></iframe>
                    </div>
                </section>
            </div>
        </article>
    </div>
</section>
  • Content: 
    h2.playlist__title {
    color: $neon!important;
}

a.playlist__link {
    display: block;
    padding: $spacing-sm $spacing-sm $spacing-sm $spacing-3xl;
    text-decoration: none;
    color: white;
    transition: all 125ms;
    background-image: url(#{$image-theme-directory-icon}/icon-play-circle-red.svg);
    background-position: $spacing-xs center;
    background-repeat: no-repeat;
    background-size: $spacing-xl;

    &.selected {
        color: $dark-blue!important;
        background-color: $neon;
    }

    &:hover {
        color: $dark-blue!important;
        background-color: $grey-50-pc;
    }
}

.playlist--non-transparent {
    a.playlist__link {
        background-color: #EEE;
        color: #170d38!important;

        &.selected {
            color: $dark-blue!important;
            background-color: $neon;
        }
    
        &:hover {
            color: $dark-blue!important;
            background-color: $grey-50-pc;
        }
    }
}
  • URL: /components/raw/playlist/_playlist.scss
  • Filesystem Path: src\components\playlist\_playlist.scss
  • Size: 1 KB