<div class="o-front-events o-front-events--null">
    <div class="o-front-events__cat-title">
        <h2 class="a-cat-title">
            <span class="a-cat-title__link a-cat-title__link--no-link">Events</span>
        </h2>
    </div>
    <div class="o-front-events__events">
        <div class="o-front-events__event">
            <div class="o-front-events__inner">
                <a class="a-event-link" href="">
                    <div class="a-event-link__image">
                        <figure class="a-image a-image--cover">

                            <img src="/img/dv.jpg" alt="Die Delegierten schreiten zur Abstimmung" title="This is a linked image" class="a-image__image a-image__image--fp a-image__image--fp-">

                            <figcaption>

                            </figcaption>
                        </figure>
                    </div>
                    <h3 class="a-event-link__title">Öffentlichkeit und Demokratie im Zeitalter der Neuen Medien</h3>
                    <div class="a-event-link__meta">
                        <time class="a-event-link__datetime" datetime="2018-08-25 11:00">28. Oktober 2017 | 10:45 - 12:30</time>
                        <div class="a-event-link__place">Hotel &amp; Restaurant Landgasthof, Baselstrasse 38, Riehen</div>
                    </div>
                </a>
            </div>
        </div>
        <div class="o-front-events__event">
            <div class="o-front-events__inner">
                <a class="a-event-link" href="">
                    <div class="a-event-link__image">
                        <figure class="a-image a-image--cover">

                            <img src="/img/dv.jpg" alt="Die Delegierten schreiten zur Abstimmung" title="This is a linked image" class="a-image__image a-image__image--fp a-image__image--fp-">

                            <figcaption>

                            </figcaption>
                        </figure>
                    </div>
                    <h3 class="a-event-link__title">Delegiertenversammlung mit Stargast mit sehr langem Namen</h3>
                    <div class="a-event-link__meta">
                        <time class="a-event-link__datetime" datetime="2018-08-25 11:00">25. August 2018 | 11:00</time>
                        <div class="a-event-link__place">Säulenhalle Zug</div>
                    </div>
                </a>
            </div>
        </div>
        <div class="o-front-events__event">
            <div class="o-front-events__inner">
                <a class="a-event-link" href="">
                    <div class="a-event-link__image">
                        <figure class="a-image a-image--cover">

                            <img src="/img/dv.jpg" alt="Die Delegierten schreiten zur Abstimmung" title="This is a linked image" class="a-image__image a-image__image--fp a-image__image--fp-">

                            <figcaption>

                            </figcaption>
                        </figure>
                    </div>
                    <h3 class="a-event-link__title">Netzwerktreffen Grüne Städte – voneinander lernen</h3>
                    <div class="a-event-link__meta">
                        <time class="a-event-link__datetime" datetime="2018-08-25 11:00">10. Juni 2017 | 10:15 - 16:45</time>
                        <div class="a-event-link__place">aki, Alpeneggstrasse 5, Bern</div>
                    </div>
                </a>
            </div>
        </div>
        <div class="o-front-events__event">
            <div class="o-front-events__inner">
                <a class="a-event-link" href="">
                    <div class="a-event-link__image">
                        <figure class="a-image a-image--cover">

                            <img src="/img/dv.jpg" alt="Die Delegierten schreiten zur Abstimmung" title="This is a linked image" class="a-image__image a-image__image--fp a-image__image--fp-">

                            <figcaption>

                            </figcaption>
                        </figure>
                    </div>
                    <h3 class="a-event-link__title">Delegiertenversammlung</h3>
                    <div class="a-event-link__meta">
                        <time class="a-event-link__datetime" datetime="2018-08-25 11:00">25. August 2018 – 11:00</time>
                        <div class="a-event-link__place">Säulenhalle Zug</div>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <div class="o-front-events__more">
        <div class="a-link-button ">
            Alle Events anzeigen
        </div>
    </div>
</div>
<div class="o-front-events {{modifiers_classes}}">
	<div class="o-front-events__cat-title">
		{{> @a-cat-title cat-title}}
	</div>
	<div class="o-front-events__events">
		{{#each events}}
			<div class="o-front-events__event">
				<div class="o-front-events__inner">
					{{> @a-event-link this }}
				</div>
			</div>
		{{/each}}
	</div>
	<div class="o-front-events__more">
		{{> @a-link-button link-button}}
	</div>
</div>
  • Content:
    .o-front-events {
    	@extend .grid-item;
    	padding-left: 0;
    	padding-right: 0;
    
    	@include media($_DESKTOP) {
    		max-width: $grid-max-width-max;
    	}
    
    	&__cat-title {
    		margin-bottom: 4px;
    		@include fluid-grid-item-props(margin-left);
    
    		@include media($_DESKTOP) {
    			margin-bottom: 25px;
    		}
    	}
    
    	&__events {
    		width: 100%;
    		display: grid;
    		align-items: stretch;
    		grid-template-columns: 1fr;
    		@include fluid-props(grid-column-gap, $size-medium, $grid-max-width-max, $grid-gap-min, $grid-gap-max);
    	}
    
    	&--full-width &__events {
    		@include media($_DESKTOP) {
    			grid-template-columns: 1fr 1fr;
    		}
    	}
    
    	&__inner {
    		border-bottom: 1px solid $color-grey-2;
    		height: 100%;
    	}
    
    	&__event {
    		width: 100%;
    		@include fluid-grid-item-props(padding-left padding-right);
    
    		@include hover {
    			background-color: $color-grey-1;
    		}
    	}
    
    	&__more {
    		padding-top: 16px;
    		@include fluid-grid-item-props(padding-left);
    	}
    }
    
  • URL: /components/raw/o-front-events/_o-front-events.scss
  • Filesystem Path: styleguide/src/components/organisms/o-front-events/_o-front-events.scss
  • Size: 913 Bytes
{
  "modifiers": [
    null
  ],
  "cat-title": {
    "label": "Events"
  },
  "link-button": {
    "label": "Alle Events anzeigen",
    "link": "#"
  },
  "events": [
    {
      "title": "Öffentlichkeit und Demokratie im Zeitalter der Neuen Medien",
      "timestamp": "2018-08-25 11:00",
      "datetime": "28. Oktober 2017 | 10:45 - 12:30",
      "place": "Hotel & Restaurant Landgasthof, Baselstrasse 38, Riehen",
      "link-url": "#",
      "image": {
        "image-src": "/img/dv.jpg",
        "alt": "Die Delegierten schreiten zur Abstimmung",
        "title": "This is a linked image"
      }
    },
    {
      "title": "Delegiertenversammlung mit Stargast mit sehr langem Namen",
      "timestamp": "2018-08-25 11:00",
      "datetime": "25. August 2018 | 11:00",
      "place": "Säulenhalle Zug",
      "link-url": "#",
      "image": {
        "image-src": "/img/dv.jpg",
        "alt": "Die Delegierten schreiten zur Abstimmung",
        "title": "This is a linked image"
      }
    },
    {
      "title": "Netzwerktreffen Grüne Städte – voneinander lernen",
      "timestamp": "2018-08-25 11:00",
      "datetime": "10. Juni 2017 | 10:15 - 16:45",
      "place": "aki, Alpeneggstrasse 5, Bern",
      "link-url": "#",
      "image": {
        "image-src": "/img/dv.jpg",
        "alt": "Die Delegierten schreiten zur Abstimmung",
        "title": "This is a linked image"
      }
    },
    {
      "title": "Delegiertenversammlung",
      "timestamp": "2018-08-25 11:00",
      "datetime": "25. August 2018 – 11:00",
      "place": "Säulenhalle Zug",
      "link-url": "#",
      "image": {
        "image-src": "/img/dv.jpg",
        "alt": "Die Delegierten schreiten zur Abstimmung",
        "title": "This is a linked image"
      }
    }
  ]
}

No notes defined.