<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>
        <wall-of-consent type="youtube">
            <template>
                <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>
            </template>
            <p class="standalone" data-hide-if-consent>An dieser Stelle befindet sich ein Youtube Video. Um es zu sehen, musst Du dem Laden von Fremdinhalten zustimmen.</p>
            <div class="custom-form-control checkbox">
                <input id="custom-checkbox-3" type="checkbox" class="form-control__input" />
                <label for="custom-checkbox-3" class="form-label">Youtube Videos anzeigen (<a href="https://www.innoq.com/datenschutz/">Datenschutzhinweise</a>)</label>
            </div>
        </wall-of-consent>
    </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>
        <wall-of-consent type="youtube">
            <template>
                <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>
            </template>
            <p class="standalone" data-hide-if-consent>An dieser Stelle befindet sich ein Youtube Video. Um es zu sehen, musst Du dem Laden von Fremdinhalten zustimmen.</p>
            <div class="custom-form-control checkbox">
                <input id="custom-checkbox-3" type="checkbox" class="form-control__input" />
                <label for="custom-checkbox-3" class="form-label">Youtube Videos anzeigen (<a href="https://www.innoq.com/datenschutz/">Datenschutzhinweise</a>)</label>
            </div>
        </wall-of-consent>
    </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>
        <wall-of-consent type="youtube">
            <template>
                <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>
            </template>
            <p class="standalone" data-hide-if-consent>An dieser Stelle befindet sich ein Youtube Video. Um es zu sehen, musst Du dem Laden von Fremdinhalten zustimmen.</p>
            <div class="custom-form-control checkbox">
                <input id="custom-checkbox-3" type="checkbox" class="form-control__input" />
                <label for="custom-checkbox-3" class="form-label">Youtube Videos anzeigen (<a href="https://www.innoq.com/datenschutz/">Datenschutzhinweise</a>)</label>
            </div>
        </wall-of-consent>
    </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>
        <wall-of-consent type="youtube">
            <template>
                <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>
            </template>
            <p class="standalone" data-hide-if-consent>An dieser Stelle befindet sich ein Youtube Video. Um es zu sehen, musst Du dem Laden von Fremdinhalten zustimmen.</p>
            <div class="custom-form-control checkbox">
                <input id="custom-checkbox-3" type="checkbox" class="form-control__input" />
                <label for="custom-checkbox-3" class="form-label">Youtube Videos anzeigen (<a href="https://www.innoq.com/datenschutz/">Datenschutzhinweise</a>)</label>
            </div>
        </wall-of-consent>
    </div>
</div>
/* No context defined. */
  • Content:
    .video-cards {
      display: grid;
      grid-gap: $spacer-md;
      grid-template-columns: 1fr;
    }
    
    @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;
      width: 100%;
      flex-direction: column;
      align-items: center;
      align-self: auto;
      justify-content: space-between;
      padding: $spacer-md;
      background-color: $brand-white;
    
      &__head {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    
      &__title {
        color: $brand-interaction;
        text-align: center;
      }
    
      &__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/04-molecules/visual-elements/video-card/_video-card.scss
  • Size: 877 Bytes
  • Handle: @video-card
  • Preview:
  • Filesystem Path: components/04-molecules/visual-elements/video-card/video-card.html

No notes defined.