Video Card 

<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="wall-of-consent__text" 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="wall-of-consent__text" 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="wall-of-consent__text" 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="wall-of-consent__text" 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.