<div class="container">
<div class="row">
{% for num in (1..3) %}
<div class="col-12 col-sm-6 col-lg-4">
<div class="card card--basic">
<div class="card__body card-body">
<div class="card-title card__title">
<h3 class="headline headline--h3">Headline for basic card</h3>
</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
</p>
<div class="card__links">
<a href="javascript:void(0)" class="btn btn--primary d-block">Primary Button</a>
<a href="javascript:void(0)" class="btn btn--outline-primary d-block">Secondary Button</a>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<script type="module" src="/dist/js/kampmann.umd.min.js"></script>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="headline headline--h2">Unsere Produkte</h2>
</div>
{% for num in (1..3) %}
<div class="col-12 col-sm-6 col-lg-4">
<div class="card card--product">
<div class="card__slider swiper">
<div class="card__images swiper-wrapper">
<div class="swiper-slide">
<img
src="/src/compiled/assets/images/pictures/kampmann-unterflurkonvektor-katherm-qk-nano-space.png"
class="card-img-top"
alt="..."
/>
</div>
<div class="swiper-slide">
<img src="/src/compiled/assets/images/pictures/produkt-katherm-qk.png" class="card-img-top" alt="..." />
</div>
</div>
<div class="card__slider__control card__slider__control--prev swiper-button-prev">
<img src="/src/compiled/assets/images/graphics/arrow-right.svg" />
</div>
<div class="card__slider__control card__slider__control--next swiper-button-next">
<img src="/src/compiled/assets/images/graphics/arrow-right.svg" />
</div>
</div>
<div class="card-title card__title">
<h3 class="headline headline--h3">Katherm QK / Katherm HK / Katherm XY</h3>
</div>
<div class="card__body card-body">
<ul class="list list--unordered list__level-0">
<li class="list__item">
<span class="list__item-content">Reaktionsschnell mit marktführend leiser EC-Querstromventilation</span>
</li>
<li class="list__item"><span class="list__item-content">Kleinste Abmessungen</span></li>
<li class="list__item"><span class="list__item-content">Ein weiterer Listenpunkt für diese Card</span></li>
</ul>
<div class="card__links">
<a href="javascript:void(0)" class="btn btn--primary d-block">Berechnen</a>
<a href="javascript:void(0)" class="btn btn--outline-primary d-block">Produkt­details</a>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<script type="module" src="/dist/js/kampmann.umd.min.js"></script>
</div>
<div class="news container">
<div class="row align-items-stretch">
{% for news in site.data.news %}
{% assign image_width = 12 | minus: news.content_width %}
{% if news.content_width < 12 %}
{% assign card_width = 12 %}
{% else %}
{% assign card_width = 6 %}
{% endif %}
{% if news.color == 'gray-light' %}
{% assign btn_color = 'primary' %}
{% else %}
{% assign btn_color = 'white' %}
{% endif %}
<div class="col-12 col-md-{{ card_width }}">
<div class="card card--colored card--{{ news.color }}">
<div class="card__wrapper row">
{% if news.image_first %}
<div class="card__image__wrapper col-12 col-md-{{ image_width }}">
<div class="card__image">
<img src="{{ news.img }}" alt="..." />
</div>
</div>
{% endif %}
<div class="card__body__wrapper col-12 col-md-{{ news.content_width }}">
<div class="card__body">
<h2 class="news__title card-title headline headline--h2">{{ news.headline }}</h2>
<p class="card-text">{{ news.text }}</p>
<a href="javascript:void(0)" class="btn btn--{{ btn_color}}">Mehr erfahren</a>
</div>
</div>
{% if news.image_first != true %}
<div class="card__image__wrapper col-12 col-md-{{ image_width }}">
<div class="card__image">
<img src="{{ news.img }}" alt="..." />
</div>
</div>
{% endif %}
<a class="card__link" href="javascript:void(0)"></a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<script type="module" src="/dist/js/kampmann.umd.min.js"></script>
<div class="news container">
<div class="row">
{% for news in site.data.news_highlight %}
<div class="col-12">
<div class="news__item card card--news card--news-highlight card--{{ news.color }}">
<div class="row">
<div class="col-12 col-md-6 col-lg-7">
<img src="{{ news.img }}" class="card__image" alt="..." />
</div>
<div class="col-12 col-md-6 col-lg-5 d-flex">
<div class="card__body card-body">
<div class="card__data">
<p class="card__data__item label tag">{{ news.date }}</p>
<p class="card__data__item label tag">{{ news.label }}</p>
</div>
<h3 class="news__title card-title headline headline--h3">{{ news.headline }}</h3>
<p class="card-text">{{ news.text }}</p>
</div>
<a class="card__link" href="javascript:void(0)"></a>
</div>
</div>
</div>
</div>
</div>
<div class="row" data-masonry='{"percentPosition": true, "horizontalOrder": true }'>
{% endfor %} {% for news in site.data.news %}
<div class="col-12 col-md-6 col-lg-4">
<div class="news__item card card--news card--{{ news.color }}">
<img src="{{ news.img }}" class="card__image card-img-top" alt="..." />
<div class="card__body card-body">
<div class="card__data">
<p class="card__data__item label tag">{{ news.date }}</p>
<p class="card__data__item label tag">{{ news.label }}</p>
</div>
<h3 class="news__title card-title headline headline--h3">{{ news.headline }}</h3>
<p class="card-text">{{ news.text }}</p>
</div>
<a class="card__link" href="javascript:void(0)"></a>
</div>
</div>
{% endfor %}
</div>
</div>
<script type="module" src="/dist/js/kampmann.umd.min.js"></script>
<div class="container mb-5">
<div class="row">
<div class="col-12 col-md-8 col-lg-6 offset-md-2 offset-lg-3">
<div class="events swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="events__item card card--event mb-3">
<div class="card__wrapper row g-0">
<div class="card__content col-sm">
<div class="card__body card-body">
<div class="card__body__wrapper">
<div class="card__body__item card__body__item--details">
<p class="label card__type">Online Fachmesse</p>
<h4 class="card__title headline headline--h4 card-title">
<a href="javascript:void(0)">Projekt-Management in der TGA-Branche</a>
</h4>
</div>
<p class="card__body__item card__body__item--data card__data card-text text text--large">
<span class="card__data__item card__data__item--date"
><img src="/src/compiled/assets/images/icons/kampmann-event-date.svg" />05.02.2021</span
>
<span class="card__data__item card__data__item--location"
><img
src="/src/compiled/assets/images/icons/kampmann-event-location.svg"
/>Gelsenkirchen</span
>
</p>
</div>
</div>
</div>
<a href="javascript:void(0)" class="card__link col-sm-1">
<img
class="card__link__icon"
src="/src/compiled/assets/images/icons/kampmann-link.svg"
class="img-fluid rounded-start"
alt="..."
/>
</a>
</div>
</div>
<div class="events__item card card--event mb-3">
<div class="card__wrapper row g-0">
<div class="card__content col-sm">
<div class="card__body card-body">
<div class="card__body__wrapper">
<div class="card__body__item card__body__item--details">
<p class="label card__type">Online Fachmesse</p>
<h4 class="card__title headline headline--h4 card-title">
<a href="javascript:void(0)">Projekt-Management in der TGA-Branche</a>
</h4>
</div>
<p class="card__body__item card__body__item--data card__data card-text text text--large">
<span class="card__data__item card__data__item--date"
><img src="/src/compiled/assets/images/icons/kampmann-event-date.svg" />05.02.2021</span
>
<span class="card__data__item card__data__item--location"
><img
src="/src/compiled/assets/images/icons/kampmann-event-location.svg"
/>Gelsenkirchen</span
>
</p>
</div>
</div>
</div>
<a href="javascript:void(0)" class="card__link col-sm-1">
<img
class="card__link__icon"
src="/src/compiled/assets/images/icons/kampmann-link.svg"
class="img-fluid rounded-start"
alt="..."
/>
</a>
</div>
</div>
<div class="events__item card card--event mb-3">
<div class="card__wrapper row g-0">
<div class="card__content col-sm">
<div class="card__body card-body">
<div class="card__body__wrapper">
<div class="card__body__item card__body__item--details">
<p class="label card__type">Online Fachmesse</p>
<h4 class="card__title headline headline--h4 card-title">
<a href="javascript:void(0)">Projekt-Management in der TGA-Branche</a>
</h4>
</div>
<p class="card__body__item card__body__item--data card__data card-text text text--large">
<span class="card__data__item card__data__item--date"
><img src="/src/compiled/assets/images/icons/kampmann-event-date.svg" />05.02.2021</span
>
<span class="card__data__item card__data__item--location"
><img
src="/src/compiled/assets/images/icons/kampmann-event-location.svg"
/>Gelsenkirchen</span
>
</p>
</div>
</div>
</div>
<a href="javascript:void(0)" class="card__link col-sm-1">
<img
class="card__link__icon"
src="/src/compiled/assets/images/icons/kampmann-link.svg"
class="img-fluid rounded-start"
alt="..."
/>
</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="events__item card card--event mb-3">
<div class="card__wrapper row g-0">
<div class="card__content col-sm">
<div class="card__body card-body">
<div class="card__body__wrapper">
<div class="card__body__item card__body__item--details">
<p class="label card__type">Online Fachmesse</p>
<h4 class="card__title headline headline--h4 card-title">
<a href="javascript:void(0)">Projekt-Management in der TGA-Branche</a>
</h4>
</div>
<p class="card__body__item card__body__item--data card__data card-text text text--large">
<span class="card__data__item card__data__item--date"
><img src="/src/compiled/assets/images/icons/kampmann-event-date.svg" />05.02.2021</span
>
<span class="card__data__item card__data__item--location"
><img
src="/src/compiled/assets/images/icons/kampmann-event-location.svg"
/>Gelsenkirchen</span
>
</p>
</div>
</div>
</div>
<a href="javascript:void(0)" class="card__link col-sm-1">
<img
class="card__link__icon"
src="/src/compiled/assets/images/icons/kampmann-link.svg"
class="img-fluid rounded-start"
alt="..."
/>
</a>
</div>
</div>
<div class="events__item card card--event mb-3">
<div class="card__wrapper row g-0">
<div class="card__content col-sm">
<div class="card__body card-body">
<div class="card__body__wrapper">
<div class="card__body__item card__body__item--details">
<p class="label card__type">Online Fachmesse</p>
<h4 class="card__title headline headline--h4 card-title">
<a href="javascript:void(0)">Projekt-Management in der TGA-Branche</a>
</h4>
</div>
<p class="card__body__item card__body__item--data card__data card-text text text--large">
<span class="card__data__item card__data__item--date"
><img src="/src/compiled/assets/images/icons/kampmann-event-date.svg" />05.02.2021</span
>
<span class="card__data__item card__data__item--location"
><img
src="/src/compiled/assets/images/icons/kampmann-event-location.svg"
/>Gelsenkirchen</span
>
</p>
</div>
</div>
</div>
<a href="javascript:void(0)" class="card__link col-sm-1">
<img
class="card__link__icon"
src="/src/compiled/assets/images/icons/kampmann-link.svg"
class="img-fluid rounded-start"
alt="..."
/>
</a>
</div>
</div>
<div class="events__item card card--event mb-3">
<div class="card__wrapper row g-0">
<div class="card__content col-sm">
<div class="card__body card-body">
<div class="card__body__wrapper">
<div class="card__body__item card__body__item--details">
<p class="label card__type">Online Fachmesse</p>
<h4 class="card__title headline headline--h4 card-title">
<a href="javascript:void(0)">Projekt-Management in der TGA-Branche</a>
</h4>
</div>
<p class="card__body__item card__body__item--data card__data card-text text text--large">
<span class="card__data__item card__data__item--date"
><img src="/src/compiled/assets/images/icons/kampmann-event-date.svg" />05.02.2021</span
>
<span class="card__data__item card__data__item--location"
><img
src="/src/compiled/assets/images/icons/kampmann-event-location.svg"
/>Gelsenkirchen</span
>
</p>
</div>
</div>
</div>
<a href="javascript:void(0)" class="card__link col-sm-1">
<img
class="card__link__icon"
src="/src/compiled/assets/images/icons/kampmann-link.svg"
class="img-fluid rounded-start"
alt="..."
/>
</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="events__item card card--event mb-3">
<div class="card__wrapper row g-0">
<div class="card__content col-sm">
<div class="card__body card-body">
<div class="card__body__wrapper">
<div class="card__body__item card__body__item--details">
<p class="label card__type">Online Fachmesse</p>
<h4 class="card__title headline headline--h4 card-title">
<a href="javascript:void(0)">Projekt-Management in der TGA-Branche</a>
</h4>
</div>
<p class="card__body__item card__body__item--data card__data card-text text text--large">
<span class="card__data__item card__data__item--date"
><img src="/src/compiled/assets/images/icons/kampmann-event-date.svg" />05.02.2021</span
>
<span class="card__data__item card__data__item--location"
><img
src="/src/compiled/assets/images/icons/kampmann-event-location.svg"
/>Gelsenkirchen</span
>
</p>
</div>
</div>
</div>
<a href="javascript:void(0)" class="card__link col-sm-1">
<img
class="card__link__icon"
src="/src/compiled/assets/images/icons/kampmann-link.svg"
class="img-fluid rounded-start"
alt="..."
/>
</a>
</div>
</div>
<div class="events__item card card--event mb-3">
<div class="card__wrapper row g-0">
<div class="card__content col-sm">
<div class="card__body card-body">
<div class="card__body__wrapper">
<div class="card__body__item card__body__item--details">
<p class="label card__type">Online Fachmesse</p>
<h4 class="card__title headline headline--h4 card-title">
<a href="javascript:void(0)">Projekt-Management in der TGA-Branche</a>
</h4>
</div>
<p class="card__body__item card__body__item--data card__data card-text text text--large">
<span class="card__data__item card__data__item--date"
><img src="/src/compiled/assets/images/icons/kampmann-event-date.svg" />05.02.2021</span
>
<span class="card__data__item card__data__item--location"
><img
src="/src/compiled/assets/images/icons/kampmann-event-location.svg"
/>Gelsenkirchen</span
>
</p>
</div>
</div>
</div>
<a href="javascript:void(0)" class="card__link col-sm-1">
<img
class="card__link__icon"
src="/src/compiled/assets/images/icons/kampmann-link.svg"
class="img-fluid rounded-start"
alt="..."
/>
</a>
</div>
</div>
<div class="events__item card card--event mb-3">
<div class="card__wrapper row g-0">
<div class="card__content col-sm">
<div class="card__body card-body">
<div class="card__body__wrapper">
<div class="card__body__item card__body__item--details">
<p class="label card__type">Online Fachmesse</p>
<h4 class="card__title headline headline--h4 card-title">
<a href="javascript:void(0)">Projekt-Management in der TGA-Branche</a>
</h4>
</div>
<p class="card__body__item card__body__item--data card__data card-text text text--large">
<span class="card__data__item card__data__item--date"
><img src="/src/compiled/assets/images/icons/kampmann-event-date.svg" />05.02.2021</span
>
<span class="card__data__item card__data__item--location"
><img
src="/src/compiled/assets/images/icons/kampmann-event-location.svg"
/>Gelsenkirchen</span
>
</p>
</div>
</div>
</div>
<a href="javascript:void(0)" class="card__link col-sm-1">
<img
class="card__link__icon"
src="/src/compiled/assets/images/icons/kampmann-link.svg"
class="img-fluid rounded-start"
alt="..."
/>
</a>
</div>
</div>
</div>
</div>
<div class="navigation__dots swiper-pagination"></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<div class="events swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="events__item card card--event mb-3">
<div class="card__wrapper row g-0">
<div class="card__content col-sm">
<div class="card__body card-body">
<div class="card__body__wrapper">
<div class="card__body__item card__body__item--details">
<p class="label card__type">Online Fachmesse</p>
<h4 class="card__title headline headline--h4 card-title">
<a href="javascript:void(0)">Projekt-Management in der TGA-Branche</a>
</h4>
<p class="card__teaser">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
</p>
</div>
<p class="card__body__item card__body__item--data card__data card-text text text--large">
<span class="card__data__item card__data__item--date"
><img src="/src/compiled/assets/images/icons/kampmann-event-date.svg" />05.02.2021</span
>
<span class="card__data__item card__data__item--location"
><img
src="/src/compiled/assets/images/icons/kampmann-event-location.svg"
/>Gelsenkirchen</span
>
</p>
</div>
<div class="card__status__wrapper">
<div class="card__status status">
<span class="card__status__item status__item status__item--good status__item--checked"></span>
<span class="card__status__item status__item status__item--neutral"></span>
<span class="card__status__item status__item status__item--bad"></span>
</div>
</div>
</div>
</div>
<a href="javascript:void(0)" class="card__link col-sm-1">
<img
class="card__link__icon"
src="/src/compiled/assets/images/icons/kampmann-link.svg"
class="img-fluid rounded-start"
alt="..."
/>
</a>
</div>
</div>
<div class="events__item card card--event mb-3">
<div class="card__wrapper row g-0">
<div class="card__content col-sm">
<div class="card__body card-body">
<div class="card__body__wrapper">
<div class="card__body__item card__body__item--details">
<p class="label card__type">Online Fachmesse</p>
<h4 class="card__title headline headline--h4 card-title">
<a href="javascript:void(0)">Projekt-Management in der TGA-Branche</a>
</h4>
<p class="card__teaser">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa.
</p>
</div>
<p class="card__body__item card__body__item--data card__data card-text text text--large">
<span class="card__data__item card__data__item--date"
><img src="/src/compiled/assets/images/icons/kampmann-event-date.svg" />05.02.2021</span
>
<span class="card__data__item card__data__item--location"
><img
src="/src/compiled/assets/images/icons/kampmann-event-location.svg"
/>Gelsenkirchen</span
>
</p>
</div>
<div class="card__status__wrapper">
<div class="card__status status">
<span class="card__status__item status__item status__item--good"></span>
<span
class="card__status__item status__item status__item--neutral status__item--checked"
></span>
<span class="card__status__item status__item status__item--bad"></span>
</div>
</div>
</div>
</div>
<a href="javascript:void(0)" class="card__link col-sm-1">
<img
class="card__link__icon"
src="/src/compiled/assets/images/icons/kampmann-link.svg"
class="img-fluid rounded-start"
alt="..."
/>
</a>
</div>
</div>
<div class="events__item card card--event mb-3">
<div class="card__wrapper row g-0">
<div class="card__content col-sm">
<div class="card__body card-body">
<div class="card__body__wrapper">
<div class="card__body__item card__body__item--details">
<p class="label card__type">Online Fachmesse</p>
<h4 class="card__title headline headline--h4 card-title">
<a href="javascript:void(0)">Projekt-Management in der TGA-Branche</a>
</h4>
<p class="card__teaser">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus.
</p>
</div>
<p class="card__body__item card__body__item--data card__data card-text text text--large">
<span class="card__data__item card__data__item--date"
><img src="/src/compiled/assets/images/icons/kampmann-event-date.svg" />05.02.2021</span
>
<span class="card__data__item card__data__item--location"
><img
src="/src/compiled/assets/images/icons/kampmann-event-location.svg"
/>Gelsenkirchen</span
>
</p>
</div>
<div class="card__status__wrapper">
<div class="card__status status">
<span class="card__status__item status__item status__item--good"></span>
<span class="card__status__item status__item status__item--neutral"></span>
<span class="card__status__item status__item status__item--bad status__item--checked"></span>
</div>
</div>
</div>
</div>
<a href="javascript:void(0)" class="card__link col-sm-1">
<img
class="card__link__icon"
src="/src/compiled/assets/images/icons/kampmann-link.svg"
class="img-fluid rounded-start"
alt="..."
/>
</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="events__item card card--event mb-3">
<div class="card__wrapper row g-0">
<div class="card__content col-sm">
<div class="card__body card-body">
<div class="card__body__wrapper">
<div class="card__body__item card__body__item--details">
<p class="label card__type">Online Fachmesse</p>
<h4 class="card__title headline headline--h4 card-title">
<a href="javascript:void(0)">Projekt-Management in der TGA-Branche</a>
</h4>
<p class="card__teaser">Online Praxis-Seminar mit Planspiel</p>
</div>
<p class="card__body__item card__body__item--data card__data card-text text text--large">
<span class="card__data__item card__data__item--date"
><img src="/src/compiled/assets/images/icons/kampmann-event-date.svg" />05.02.2021</span
>
<span class="card__data__item card__data__item--location"
><img
src="/src/compiled/assets/images/icons/kampmann-event-location.svg"
/>Gelsenkirchen</span
>
</p>
</div>
<div class="card__status__wrapper">
<div class="card__status status">
<span class="card__status__item status__item status__item--good status__item--checked"></span>
<span class="card__status__item status__item status__item--neutral"></span>
<span class="card__status__item status__item status__item--bad"></span>
</div>
</div>
</div>
</div>
<a href="javascript:void(0)" class="card__link col-sm-1">
<img
class="card__link__icon"
src="/src/compiled/assets/images/icons/kampmann-link.svg"
class="img-fluid rounded-start"
alt="..."
/>
</a>
</div>
</div>
<div class="events__item card card--event mb-3">
<div class="card__wrapper row g-0">
<div class="card__content col-sm">
<div class="card__body card-body">
<div class="card__body__wrapper">
<div class="card__body__item card__body__item--details">
<p class="label card__type">Online Fachmesse</p>
<h4 class="card__title headline headline--h4 card-title">
<a href="javascript:void(0)">Projekt-Management in der TGA-Branche</a>
</h4>
<p class="card__teaser">Online Praxis-Seminar mit Planspiel</p>
</div>
<p class="card__body__item card__body__item--data card__data card-text text text--large">
<span class="card__data__item card__data__item--date"
><img src="/src/compiled/assets/images/icons/kampmann-event-date.svg" />05.02.2021</span
>
<span class="card__data__item card__data__item--location"
><img
src="/src/compiled/assets/images/icons/kampmann-event-location.svg"
/>Gelsenkirchen</span
>
</p>
</div>
<div class="card__status__wrapper">
<div class="card__status status">
<span class="card__status__item status__item status__item--good status__item--checked"></span>
<span class="card__status__item status__item status__item--neutral"></span>
<span class="card__status__item status__item status__item--bad"></span>
</div>
</div>
</div>
</div>
<a href="javascript:void(0)" class="card__link col-sm-1">
<img
class="card__link__icon"
src="/src/compiled/assets/images/icons/kampmann-link.svg"
class="img-fluid rounded-start"
alt="..."
/>
</a>
</div>
</div>
<div class="events__item card card--event mb-3">
<div class="card__wrapper row g-0">
<div class="card__content col-sm">
<div class="card__body card-body">
<div class="card__body__wrapper">
<div class="card__body__item card__body__item--details">
<p class="label card__type">Online Fachmesse</p>
<h4 class="card__title headline headline--h4 card-title">
<a href="javascript:void(0)">Projekt-Management in der TGA-Branche</a>
</h4>
<p class="card__teaser">Online Praxis-Seminar mit Planspiel</p>
</div>
<p class="card__body__item card__body__item--data card__data card-text text text--large">
<span class="card__data__item card__data__item--date"
><img src="/src/compiled/assets/images/icons/kampmann-event-date.svg" />05.02.2021</span
>
<span class="card__data__item card__data__item--location"
><img
src="/src/compiled/assets/images/icons/kampmann-event-location.svg"
/>Gelsenkirchen</span
>
</p>
</div>
<div class="card__status__wrapper">
<div class="card__status status">
<span class="card__status__item status__item status__item--good status__item--checked"></span>
<span class="card__status__item status__item status__item--neutral"></span>
<span class="card__status__item status__item status__item--bad"></span>
</div>
</div>
</div>
</div>
<a href="javascript:void(0)" class="card__link col-sm-1">
<img
class="card__link__icon"
src="/src/compiled/assets/images/icons/kampmann-link.svg"
class="img-fluid rounded-start"
alt="..."
/>
</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="events__item card card--event mb-3">
<div class="card__wrapper row g-0">
<div class="card__content col-sm">
<div class="card__body card-body">
<div class="card__body__wrapper">
<div class="card__body__item card__body__item--details">
<p class="label card__type">Online Fachmesse</p>
<h4 class="card__title headline headline--h4 card-title">
<a href="javascript:void(0)">Projekt-Management in der TGA-Branche</a>
</h4>
<p class="card__teaser">Online Praxis-Seminar mit Planspiel</p>
</div>
<p class="card__body__item card__body__item--data card__data card-text text text--large">
<span class="card__data__item card__data__item--date"
><img src="/src/compiled/assets/images/icons/kampmann-event-date.svg" />05.02.2021</span
>
<span class="card__data__item card__data__item--location"
><img
src="/src/compiled/assets/images/icons/kampmann-event-location.svg"
/>Gelsenkirchen</span
>
</p>
</div>
<div class="card__status__wrapper">
<div class="card__status status">
<span class="card__status__item status__item status__item--good status__item--checked"></span>
<span class="card__status__item status__item status__item--neutral"></span>
<span class="card__status__item status__item status__item--bad"></span>
</div>
</div>
</div>
</div>
<a href="javascript:void(0)" class="card__link col-sm-1">
<img
class="card__link__icon"
src="/src/compiled/assets/images/icons/kampmann-link.svg"
class="img-fluid rounded-start"
alt="..."
/>
</a>
</div>
</div>
<div class="events__item card card--event mb-3">
<div class="card__wrapper row g-0">
<div class="card__content col-sm">
<div class="card__body card-body">
<div class="card__body__wrapper">
<div class="card__body__item card__body__item--details">
<p class="label card__type">Online Fachmesse</p>
<h4 class="card__title headline headline--h4 card-title">
<a href="javascript:void(0)">Projekt-Management in der TGA-Branche</a>
</h4>
<p class="card__teaser">Online Praxis-Seminar mit Planspiel</p>
</div>
<p class="card__body__item card__body__item--data card__data card-text text text--large">
<span class="card__data__item card__data__item--date"
><img src="/src/compiled/assets/images/icons/kampmann-event-date.svg" />05.02.2021</span
>
<span class="card__data__item card__data__item--location"
><img
src="/src/compiled/assets/images/icons/kampmann-event-location.svg"
/>Gelsenkirchen</span
>
</p>
</div>
<div class="card__status__wrapper">
<div class="card__status status">
<span class="card__status__item status__item status__item--good status__item--checked"></span>
<span class="card__status__item status__item status__item--neutral"></span>
<span class="card__status__item status__item status__item--bad"></span>
</div>
</div>
</div>
</div>
<a href="javascript:void(0)" class="card__link col-sm-1">
<img
class="card__link__icon"
src="/src/compiled/assets/images/icons/kampmann-link.svg"
class="img-fluid rounded-start"
alt="..."
/>
</a>
</div>
</div>
<div class="events__item card card--event mb-3">
<div class="card__wrapper row g-0">
<div class="card__content col-sm">
<div class="card__body card-body">
<div class="card__body__wrapper">
<div class="card__body__item card__body__item--details">
<p class="label card__type">Online Fachmesse</p>
<h4 class="card__title headline headline--h4 card-title">
<a href="javascript:void(0)">Projekt-Management in der TGA-Branche</a>
</h4>
<p class="card__teaser">Online Praxis-Seminar mit Planspiel</p>
</div>
<p class="card__body__item card__body__item--data card__data card-text text text--large">
<span class="card__data__item card__data__item--date"
><img src="/src/compiled/assets/images/icons/kampmann-event-date.svg" />05.02.2021</span
>
<span class="card__data__item card__data__item--location"
><img
src="/src/compiled/assets/images/icons/kampmann-event-location.svg"
/>Gelsenkirchen</span
>
</p>
</div>
<div class="card__status__wrapper">
<div class="card__status status">
<span class="card__status__item status__item status__item--good status__item--checked"></span>
<span class="card__status__item status__item status__item--neutral"></span>
<span class="card__status__item status__item status__item--bad"></span>
</div>
</div>
</div>
</div>
<a href="javascript:void(0)" class="card__link col-sm-1">
<img
class="card__link__icon"
src="/src/compiled/assets/images/icons/kampmann-link.svg"
class="img-fluid rounded-start"
alt="..."
/>
</a>
</div>
</div>
</div>
</div>
<div class="navigation__dots swiper-pagination"></div>
</div>
</div>
</div>
</div>
<script type="module" src="/dist/js/kampmann.umd.min.js"></script>