Styleguide

Person 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>
 
<article class="m-person-slide">
	<figure class="m-person-slide__figure">
		<div class="m-person-slide__image">
			{{> @a-image no_caption=1 image-src=image alt=alt}}
		</div>
		<figcaption class="m-person-slide__caption">
			<p class="m-person-slide__quote">{{quote}}</p>
			<p class="m-person-slide__meta">
				<span class="m-person-slide__author">{{author}}</span>{{#if job}},
				<span class="m-person-slide__job">{{job}}</span>{{/if}}
			</p>
		</figcaption>
	</figure>
</article>
  • Content: 
    .m-person-slide {
	line-height: 0;

	&__image {
		width: 100%;
		@include aspect-ratio-box(90%);
	}

	&__caption {
		padding: 18px 20px;

		& > p {
			margin: 0;
			hyphens: auto;

			&:first-of-type {
				margin-bottom: .75rem;
			}
		}
	}

	&__meta {
		font-size: 0.875rem;
	}

	&__author {
		font-weight: $font-weight-bold;
	}

	&__quote {
		&:before {
			content: "\AB";
			padding-right: 0.25em;
		}

		&:after {
			content: "\BB";
			padding-left: 0.25em;
		}

		&:before, &:after {
			color: $color-primary;
			font-weight: $font-weight-bold;

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

.o-people-grid--vertical .m-person-slide {
	&__caption {
		padding-left: 0;
		padding-right: 0;

		& > p {
			font-size: 1rem !important;
		}
	}
}
  • URL: /components/raw/m-person-slide/_m-person-slide.scss
  • Filesystem Path: styleguide/src/components/molecules/m-person-slide/_m-person-slide.scss
  • Size: 773 Bytes 
{
  "image": "/img/adrian-345.jpg",
  "alt": "Adrian Aulbach",
  "author": "Adrian Aulbach",
  "job": "Softwareentwickler, Student, Co-Präsident Grüne Interlaken-Oberhasli",
  "quote": "Grün – Aber sicher! Für eine sichere Energieversorgung, sicheren Verkehr und sichere Arbeitsplätze."
}

No notes defined.