Styleguide

People grid: Vertical 

<div class="o-people-grid o-people-grid--vertical">
    <div class="o-people-grid__wrapper">
        <div class="o-people-grid__cat-title">
            <h2 class="a-cat-title">
                <span class="a-cat-title__link a-cat-title__link--no-link">Grüne Menschen</span>
            </h2>
        </div>
        <h3 class="o-people-grid__title">Wir engagieren uns als Grüne</h3>
        <div class="o-people-grid__library-container swiper-container">
            <div class="o-people-grid__slider swiper-wrapper">
                <div class="o-people-grid__slide swiper-slide">
                    <article class="m-person-slide">
                        <figure class="m-person-slide__figure">
                            <div class="m-person-slide__image">
                                <figure class="a-image a-image--cover">

                                    <img src="/img/adrian-345.jpg" alt="Adrian Aulbach" title="" class="a-image__image a-image__image--fp a-image__image--fp-">

                                </figure>
                            </div>
                            <figcaption class="m-person-slide__caption">
                                <p class="m-person-slide__quote">Grün – Aber sicher! Für eine sichere Energieversorgung, sicheren Verkehr und sichere Arbeitsplätze.</p>
                                <p class="m-person-slide__meta">
                                    <span class="m-person-slide__author">Adrian Aulbach</span>,
                                    <span class="m-person-slide__job">Softwareentwickler, Student, Co-Präsident Grüne Interlaken-Oberhasli</span>
                                </p>
                            </figcaption>
                        </figure>
                    </article>
                </div>
                <div class="o-people-grid__slide swiper-slide">
                    <article class="m-person-slide">
                        <figure class="m-person-slide__figure">
                            <div class="m-person-slide__image">
                                <figure class="a-image a-image--cover">

                                    <img src="/img/anna_q-345.jpg" alt="Anna de Quervain" title="" class="a-image__image a-image__image--fp a-image__image--fp-">

                                </figure>
                            </div>
                            <figcaption class="m-person-slide__caption">
                                <p class="m-person-slide__quote">Investitionen in Bildung und Integration sind Investitionen in die Zukunft.</p>
                                <p class="m-person-slide__meta">
                                    <span class="m-person-slide__author">Anna de Quervain</span>,
                                    <span class="m-person-slide__job">Stadträtin Burgdorf, Fraktionssprecherin, Vorstand Operation Libero Bern</span>
                                </p>
                            </figcaption>
                        </figure>
                    </article>
                </div>
                <div class="o-people-grid__slide swiper-slide">
                    <article class="m-person-slide">
                        <figure class="m-person-slide__figure">
                            <div class="m-person-slide__image">
                                <figure class="a-image a-image--cover">

                                    <img src="/img/anna_z-345.jpg" alt="Anna Zeilstra" title="" class="a-image__image a-image__image--fp a-image__image--fp-">

                                </figure>
                            </div>
                            <figcaption class="m-person-slide__caption">
                                <p class="m-person-slide__quote">Ich setze mich für Minderheiten und eine offene Gesellschaft ein.</p>
                                <p class="m-person-slide__meta">
                                    <span class="m-person-slide__author">Anna Zeilstra</span>,
                                    <span class="m-person-slide__job">Sozialpädagogin HF, Präsidentin Grüne Spiez, Mitglied GGR Spiez, Mitglied Sozialkommission</span>
                                </p>
                            </figcaption>
                        </figure>
                    </article>
                </div>
                <div class="o-people-grid__slide swiper-slide">
                    <article class="m-person-slide">
                        <figure class="m-person-slide__figure">
                            <div class="m-person-slide__image">
                                <figure class="a-image a-image--cover">

                                    <img src="/img/carole-345.jpg" alt="Carole Klopfstein" title="" class="a-image__image a-image__image--fp a-image__image--fp-">

                                </figure>
                            </div>
                            <figcaption class="m-person-slide__caption">
                                <p class="m-person-slide__quote">Soziale Verantwortung, Solidarität und Nachhaltigkeit - Nicht alle Aspekte der Gesellschaft lassen sich durch die Wirtschaft lösen.</p>
                                <p class="m-person-slide__meta">
                                    <span class="m-person-slide__author">Carole Klopfstein</span>,
                                    <span class="m-person-slide__job">Gemeinderätin GGR Muri-Gümligen, Projektleiterin</span>
                                </p>
                            </figcaption>
                        </figure>
                    </article>
                </div>
                <div class="o-people-grid__slide swiper-slide">
                    <article class="m-person-slide">
                        <figure class="m-person-slide__figure">
                            <div class="m-person-slide__image">
                                <figure class="a-image a-image--cover">

                                    <img src="/img/cyril-345.jpg" alt="Cyril Bucher" title="" class="a-image__image a-image__image--fp a-image__image--fp-">

                                </figure>
                            </div>
                            <figcaption class="m-person-slide__caption">
                                <p class="m-person-slide__quote">Investition in Bildung und Gesundheit. Förderung des Sportes. Nachhaltigkeit in der Wirtschaft.</p>
                                <p class="m-person-slide__meta">
                                    <span class="m-person-slide__author">Cyril Bucher</span>,
                                    <span class="m-person-slide__job">Medizinstudent</span>
                                </p>
                            </figcaption>
                        </figure>
                    </article>
                </div>
                <div class="o-people-grid__slide swiper-slide">
                    <article class="m-person-slide">
                        <figure class="m-person-slide__figure">
                            <div class="m-person-slide__image">
                                <figure class="a-image a-image--cover">

                                    <img src="/img/adrian-345.jpg" alt="Adrian Aulbach" title="" class="a-image__image a-image__image--fp a-image__image--fp-">

                                </figure>
                            </div>
                            <figcaption class="m-person-slide__caption">
                                <p class="m-person-slide__quote">Grün – Aber sicher! Für eine sichere Energieversorgung, sicheren Verkehr und sichere Arbeitsplätze.</p>
                                <p class="m-person-slide__meta">
                                    <span class="m-person-slide__author">Adrian Aulbach</span>,
                                    <span class="m-person-slide__job">Softwareentwickler, Student, Co-Präsident Grüne Interlaken-Oberhasli</span>
                                </p>
                            </figcaption>
                        </figure>
                    </article>
                </div>
                <div class="o-people-grid__slide swiper-slide">
                    <article class="m-person-slide">
                        <figure class="m-person-slide__figure">
                            <div class="m-person-slide__image">
                                <figure class="a-image a-image--cover">

                                    <img src="/img/anna_q-345.jpg" alt="Anna de Quervain" title="" class="a-image__image a-image__image--fp a-image__image--fp-">

                                </figure>
                            </div>
                            <figcaption class="m-person-slide__caption">
                                <p class="m-person-slide__quote">Investitionen in Bildung und Integration sind Investitionen in die Zukunft.</p>
                                <p class="m-person-slide__meta">
                                    <span class="m-person-slide__author">Anna de Quervain</span>,
                                    <span class="m-person-slide__job">Stadträtin Burgdorf, Fraktionssprecherin, Vorstand Operation Libero Bern</span>
                                </p>
                            </figcaption>
                        </figure>
                    </article>
                </div>
                <div class="o-people-grid__slide swiper-slide">
                    <article class="m-person-slide">
                        <figure class="m-person-slide__figure">
                            <div class="m-person-slide__image">
                                <figure class="a-image a-image--cover">

                                    <img src="/img/anna_z-345.jpg" alt="Anna Zeilstra" title="" class="a-image__image a-image__image--fp a-image__image--fp-">

                                </figure>
                            </div>
                            <figcaption class="m-person-slide__caption">
                                <p class="m-person-slide__quote">Ich setze mich für Minderheiten und eine offene Gesellschaft ein.</p>
                                <p class="m-person-slide__meta">
                                    <span class="m-person-slide__author">Anna Zeilstra</span>,
                                    <span class="m-person-slide__job">Sozialpädagogin HF, Präsidentin Grüne Spiez, Mitglied GGR Spiez, Mitglied Sozialkommission</span>
                                </p>
                            </figcaption>
                        </figure>
                    </article>
                </div>
                <div class="o-people-grid__slide swiper-slide">
                    <article class="m-person-slide">
                        <figure class="m-person-slide__figure">
                            <div class="m-person-slide__image">
                                <figure class="a-image a-image--cover">

                                    <img src="/img/carole-345.jpg" alt="Carole Klopfstein" title="" class="a-image__image a-image__image--fp a-image__image--fp-">

                                </figure>
                            </div>
                            <figcaption class="m-person-slide__caption">
                                <p class="m-person-slide__quote">Soziale Verantwortung, Solidarität und Nachhaltigkeit - Nicht alle Aspekte der Gesellschaft lassen sich durch die Wirtschaft lösen.</p>
                                <p class="m-person-slide__meta">
                                    <span class="m-person-slide__author">Carole Klopfstein</span>,
                                    <span class="m-person-slide__job">Gemeinderätin GGR Muri-Gümligen, Projektleiterin</span>
                                </p>
                            </figcaption>
                        </figure>
                    </article>
                </div>
                <div class="o-people-grid__slide swiper-slide">
                    <article class="m-person-slide">
                        <figure class="m-person-slide__figure">
                            <div class="m-person-slide__image">
                                <figure class="a-image a-image--cover">

                                    <img src="/img/cyril-345.jpg" alt="Cyril Bucher" title="" class="a-image__image a-image__image--fp a-image__image--fp-">

                                </figure>
                            </div>
                            <figcaption class="m-person-slide__caption">
                                <p class="m-person-slide__quote">Investition in Bildung und Gesundheit. Förderung des Sportes. Nachhaltigkeit in der Wirtschaft.</p>
                                <p class="m-person-slide__meta">
                                    <span class="m-person-slide__author">Cyril Bucher</span>,
                                    <span class="m-person-slide__job">Medizinstudent</span>
                                </p>
                            </figcaption>
                        </figure>
                    </article>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="o-people-grid {{modifiers_classes}}">
	<div class="o-people-grid__wrapper">
		<div class="o-people-grid__cat-title">
			{{> @a-cat-title cat-title}}
		</div>
		<h3 class="o-people-grid__title">{{title}}</h3>
		<div class="o-people-grid__library-container swiper-container">
			<div class="o-people-grid__slider swiper-wrapper">
				{{#each slides}}
					<div class="o-people-grid__slide swiper-slide">
						{{> @m-person-slide this}}
					</div>
				{{/each}}
			</div>
		</div>
		{{#if horizontal}}
			<button class="o-people-grid__slide-button o-people-grid__slide-button--left"
							aria-label="{{aria-label-slide-left}}">
				<svg role="img">
					<title>{{ 'Slide to the left' }}</title>
					<use xlink:href="#slide"></use>
				</svg>
			</button>
			<button class="o-people-grid__slide-button o-people-grid__slide-button--right"
							aria-controls="o-people-grid__slider" aria-label="{{aria-label-slide-right}}">
				<svg role="img">
					<title>{{'Slide to the right'}}</title>
					<use xlink:href="#slide"></use>
				</svg>
			</button>
		{{/if}}
	</div>
</div>
  • Content: 
    .o-people-grid {
	&--horizontal {
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: $color-grey-1;
		position: relative;
		z-index: 1; // Fix of Webkit flickering
		@include fluid-props(margin-top margin-bottom padding-top padding-bottom, $fluid-min, $fluid-max, 5px, 25px);
	}

	&--horizontal &__wrapper {
		@extend .grid-item;

		@include media($_DESKTOP) {
			max-width: $grid-max-width-max;
		}
	}

	&__cat-title {
		@include fluid-props(margin-bottom, $size-tiny, $size-medium, 20px, 34px);
	}

	&__title {
		@include fluid-props(font-size, $size-tiny, $size-medium, 32px, 48px);
		@include fluid-props(margin-top, $size-tiny, $size-medium, 20px, 34px);
		@include fluid-props(margin-bottom, $size-tiny, $size-medium, 26px, 56px);
	}

	&--vertical &__slider {
		display: grid;
		grid-gap: 32px;
		align-content: space-between;
		grid-auto-flow: row;
		grid-template-columns: 1fr;

		@include media(480px) {
			grid-template-columns: repeat(2, calc(50% - 16px));
		}

		@include media($size-medium) {
			grid-template-columns: repeat(3, 242px);
		}
	}

	&--horizontal &__slider {
		display: flex;
		align-items: stretch;
		position: relative;
		z-index: 1;
		transition-property: transform;
		box-sizing: content-box;
		transform: translate3d(0px, 0, 0);
		cursor: grab;
	}

	&__slide {
		background: $color-white;
	}

	&--horizontal &__slide {
		@include fluid-props(margin-right, $size-tiny, $size-medium, 20px, 32px);
		position: relative;
		transition-property: transform;

		.m-person-slide {
			width: 220px;

			@include media($size-tiny) {
				width: 280px;
			}

			@include media($_DESKTOP) {
				width: 288px;
			}
		}
	}

	&__slide-button {
		display: none;
		position: absolute;
		z-index: 10;
		width: 108px;
		padding-top: 0;
		padding-bottom: 0;
		@include fluid-props(top, $size-small, $size-medium, 211px, 240px); // dont ask
		@include fluid-props(top, $size-medium, $fluid-max, 240px, 269px); // dont ask
		@include fluid-props(top, $fluid-max, 2000px, 269px, 282px); // dont ask
		height: 252px;
		cursor: pointer;

		@include media($size-small) {
			display: block;
		}

		@include media($_DESKTOP) {
			height: 259px;
		}

		@media screen and (hover: none) and (max-width: 1023px) {
			// don't combine this query with the one above to work around the missing support in firefox
			display: none;
		}

		&.swiper-button-disabled {
			display: none;
		}

		@include hover {
			svg {
				fill: $color-primary-dark;
			}
		}

		svg {
			height: 48px;
			width: 48px;
			fill: $color-primary;
			stroke: $color-white;
			transition: fill $transition-fast $transition-ease;

			@include high-contrast {
				fill: $color-primary-dark;
			}
		}

		&--left {
			left: 0;

			svg {
				transform: rotate(180deg);
			}
		}

		&--right {
			right: 0;
		}
	}
}
  • URL: /components/raw/o-people-grid/_o-people-grid.scss
  • Filesystem Path: styleguide/src/components/organisms/o-people-grid/_o-people-grid.scss
  • Size: 2.8 KB
  • Content: 
    import BaseView from './../../../js/base-view';
import Swiper, { A11y, Keyboard, Navigation } from 'swiper';

// Install modules
Swiper.use([Keyboard, Navigation, A11y]);

const SWIPER_CONTAINER_SELECTOR = '.o-people-grid__library-container';
const SLIDER_NEXT_BUTTON_SELECTOR = '.o-people-grid__slide-button--right';
const SLIDER_PREVIOUS_BUTTON_SELECTOR = '.o-people-grid__slide-button--left';

export default class OPeopleGrid extends BaseView {
	bind() {
		super.bind();

		new Swiper( SWIPER_CONTAINER_SELECTOR, {
			slidesPerView: 'auto',
			navigation: {
				nextEl: SLIDER_NEXT_BUTTON_SELECTOR,
				prevEl: SLIDER_PREVIOUS_BUTTON_SELECTOR,
			},
			keyboard: {
				enabled: true,
				onlyInViewport: false,
			},
		} );
	}
}
  • URL: /components/raw/o-people-grid/o-people-grid.js
  • Filesystem Path: styleguide/src/components/organisms/o-people-grid/o-people-grid.js
  • Size: 733 Bytes 
{
  "title": "Wir engagieren uns als Grüne",
  "aria-label-slide-left": "Vorherige Person anzeigen",
  "aria-label-slide-right": "Nächste Person anzeigen",
  "horizontal": false,
  "modifiers": [
    "vertical"
  ],
  "cat-title": {
    "label": "Grüne Menschen",
    "link": "#"
  },
  "slides": [
    {
      "author": "Adrian Aulbach",
      "alt": "Adrian Aulbach",
      "image": "/img/adrian-345.jpg",
      "quote": "Grün – Aber sicher! Für eine sichere Energieversorgung, sicheren Verkehr und sichere Arbeitsplätze.",
      "job": "Softwareentwickler, Student, Co-Präsident Grüne Interlaken-Oberhasli"
    },
    {
      "author": "Anna de Quervain",
      "alt": "Anna de Quervain",
      "image": "/img/anna_q-345.jpg",
      "quote": "Investitionen in Bildung und Integration sind Investitionen in die Zukunft.",
      "job": "Stadträtin Burgdorf, Fraktionssprecherin, Vorstand Operation Libero Bern"
    },
    {
      "author": "Anna Zeilstra",
      "alt": "Anna Zeilstra",
      "image": "/img/anna_z-345.jpg",
      "quote": "Ich setze mich für Minderheiten und eine offene Gesellschaft ein.",
      "job": "Sozialpädagogin HF, Präsidentin Grüne Spiez, Mitglied GGR Spiez, Mitglied Sozialkommission"
    },
    {
      "author": "Carole Klopfstein",
      "alt": "Carole Klopfstein",
      "image": "/img/carole-345.jpg",
      "quote": "Soziale Verantwortung, Solidarität und Nachhaltigkeit - Nicht alle Aspekte der Gesellschaft lassen sich durch die Wirtschaft lösen.",
      "job": "Gemeinderätin GGR Muri-Gümligen, Projektleiterin"
    },
    {
      "author": "Cyril Bucher",
      "alt": "Cyril Bucher",
      "image": "/img/cyril-345.jpg",
      "quote": "Investition in Bildung und Gesundheit. Förderung des Sportes. Nachhaltigkeit in der Wirtschaft.",
      "job": "Medizinstudent"
    },
    {
      "author": "Adrian Aulbach",
      "alt": "Adrian Aulbach",
      "image": "/img/adrian-345.jpg",
      "quote": "Grün – Aber sicher! Für eine sichere Energieversorgung, sicheren Verkehr und sichere Arbeitsplätze.",
      "job": "Softwareentwickler, Student, Co-Präsident Grüne Interlaken-Oberhasli"
    },
    {
      "author": "Anna de Quervain",
      "alt": "Anna de Quervain",
      "image": "/img/anna_q-345.jpg",
      "quote": "Investitionen in Bildung und Integration sind Investitionen in die Zukunft.",
      "job": "Stadträtin Burgdorf, Fraktionssprecherin, Vorstand Operation Libero Bern"
    },
    {
      "author": "Anna Zeilstra",
      "alt": "Anna Zeilstra",
      "image": "/img/anna_z-345.jpg",
      "quote": "Ich setze mich für Minderheiten und eine offene Gesellschaft ein.",
      "job": "Sozialpädagogin HF, Präsidentin Grüne Spiez, Mitglied GGR Spiez, Mitglied Sozialkommission"
    },
    {
      "author": "Carole Klopfstein",
      "alt": "Carole Klopfstein",
      "image": "/img/carole-345.jpg",
      "quote": "Soziale Verantwortung, Solidarität und Nachhaltigkeit - Nicht alle Aspekte der Gesellschaft lassen sich durch die Wirtschaft lösen.",
      "job": "Gemeinderätin GGR Muri-Gümligen, Projektleiterin"
    },
    {
      "author": "Cyril Bucher",
      "alt": "Cyril Bucher",
      "image": "/img/cyril-345.jpg",
      "quote": "Investition in Bildung und Gesundheit. Förderung des Sportes. Nachhaltigkeit in der Wirtschaft.",
      "job": "Medizinstudent"
    }
  ]
}

No notes defined.