Ticker-Liste @ticker-list
Eine Ticker-Liste kann aus Meldungs- und Veranstaltungseinträgen bestehen.
Meldungsliste @ticker-list--news
<!-- Meldungsliste -->
<div class="ticker-list">
<ul class="ticker-list__list">
<li class="ticker-list__list-item">
<a class="ticker-list__item ticker-list__item--news" href="#">
<div class="ticker-list__item-date">04. Okt. 2017</div>
<h3 class="ticker-list__item-title"><span class="ticker-list__item-title-inner">Newsmeldung dolor sit amet, consetetur sadipscing elitr</span></h3>
<p class="ticker-list__item-description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<div class="ticker-list__item-icon">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg>
</div>
</a>
</li>
<li class="ticker-list__list-item">
<a class="ticker-list__item ticker-list__item--news" href="#">
<div class="ticker-list__item-date">03. Okt. 2017</div>
<h3 class="ticker-list__item-title"><span class="ticker-list__item-title-inner">Newsmeldung dolor sit amet, consetetur sadipscing elitr</span></h3>
<p class="ticker-list__item-description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<div class="ticker-list__item-icon">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg>
</div>
</a>
</li>
<li class="ticker-list__list-item">
<a class="ticker-list__item ticker-list__item--news" href="#">
<div class="ticker-list__item-date">02. Okt. 2017</div>
<h3 class="ticker-list__item-title"><span class="ticker-list__item-title-inner">Newsmeldung dolor sit amet, consetetur sadipscing elitr</span></h3>
<p class="ticker-list__item-description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<div class="ticker-list__item-icon">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg>
</div>
</a>
</li>
<li class="ticker-list__list-item">
<a class="ticker-list__item ticker-list__item--news" href="#">
<div class="ticker-list__item-date">01. Okt. 2017</div>
<h3 class="ticker-list__item-title"><span class="ticker-list__item-title-inner">Newsmeldung ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmo</span></h3>
<p class="ticker-list__item-description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<div class="ticker-list__item-icon">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg>
</div>
</a>
</li>
</ul>
</div>{
"items": [
{
"type": "news",
"date": "2017-10-04",
"title": "Newsmeldung dolor sit amet, consetetur sadipscing elitr",
"description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
"link": "#"
},
{
"type": "news",
"date": "2017-10-03",
"title": "Newsmeldung dolor sit amet, consetetur sadipscing elitr",
"description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
"link": "#"
},
{
"type": "news",
"date": "2017-10-02",
"title": "Newsmeldung dolor sit amet, consetetur sadipscing elitr",
"description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
"link": "#"
},
{
"type": "news",
"date": "2017-10-01",
"title": "Newsmeldung ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmo",
"description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
"link": "#"
}
]
}
Terminliste @ticker-list--events
<!-- Terminliste -->
<div class="ticker-list">
<ul class="ticker-list__list">
<li class="ticker-list__list-item">
<a class="ticker-list__item ticker-list__item--event" href="#">
<div class="ticker-list__item-date">
<time class="date date--small" datetime="2017-10-04"><span class="date__day">4</span><span class="u-hidden-visually">. </span><span class="date__month">Okt.</span></time>
</div>
<h3 class="ticker-list__item-title"><span class="ticker-list__item-title-inner">Terminmeldung dolor sit amet, consetetur sadipscing elitr</span></h3>
<div class="ticker-list__item-icon">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg>
</div>
</a>
</li>
<li class="ticker-list__list-item">
<a class="ticker-list__item ticker-list__item--event" href="#">
<div class="ticker-list__item-date">
<time class="date date--small" datetime="2017-10-23"><span class="date__day">23</span><span class="u-hidden-visually">. </span><span class="date__month">Okt.</span></time>
</div>
<h3 class="ticker-list__item-title"><span class="ticker-list__item-title-inner">Terminmeldung dolor sit amet, consetetur sadipscing elitr</span></h3>
<div class="ticker-list__item-icon">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg>
</div>
</a>
</li>
<li class="ticker-list__list-item">
<a class="ticker-list__item ticker-list__item--event" href="#">
<div class="ticker-list__item-date">
<time class="date date--small" datetime="2017-10-02"><span class="date__day">2</span><span class="u-hidden-visually">. </span><span class="date__month">Okt.</span></time>
</div>
<h3 class="ticker-list__item-title"><span class="ticker-list__item-title-inner">Terminmeldung dolor sit amet, consetetur sadipscing elitr</span></h3>
<div class="ticker-list__item-icon">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg>
</div>
</a>
</li>
<li class="ticker-list__list-item">
<a class="ticker-list__item ticker-list__item--event" href="#">
<div class="ticker-list__item-date">
<time class="date date--small" datetime="2017-10-31"><span class="date__day">31</span><span class="u-hidden-visually">. </span><span class="date__month">Okt.</span></time>
</div>
<h3 class="ticker-list__item-title"><span class="ticker-list__item-title-inner">Terminmeldung ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmo</span></h3>
<div class="ticker-list__item-icon">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg>
</div>
</a>
</li>
</ul>
</div>{
"items": [
{
"type": "event",
"date": "2017-10-04",
"title": "Terminmeldung dolor sit amet, consetetur sadipscing elitr",
"link": "#"
},
{
"type": "event",
"date": "2017-10-23",
"title": "Terminmeldung dolor sit amet, consetetur sadipscing elitr",
"link": "#"
},
{
"type": "event",
"date": "2017-10-02",
"title": "Terminmeldung dolor sit amet, consetetur sadipscing elitr",
"link": "#"
},
{
"type": "event",
"date": "2017-10-31",
"title": "Terminmeldung ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmo",
"link": "#"
}
]
}