ZeenSpeakerSectionLayoutTable

Компонент ZeenSpeakerSectionLayoutTable

Примеры:

• Спикеры

  • 

    Сергей Монин

    Райффайзенбанк Председатель правления
  • 

    Никита Патрахин

    Райффайзенбанк Руководитель дирекции обслуживания корпоративных клиентов и инвестиционно-банковских операций
  • 

    Никита Швецов

    Райффайзенбанк Руководитель дирекции информационных технологий
  • 

    Роман Зильбер

    Райффайзенбанк Руководитель дирекции обслуживания физических лиц и малого бизнеса
  • 

    Роланд Васс

    Райффайзенбанк Руководитель дирекции по управлению рисками

Source Code - исходный код компонента

<template>
  <section class="schedule-speaker-list">
    <ZeenContainer>
      <ZeenHeadline class="schedule-speaker-list__main-headline" :tag="'h2'">Спикеры</ZeenHeadline>
      <ul class="schedule-speaker-list__speaker-list">
        <li class="schedule-speaker-list__list-item" v-for="speaker in speakers" :key="speaker.id">
          <ZeenSpeakerCard
            :speaker="speaker"
            :picture-attrs="{src: speaker.picture}"
            v-bind="speakerAttrs"
          ></ZeenSpeakerCard>
        </li>
      </ul>
    </ZeenContainer>
  </section>
</template>

<script>
import ZeenContainer from '../../../src/components/ZeenContainer/ZeenContainer'
import ZeenHeadline from '../../../src/components/ZeenHeadline/ZeenHeadline'
import ZeenSpeakerCard from '../../../src/components/ZeenSpeakerCard/ZeenSpeakerCard'

export default {
  name: 'ZeenSpeakerSectionLayoutTable',
  components: {ZeenSpeakerCard, ZeenHeadline, ZeenContainer},
  props: {
    speakers: {
      type: Array,
      required: true,
    },
    speakerAttrs: {
      type: Object,
      require: false,
    },
  },
}
</script>

<style scoped lang="scss">
@import '../../styles/mixins.scss';

.schedule-speaker-list {
  &__speaker-list {
    display: grid;
    grid-template-columns: repeat(var(--zeen-speaker-section-layout-table-repeat), 1fr);
    gap: var(--zeen-speaker-section-layout-table-gap-y) var(--zeen-speaker-section-layout-table-gap-x);
  }

  &__main-headline {
    margin-bottom: var(--zeen-speaker-section-layout-table-main-headline-margin-bottom);
  }

  &__list-item {
    list-style: none;
    min-height: var(--zeen-speaker-section-layout-table-card-height);

    ::v-deep.speaker-card {
      height: 100%;
    }
  }
}
</style>