<div class="video-cards" role="list">
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">Architektur nachdokumentieren</h4>
            <h5 class="video-card__subtitle">arc42 für bestehende Systeme</h5>
            <p class="video-card__date standalone">05.08.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/gernot-starke/">Gernot Starke</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/78KJt4EOfFE?rel=0&amp;showinfo=0" class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0" allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">Sparsame Dokumentation</h4>
            <h5 class="video-card__subtitle">arc42 in Aktion: Praktische Tipps</h5>
            <p class="video-card__date standalone">29.07.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/gernot-starke/">Gernot Starke</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/2tlg0B60ef8?rel=0&amp;showinfo=0" class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0" allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">Remote Mob Programming</h4>
            <h5 class="video-card__subtitle">Teamwork im Homeoffice</h5>
            <p class="video-card__date standalone">15.07.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/jochen-christ/">Jochen Christ</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/XyigGJKFWQc?rel=0&amp;showinfo=0" class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0" allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">Typen und Tippen</h4>
            <h5 class="video-card__subtitle">Datengetriebene Typen in Idris</h5>
            <p class="video-card__date standalone">01.07.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/jan-stepien/">Jan Stępień</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/T5rZTa-xXwU?rel=0&amp;showinfo=0" class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0" allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">OpenSSL</h4>
            <h5 class="video-card__subtitle">
                Was Du schon immer darüber wissen wolltest
            </h5>
            <p class="video-card__date standalone">24.06.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/ci/">Christoph Iserlohn</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/CnI7n4_RhtI?rel=0&amp;showinfo=0" class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0" allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">Blockchain Use Cases</h4>
            <h5 class="video-card__subtitle">
                When does Blockchain really make sense?
            </h5>
            <p class="video-card__date standalone">17.06.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/lars-hupel/">Dr. Lars Hupel</a>,
                <a href="/de/staff/stefan-tilkov/">Stefan Tilkov</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/sP5h1a1a6iA?rel=0&amp;showinfo=0" class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0" allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">Some Fixes</h4>
            <h5 class="video-card__subtitle">
                Commit Messages und Code richtig schreiben
            </h5>
            <p class="video-card__date standalone">10.06.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/benjamin-wolf/">Benjamin Wolf</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/yM3HgT1YK9s?rel=0&amp;showinfo=0" class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0" allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">CSS Grid</h4>
            <h5 class="video-card__subtitle">Responsive Web Layout</h5>
            <p class="video-card__date standalone">03.06.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/joy-heron/">Joy Heron</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/aDTA0Aaxyx4?rel=0&amp;showinfo=0" class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0" allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">Service Mesh</h4>
            <h5 class="video-card__subtitle">
                Ein kritischer Blick auf die neue Infrastruktur
            </h5>
            <p class="video-card__date standalone">27.05.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/hanna-prinz/">Hanna Prinz</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/cTfp7It1eEo?rel=0&amp;showinfo=0" class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0" allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">Software Architecture</h4>
            <h5 class="video-card__subtitle">for Agile Enterprises</h5>
            <p class="video-card__date standalone">20.05.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/stefan-tilkov/">Stefan Tilkov</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/_XcVRbqWiG8?rel=0&amp;showinfo=0" class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0" allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">Organisation</h4>
            <h5 class="video-card__subtitle">
                Ein Werkzeug für Software-Architektur
            </h5>
            <p class="video-card__date standalone">13.05.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/eberhard-wolff/">Eberhard Wolff</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/F73TBLMd71w?rel=0&amp;showinfo=0" class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0" allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">Software-Modernisierung</h4>
            <h5 class="video-card__subtitle">mit Wardley Maps</h5>
            <p class="video-card__date standalone">22.04.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/markus-harrer/">Markus Harrer</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/ARp3EIUCKM4?rel=0&amp;showinfo=0" class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0" allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
</div>
<div class="video-cards" role="list">
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">Architektur nachdokumentieren</h4>
            <h5 class="video-card__subtitle">arc42 für bestehende Systeme</h5>
            <p class="video-card__date standalone">05.08.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/gernot-starke/">Gernot Starke</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/78KJt4EOfFE?rel=0&amp;showinfo=0"
                class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0"
                allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">Sparsame Dokumentation</h4>
            <h5 class="video-card__subtitle">arc42 in Aktion: Praktische Tipps</h5>
            <p class="video-card__date standalone">29.07.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/gernot-starke/">Gernot Starke</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/2tlg0B60ef8?rel=0&amp;showinfo=0"
                class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0"
                allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">Remote Mob Programming</h4>
            <h5 class="video-card__subtitle">Teamwork im Homeoffice</h5>
            <p class="video-card__date standalone">15.07.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/jochen-christ/">Jochen Christ</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/XyigGJKFWQc?rel=0&amp;showinfo=0"
                class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0"
                allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">Typen und Tippen</h4>
            <h5 class="video-card__subtitle">Datengetriebene Typen in Idris</h5>
            <p class="video-card__date standalone">01.07.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/jan-stepien/">Jan Stępień</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/T5rZTa-xXwU?rel=0&amp;showinfo=0"
                class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0"
                allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">OpenSSL</h4>
            <h5 class="video-card__subtitle">Was Du schon immer darüber wissen wolltest</h5>
            <p class="video-card__date standalone">24.06.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/ci/">Christoph Iserlohn</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/CnI7n4_RhtI?rel=0&amp;showinfo=0"
                class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0"
                allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">Blockchain Use Cases</h4>
            <h5 class="video-card__subtitle">When does Blockchain really make sense?</h5>
            <p class="video-card__date standalone">17.06.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/lars-hupel/">Dr. Lars Hupel</a>, <a href="/de/staff/stefan-tilkov/">Stefan Tilkov</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/sP5h1a1a6iA?rel=0&amp;showinfo=0"
                class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0"
                allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">Some Fixes</h4>
            <h5 class="video-card__subtitle">Commit Messages und Code richtig schreiben</h5>
            <p class="video-card__date standalone">10.06.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/benjamin-wolf/">Benjamin Wolf</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/yM3HgT1YK9s?rel=0&amp;showinfo=0"
                class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0"
                allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">CSS Grid</h4>
            <h5 class="video-card__subtitle">Responsive Web Layout</h5>
            <p class="video-card__date standalone">03.06.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/joy-heron/">Joy Heron</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/aDTA0Aaxyx4?rel=0&amp;showinfo=0"
                class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0"
                allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">Service Mesh</h4>
            <h5 class="video-card__subtitle">Ein kritischer Blick auf die neue Infrastruktur</h5>
            <p class="video-card__date standalone">27.05.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/hanna-prinz/">Hanna Prinz</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/cTfp7It1eEo?rel=0&amp;showinfo=0"
                class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0"
                allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">Software Architecture</h4>
            <h5 class="video-card__subtitle">for Agile Enterprises</h5>
            <p class="video-card__date standalone">20.05.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/stefan-tilkov/">Stefan Tilkov</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/_XcVRbqWiG8?rel=0&amp;showinfo=0"
                class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0"
                allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">Organisation</h4>
            <h5 class="video-card__subtitle">Ein Werkzeug für Software-Architektur</h5>
            <p class="video-card__date standalone">13.05.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/eberhard-wolff/">Eberhard Wolff</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/F73TBLMd71w?rel=0&amp;showinfo=0"
                class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0"
                allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">Software-Modernisierung</h4>
            <h5 class="video-card__subtitle">mit Wardley Maps</h5>
            <p class="video-card__date standalone">22.04.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/markus-harrer/">Markus Harrer</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/ARp3EIUCKM4?rel=0&amp;showinfo=0"
                class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0"
                allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
</div>
/* No context defined. */
  • Content:
    .video-cards {
      display: grid;
      grid-template-columns: 1fr;
      grid-gap: $spacer-md;
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .video-cards {
        grid-template-columns: 1fr 1fr;
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-lg) {
      .video-cards {
        grid-template-columns: 1fr 1fr 1fr;
      }
    }
    
    .video-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      align-self: auto;
      justify-content: space-between;
      background-color: $brand-white;
      padding: $spacer-md;
      width: 100%;
    
      &__head {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    
      &__title {
        text-align: center;
        color: $brand-interaction;
      }
    
      &__label {
        margin-bottom: $spacer-xs;
      }
    
      &__video {
        margin-top: $spacer-md;
      }
    
      &__video > * {
        max-width: 100%;
      }
    
      &__video + * {
        margin-top: $spacer-sm;
      }
    }
    
  • URL: /components/raw/video-card/_video-card.scss
  • Filesystem Path: components/02-molecules/visual-elements/video-card/_video-card.scss
  • Size: 877 Bytes
  • Handle: @video-card
  • Preview:
  • Filesystem Path: components/02-molecules/visual-elements/video-card/video-card.html

No notes defined.