Styleguide

Event Details 

<div class="m-event-details">
    <div class="m-event-details__time-wrapper">
        <svg role="img" class="m-event-details__icon">
            <title>Datum und Dauer</title>
            <use xlink:href="#clock"></use>
        </svg>
        <time class="m-event-details__time" datetime="2019-10-31 17:33">31. Oktober 2019 | 17:33 &ndash; 19:22</time>
    </div>
    <div class="m-event-details__location-wrapper">
        <svg role="img" class="m-event-details__icon">
            <title>Ort</title>
            <use xlink:href="#location"></use>
        </svg>
        <span class="m-event-details__location">Landgasthof, Baselstrasse 38, Riehen</span>
    </div>
    <div class="m-event-details__link-button">
        <div class="a-link-button ">
            Save to calendar (ICS)
        </div>
    </div>
</div>
 
<div class="m-event-details">
	<div class="m-event-details__time-wrapper">
		<svg role="img" class="m-event-details__icon">
			<title>{{date-label}}</title>
			<use xlink:href="#clock"></use>
		</svg>
		<time class="m-event-details__time"
					datetime="{{timestamp}}">{{{date}}}</time>
	</div>
	<div class="m-event-details__location-wrapper">
		<svg role="img" class="m-event-details__icon">
			<title>{{place-label}}</title>
			<use xlink:href="#location"></use>
		</svg>
		<span class="m-event-details__location">{{location}}</span>
	</div>
	<div class="m-event-details__link-button">
		{{> '@a-link-button' link-button }}
	</div>
</div>
  • Content: 
    .m-event-details {
	line-height: 1.75em;
	@include fluid-props(margin-bottom, $fluid-min, $fluid-max, 40px, 80px);

	@include media($size-small) {
		font-size: 1.125rem;
	}

	@include media($size-medium) {
		font-size: 1.25rem;
	}

	&__icon {
		height: 1em;
		width: 1em;
		transform: translateY(0.1em);
	}

	&__time-wrapper &__icon {
		fill: $color-primary;

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

	&__location-wrapper &__icon {
		stroke: $color-primary;

		@include high-contrast {
			stroke: $color-primary-dark;
		}
	}
}
  • URL: /components/raw/m-event-details/_m-event-details.scss
  • Filesystem Path: styleguide/src/components/molecules/m-event-details/_m-event-details.scss
  • Size: 551 Bytes 
{
  "date": "31. Oktober 2019 | 17:33 &ndash; 19:22",
  "timestamp": "2019-10-31 17:33",
  "location": "Landgasthof, Baselstrasse 38, Riehen",
  "place-label": "Ort",
  "date-label": "Datum und Dauer",
  "link-button": {
    "link": "#",
    "label": "Save to calendar (ICS)"
  }
}

No notes defined.