# Video Card

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <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. */

`
File:

- 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;
        flex-direction: column;
        align-items: center;
        align-self: auto;
        justify-content: space-between;

        width: 100%;
        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/video-card/_video-card.scss
- Size: 879 Bytes

- Handle: @video-card
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/04-molecules/video-card/video-card.html

No notes defined.