Project cards
Project cards description#01 Default Project card
Default project card
Bezugsfertig
Nassauische Heimstätte
WOHNPARK Am alten Park - Kelkheim
Neubau von 84 Doppel- und Reihenhäusern Kleyerstraße 11-16, 60326 Frankfurt am Main
- Preis325.000 - 780.000 €
- Wohnfläche55 m2 - 140 m2
- Zimmer2 - 4
- BezugsfertigFrühjahr 2024
<div class="row">
<div class="col">
<div class="nbk-project-card ">
<header class="nbk-project-card__header">
<div class="container">
<div class="row justify-content-between">
<div class="col-auto col-md-auto me-auto">
<span class="badge rounded-pill bg-primary nbk-project-card__badge">Bezugsfertig</span>
</div>
<div class="col-auto ms-auto">
<button class="btn btn--icon-only nbk-project-card__btn-favorite ">
<span class="btn__icon btn__icon--lg"> <svg width="28" height="25" viewbox="0 0 28 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.2796 3.13867L15.2799 3.13834C17.7491 0.513379 21.6869 0.136215 24.304 2.43374C27.3654 5.12589 27.5314 9.97951 24.7814 12.9035L24.7812 12.9036L14.4155 23.9314C14.0223 24.3495 13.4018 24.3495 13.0086 23.9314L2.6431 12.904C2.643 12.9039 2.6429 12.9037 2.64281 12.9036C-0.102015 9.97963 0.0639981 5.1261 3.12512 2.43395C5.74253 0.13595 9.68553 0.513713 12.149 3.13783L12.1498 3.13867L13.2051 4.25913L13.7147 4.80013L14.2243 4.25913L15.2796 3.13867Z"
fill="currentColor" stroke="currentColor" stroke-width="1.4"/>
</svg>
</span></button>
</div>
</div>
</div>
</header>
<section class="nbk-project-card__main">
<div class="row g-0">
<div class="col-12 col-md-6 d-flex">
<div class="nbk-project-card__media-container">
<div class="swiper nbk-project-card__slider" data-nbk-project-card-slider>
<div class="swiper-wrapper">
<div class="swiper-slide">
<figure class="nbk-project-card__figure ">
<img data-src="/assets/project-pictures/wohnheimkelkheim/1.jpg" width="1600" height="900"
class="lazy nbk-project-card__image"/>
</figure>
</div>
<div class="swiper-slide">
<figure class="nbk-project-card__figure ">
<img data-src="/assets/project-pictures/wohnheimkelkheim/2.jpg" width="1600" height="900"
class="lazy nbk-project-card__image"/>
</figure>
</div>
<div class="swiper-slide">
<figure class="nbk-project-card__figure ">
<img data-src="/assets/project-pictures/wohnheimkelkheim/3.jpg" width="1600" height="900"
class="lazy nbk-project-card__image"/>
</figure>
</div>
<div class="swiper-slide">
<figure class="nbk-project-card__figure ">
<img data-src="/assets/project-pictures/wohnheimkelkheim/4.jpg" width="1600" height="900"
class="lazy nbk-project-card__image"/>
</figure>
</div>
<div class="swiper-slide">
<figure class="nbk-project-card__figure ">
<img data-src="/assets/project-pictures/wohnheimkelkheim/5.jpg" width="1600" height="900"
class="lazy nbk-project-card__image"/>
</figure>
</div>
<div class="swiper-slide">
<figure class="nbk-project-card__figure ">
<img data-src="/assets/project-pictures/wohnheimkelkheim/6.jpg" width="1600" height="900"
class="lazy nbk-project-card__image"/>
</figure>
</div>
<div class="swiper-slide">
<figure class="nbk-project-card__figure ">
<img data-src="/assets/project-pictures/wohnheimkelkheim/7.jpg" width="1600" height="900"
class="lazy nbk-project-card__image"/>
</figure>
</div>
<div class="swiper-slide">
<figure class="nbk-project-card__figure nbk-project-card__figure--shadow ">
<img data-src="/assets/project-pictures/wohnheimkelkheim/8.jpg" width="1600" height="900"
class="lazy nbk-project-card__image"/>
</figure>
</div>
</div>
<div class="nbk-project-card__slider-shadow-overlay"></div>
<div class="swiper-pagination nbk-project-card__slider-pagination"></div>
<div class="nbk-project-card__slider-arrows d-none d-md-block" data-nbk-project-card-navigation>
<button class="swiper-button-prev btn btn-sm btn--icon-only btn-outline-light btn-outline-transparent">
<span class="btn__icon">
<svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7.45711 0.792893C7.84763 1.18342 7.84763 1.81658 7.45711 2.20711L2.66421 7L7.45711 11.7929C7.84763 12.1834 7.84763 12.8166 7.45711 13.2071C7.06658 13.5976 6.43342 13.5976 6.04289 13.2071L0.542893 7.70711C0.152369 7.31658 0.152369 6.68342 0.542893 6.29289L6.04289 0.792893C6.43342 0.402369 7.06658 0.402369 7.45711 0.792893Z"/>
</svg>
</span>
</button>
<button class="swiper-button-next btn btn-sm btn--icon-only btn-outline-light btn-outline-transparent">
<span class="btn__icon">
<svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.542893 13.2071C0.152369 12.8166 0.152369 12.1834 0.542893 11.7929L5.33579 7L0.542893 2.20711C0.152369 1.81658 0.152369 1.18342 0.542893 0.792894C0.933417 0.402369 1.56658 0.402369 1.95711 0.792894L7.45711 6.29289C7.84763 6.68342 7.84763 7.31658 7.45711 7.70711L1.95711 13.2071C1.56658 13.5976 0.933417 13.5976 0.542893 13.2071Z"/>
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="nbk-project-card__content">
<div class="row">
<div class="col col-12 col-md-9">
<h4 class="nbk-project-card__sub-title">Nassauische Heimstätte</h4>
<h2 class="nbk-project-card__title">WOHNPARK Am alten Park - Kelkheim</h2>
<p class="nbk-project-card__description">Neubau von 84 Doppel- und Reihenhäusern Kleyerstraße 11-16, 60326 Frankfurt am Main</p>
</div>
<div class="col-12 col-md-6">
<ul class="row nbk-project-card__list">
<li class="col-6 col-md-12 nbk-project-card__spec-item">
<div class="nbk-project-card__spec-label">Preis</div>
<span class="nbk-project-card__spec-value">325.000 - 780.000 €</span>
</li>
<li class="col-6 col-md-12 nbk-project-card__spec-item">
<div class="nbk-project-card__spec-label">Wohnfläche</div>
<span class="nbk-project-card__spec-value">55 m2 - 140 m2</span>
</li>
<li class="col-6 col-md-12 nbk-project-card__spec-item">
<div class="nbk-project-card__spec-label">Zimmer</div>
<span class="nbk-project-card__spec-value">2 - 4</span>
</li>
<li class="col-6 col-md-12 nbk-project-card__spec-item">
<div class="nbk-project-card__spec-label">Bezugsfertig</div>
<span class="nbk-project-card__spec-value">Frühjahr 2024</span>
</li>
</ul>
</div>
<div class="col-12 col-md-auto ms-md-auto flex-column justify-content-end d-none d-md-flex">
<div class="nbk-project-card__cta-content">
<div class="nbk-project-card__cta-content-item">
<a href="#">
<img class="lazy nbk-project-card__side-image" data-src="/assets/investor.svg" alt="investor logo">
</a>
</div>
<div class="nbk-project-card__cta-content-item">
<a href="/project.html" class="btn btn-outline-secondary" type="button" >
Zum Projekt
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="nbk-project-card__footer">
<a href="/project.html" class="nbk-project-card__mobile_project-cta">
<span class="nbk-project-card__mobile_project-cta-text">Zum Projekt</span>
<span class="nbk-project-card__footer-icon"> <svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.542893 13.2071C0.152369 12.8166 0.152369 12.1834 0.542893 11.7929L5.33579 7L0.542893 2.20711C0.152369 1.81658 0.152369 1.18342 0.542893 0.792894C0.933417 0.402369 1.56658 0.402369 1.95711 0.792894L7.45711 6.29289C7.84763 6.68342 7.84763 7.31658 7.45711 7.70711L1.95711 13.2071C1.56658 13.5976 0.933417 13.5976 0.542893 13.2071Z"/>
</svg>
</span>
</a>
</footer>
</div>
</div>
</div>
#02 Project card default - highlighted
Default project card - highlighted.
For highlighting add the class .nbk-project-card__btn-favorite--is-active to the button with the class .nbk-project-card__btn-favorite
Top Lage
INSTONE REAL ESTATE
WINGS Gallusviertel-Frankfurt
Neubau von 84 Doppel- und Reihenhäusern Kleyerstraße 11-16, 60326 Frankfurt am Main
- Preis1.820.523 - 4.256.000 €
- Wohnfläche104 m2
- Zimmer2 - 6
- BezugsfertigApril 2025
<div class="row">
<div class="col">
<div class="nbk-project-card ">
<header class="nbk-project-card__header">
<div class="container">
<div class="row justify-content-between">
<div class="col-auto col-md-auto me-auto">
<span class="badge rounded-pill bg-primary nbk-project-card__badge">Top Lage</span>
</div>
<div class="col-auto ms-auto">
<button class="btn btn--icon-only nbk-project-card__btn-favorite nbk-project-card__btn-favorite--is-active ">
<span class="btn__icon btn__icon--lg"> <svg width="28" height="25" viewbox="0 0 28 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.2796 3.13867L15.2799 3.13834C17.7491 0.513379 21.6869 0.136215 24.304 2.43374C27.3654 5.12589 27.5314 9.97951 24.7814 12.9035L24.7812 12.9036L14.4155 23.9314C14.0223 24.3495 13.4018 24.3495 13.0086 23.9314L2.6431 12.904C2.643 12.9039 2.6429 12.9037 2.64281 12.9036C-0.102015 9.97963 0.0639981 5.1261 3.12512 2.43395C5.74253 0.13595 9.68553 0.513713 12.149 3.13783L12.1498 3.13867L13.2051 4.25913L13.7147 4.80013L14.2243 4.25913L15.2796 3.13867Z"
fill="currentColor" stroke="currentColor" stroke-width="1.4"/>
</svg>
</span></button>
</div>
</div>
</div>
</header>
<section class="nbk-project-card__main">
<div class="row g-0">
<div class="col-12 col-md-6 d-flex">
<div class="nbk-project-card__media-container">
<div class="swiper nbk-project-card__slider" data-nbk-project-card-slider>
<div class="swiper-wrapper">
<div class="swiper-slide">
<figure class="nbk-project-card__figure ">
<img data-src="/assets/project-pictures/gallusviertel/gallusviertel.jpg" width="1600" height="900"
class="lazy nbk-project-card__image"/>
</figure>
</div>
</div>
<div class="nbk-project-card__slider-shadow-overlay"></div>
<div class="swiper-pagination nbk-project-card__slider-pagination"></div>
<div class="nbk-project-card__slider-arrows d-none d-md-block" data-nbk-project-card-navigation>
<button class="swiper-button-prev btn btn-sm btn--icon-only btn-outline-light btn-outline-transparent">
<span class="btn__icon">
<svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7.45711 0.792893C7.84763 1.18342 7.84763 1.81658 7.45711 2.20711L2.66421 7L7.45711 11.7929C7.84763 12.1834 7.84763 12.8166 7.45711 13.2071C7.06658 13.5976 6.43342 13.5976 6.04289 13.2071L0.542893 7.70711C0.152369 7.31658 0.152369 6.68342 0.542893 6.29289L6.04289 0.792893C6.43342 0.402369 7.06658 0.402369 7.45711 0.792893Z"/>
</svg>
</span>
</button>
<button class="swiper-button-next btn btn-sm btn--icon-only btn-outline-light btn-outline-transparent">
<span class="btn__icon">
<svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.542893 13.2071C0.152369 12.8166 0.152369 12.1834 0.542893 11.7929L5.33579 7L0.542893 2.20711C0.152369 1.81658 0.152369 1.18342 0.542893 0.792894C0.933417 0.402369 1.56658 0.402369 1.95711 0.792894L7.45711 6.29289C7.84763 6.68342 7.84763 7.31658 7.45711 7.70711L1.95711 13.2071C1.56658 13.5976 0.933417 13.5976 0.542893 13.2071Z"/>
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="nbk-project-card__content">
<div class="row">
<div class="col col-12 col-md-9">
<h4 class="nbk-project-card__sub-title">INSTONE REAL ESTATE</h4>
<h2 class="nbk-project-card__title">WINGS Gallusviertel-Frankfurt</h2>
<p class="nbk-project-card__description">Neubau von 84 Doppel- und Reihenhäusern Kleyerstraße 11-16, 60326 Frankfurt am Main</p>
</div>
<div class="col-12 col-md-6">
<ul class="row nbk-project-card__list">
<li class="col-6 col-md-12 nbk-project-card__spec-item">
<div class="nbk-project-card__spec-label">Preis</div>
<span class="nbk-project-card__spec-value">1.820.523 - 4.256.000 €</span>
</li>
<li class="col-6 col-md-12 nbk-project-card__spec-item">
<div class="nbk-project-card__spec-label">Wohnfläche</div>
<span class="nbk-project-card__spec-value">104 m2</span>
</li>
<li class="col-6 col-md-12 nbk-project-card__spec-item">
<div class="nbk-project-card__spec-label">Zimmer</div>
<span class="nbk-project-card__spec-value">2 - 6</span>
</li>
<li class="col-6 col-md-12 nbk-project-card__spec-item">
<div class="nbk-project-card__spec-label">Bezugsfertig</div>
<span class="nbk-project-card__spec-value">April 2025</span>
</li>
</ul>
</div>
<div class="col-12 col-md-auto ms-md-auto flex-column justify-content-end d-none d-md-flex">
<div class="nbk-project-card__cta-content">
<div class="nbk-project-card__cta-content-item">
<a href="#">
<img class="lazy nbk-project-card__side-image" data-src="/assets/investor.svg" alt="investor logo">
</a>
</div>
<div class="nbk-project-card__cta-content-item">
<a href="/project.html" class="btn btn-outline-secondary" type="button" >
Zum Projekt
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="nbk-project-card__footer">
<a href="/project.html" class="nbk-project-card__mobile_project-cta">
<span class="nbk-project-card__mobile_project-cta-text">Zum Projekt</span>
<span class="nbk-project-card__footer-icon"> <svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.542893 13.2071C0.152369 12.8166 0.152369 12.1834 0.542893 11.7929L5.33579 7L0.542893 2.20711C0.152369 1.81658 0.152369 1.18342 0.542893 0.792894C0.933417 0.402369 1.56658 0.402369 1.95711 0.792894L7.45711 6.29289C7.84763 6.68342 7.84763 7.31658 7.45711 7.70711L1.95711 13.2071C1.56658 13.5976 0.933417 13.5976 0.542893 13.2071Z"/>
</svg>
</span>
</a>
</footer>
</div>
</div>
</div>
#03 Project card dark
Dark project card.
To activate the dark mode for the card, add the class .nbk-project-card--dark to the element .nbk-project-card
Top Lage
INSTONE REAL ESTATE
WINGS Gallusviertel-Frankfurt
Neubau von 84 Doppel- und Reihenhäusern Kleyerstraße 11-16, 60326 Frankfurt am Main
- Preis1.820.523 - 4.256.000 €
- Wohnfläche104 m2
- Zimmer2 - 6
- BezugsfertigApril 2025
<div class="row">
<div class="col">
<div class="nbk-project-card nbk-project-card--dark ">
<header class="nbk-project-card__header">
<div class="container">
<div class="row justify-content-between">
<div class="col-auto col-md-auto me-auto">
<span class="badge rounded-pill bg-primary nbk-project-card__badge">Top Lage</span>
</div>
<div class="col-auto ms-auto">
<button class="btn btn--icon-only nbk-project-card__btn-favorite ">
<span class="btn__icon btn__icon--lg"> <svg width="28" height="25" viewbox="0 0 28 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.2796 3.13867L15.2799 3.13834C17.7491 0.513379 21.6869 0.136215 24.304 2.43374C27.3654 5.12589 27.5314 9.97951 24.7814 12.9035L24.7812 12.9036L14.4155 23.9314C14.0223 24.3495 13.4018 24.3495 13.0086 23.9314L2.6431 12.904C2.643 12.9039 2.6429 12.9037 2.64281 12.9036C-0.102015 9.97963 0.0639981 5.1261 3.12512 2.43395C5.74253 0.13595 9.68553 0.513713 12.149 3.13783L12.1498 3.13867L13.2051 4.25913L13.7147 4.80013L14.2243 4.25913L15.2796 3.13867Z"
fill="currentColor" stroke="currentColor" stroke-width="1.4"/>
</svg>
</span></button>
</div>
</div>
</div>
</header>
<section class="nbk-project-card__main">
<div class="row g-0">
<div class="col-12 col-md-6 d-flex">
<div class="nbk-project-card__media-container">
<div class="swiper nbk-project-card__slider" data-nbk-project-card-slider>
<div class="swiper-wrapper">
<div class="swiper-slide">
<figure class="nbk-project-card__figure ">
<img data-src="/assets/project-pictures/gallusviertel/gallusviertel.jpg" width="1600" height="900"
class="lazy nbk-project-card__image"/>
</figure>
</div>
</div>
<div class="nbk-project-card__slider-shadow-overlay"></div>
<div class="swiper-pagination nbk-project-card__slider-pagination"></div>
<div class="nbk-project-card__slider-arrows d-none d-md-block" data-nbk-project-card-navigation>
<button class="swiper-button-prev btn btn-sm btn--icon-only btn-outline-light btn-outline-transparent">
<span class="btn__icon">
<svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7.45711 0.792893C7.84763 1.18342 7.84763 1.81658 7.45711 2.20711L2.66421 7L7.45711 11.7929C7.84763 12.1834 7.84763 12.8166 7.45711 13.2071C7.06658 13.5976 6.43342 13.5976 6.04289 13.2071L0.542893 7.70711C0.152369 7.31658 0.152369 6.68342 0.542893 6.29289L6.04289 0.792893C6.43342 0.402369 7.06658 0.402369 7.45711 0.792893Z"/>
</svg>
</span>
</button>
<button class="swiper-button-next btn btn-sm btn--icon-only btn-outline-light btn-outline-transparent">
<span class="btn__icon">
<svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.542893 13.2071C0.152369 12.8166 0.152369 12.1834 0.542893 11.7929L5.33579 7L0.542893 2.20711C0.152369 1.81658 0.152369 1.18342 0.542893 0.792894C0.933417 0.402369 1.56658 0.402369 1.95711 0.792894L7.45711 6.29289C7.84763 6.68342 7.84763 7.31658 7.45711 7.70711L1.95711 13.2071C1.56658 13.5976 0.933417 13.5976 0.542893 13.2071Z"/>
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="nbk-project-card__content">
<div class="row">
<div class="col col-12 col-md-9">
<h4 class="nbk-project-card__sub-title">INSTONE REAL ESTATE</h4>
<h2 class="nbk-project-card__title">WINGS Gallusviertel-Frankfurt</h2>
<p class="nbk-project-card__description">Neubau von 84 Doppel- und Reihenhäusern Kleyerstraße 11-16, 60326 Frankfurt am Main</p>
</div>
<div class="col-12 col-md-6">
<ul class="row nbk-project-card__list">
<li class="col-6 col-md-12 nbk-project-card__spec-item">
<div class="nbk-project-card__spec-label">Preis</div>
<span class="nbk-project-card__spec-value">1.820.523 - 4.256.000 €</span>
</li>
<li class="col-6 col-md-12 nbk-project-card__spec-item">
<div class="nbk-project-card__spec-label">Wohnfläche</div>
<span class="nbk-project-card__spec-value">104 m2</span>
</li>
<li class="col-6 col-md-12 nbk-project-card__spec-item">
<div class="nbk-project-card__spec-label">Zimmer</div>
<span class="nbk-project-card__spec-value">2 - 6</span>
</li>
<li class="col-6 col-md-12 nbk-project-card__spec-item">
<div class="nbk-project-card__spec-label">Bezugsfertig</div>
<span class="nbk-project-card__spec-value">April 2025</span>
</li>
</ul>
</div>
<div class="col-12 col-md-auto ms-md-auto flex-column justify-content-end d-none d-md-flex">
<div class="nbk-project-card__cta-content">
<div class="nbk-project-card__cta-content-item">
<a href="#">
<img class="lazy nbk-project-card__side-image" data-src="/assets/investor.svg" alt="investor logo">
</a>
</div>
<div class="nbk-project-card__cta-content-item">
<a href="/project.html" class="btn btn-outline-secondary" type="button" >
Zum Projekt
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="nbk-project-card__footer">
<a href="/project.html" class="nbk-project-card__mobile_project-cta">
<span class="nbk-project-card__mobile_project-cta-text">Zum Projekt</span>
<span class="nbk-project-card__footer-icon"> <svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.542893 13.2071C0.152369 12.8166 0.152369 12.1834 0.542893 11.7929L5.33579 7L0.542893 2.20711C0.152369 1.81658 0.152369 1.18342 0.542893 0.792894C0.933417 0.402369 1.56658 0.402369 1.95711 0.792894L7.45711 6.29289C7.84763 6.68342 7.84763 7.31658 7.45711 7.70711L1.95711 13.2071C1.56658 13.5976 0.933417 13.5976 0.542893 13.2071Z"/>
</svg>
</span>
</a>
</footer>
</div>
</div>
</div>
#04 Project card dark - highlighted
Default project card dark - highlighted.
For highlighting add the class .nbk-project-card__btn-favorite--is-active to the button with the class .nbk-project-card__btn-favorite
Top Lage
INSTONE REAL ESTATE
WINGS Gallusviertel-Frankfurt
Neubau von 84 Doppel- und Reihenhäusern Kleyerstraße 11-16, 60326 Frankfurt am Main
- Preis1.820.523 - 4.256.000 €
- Wohnfläche104 m2
- Zimmer2 - 6
- BezugsfertigApril 2025
<div class="row">
<div class="col">
<div class="nbk-project-card nbk-project-card--dark ">
<header class="nbk-project-card__header">
<div class="container">
<div class="row justify-content-between">
<div class="col-auto col-md-auto me-auto">
<span class="badge rounded-pill bg-primary nbk-project-card__badge">Top Lage</span>
</div>
<div class="col-auto ms-auto">
<button class="btn btn--icon-only nbk-project-card__btn-favorite nbk-project-card__btn-favorite--is-active ">
<span class="btn__icon btn__icon--lg"> <svg width="28" height="25" viewbox="0 0 28 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.2796 3.13867L15.2799 3.13834C17.7491 0.513379 21.6869 0.136215 24.304 2.43374C27.3654 5.12589 27.5314 9.97951 24.7814 12.9035L24.7812 12.9036L14.4155 23.9314C14.0223 24.3495 13.4018 24.3495 13.0086 23.9314L2.6431 12.904C2.643 12.9039 2.6429 12.9037 2.64281 12.9036C-0.102015 9.97963 0.0639981 5.1261 3.12512 2.43395C5.74253 0.13595 9.68553 0.513713 12.149 3.13783L12.1498 3.13867L13.2051 4.25913L13.7147 4.80013L14.2243 4.25913L15.2796 3.13867Z"
fill="currentColor" stroke="currentColor" stroke-width="1.4"/>
</svg>
</span></button>
</div>
</div>
</div>
</header>
<section class="nbk-project-card__main">
<div class="row g-0">
<div class="col-12 col-md-6 d-flex">
<div class="nbk-project-card__media-container">
<div class="swiper nbk-project-card__slider" data-nbk-project-card-slider>
<div class="swiper-wrapper">
<div class="swiper-slide">
<figure class="nbk-project-card__figure ">
<img data-src="/assets/project-pictures/gallusviertel/gallusviertel.jpg" width="1600" height="900"
class="lazy nbk-project-card__image"/>
</figure>
</div>
</div>
<div class="nbk-project-card__slider-shadow-overlay"></div>
<div class="swiper-pagination nbk-project-card__slider-pagination"></div>
<div class="nbk-project-card__slider-arrows d-none d-md-block" data-nbk-project-card-navigation>
<button class="swiper-button-prev btn btn-sm btn--icon-only btn-outline-light btn-outline-transparent">
<span class="btn__icon">
<svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7.45711 0.792893C7.84763 1.18342 7.84763 1.81658 7.45711 2.20711L2.66421 7L7.45711 11.7929C7.84763 12.1834 7.84763 12.8166 7.45711 13.2071C7.06658 13.5976 6.43342 13.5976 6.04289 13.2071L0.542893 7.70711C0.152369 7.31658 0.152369 6.68342 0.542893 6.29289L6.04289 0.792893C6.43342 0.402369 7.06658 0.402369 7.45711 0.792893Z"/>
</svg>
</span>
</button>
<button class="swiper-button-next btn btn-sm btn--icon-only btn-outline-light btn-outline-transparent">
<span class="btn__icon">
<svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.542893 13.2071C0.152369 12.8166 0.152369 12.1834 0.542893 11.7929L5.33579 7L0.542893 2.20711C0.152369 1.81658 0.152369 1.18342 0.542893 0.792894C0.933417 0.402369 1.56658 0.402369 1.95711 0.792894L7.45711 6.29289C7.84763 6.68342 7.84763 7.31658 7.45711 7.70711L1.95711 13.2071C1.56658 13.5976 0.933417 13.5976 0.542893 13.2071Z"/>
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="nbk-project-card__content">
<div class="row">
<div class="col col-12 col-md-9">
<h4 class="nbk-project-card__sub-title">INSTONE REAL ESTATE</h4>
<h2 class="nbk-project-card__title">WINGS Gallusviertel-Frankfurt</h2>
<p class="nbk-project-card__description">Neubau von 84 Doppel- und Reihenhäusern Kleyerstraße 11-16, 60326 Frankfurt am Main</p>
</div>
<div class="col-12 col-md-6">
<ul class="row nbk-project-card__list">
<li class="col-6 col-md-12 nbk-project-card__spec-item">
<div class="nbk-project-card__spec-label">Preis</div>
<span class="nbk-project-card__spec-value">1.820.523 - 4.256.000 €</span>
</li>
<li class="col-6 col-md-12 nbk-project-card__spec-item">
<div class="nbk-project-card__spec-label">Wohnfläche</div>
<span class="nbk-project-card__spec-value">104 m2</span>
</li>
<li class="col-6 col-md-12 nbk-project-card__spec-item">
<div class="nbk-project-card__spec-label">Zimmer</div>
<span class="nbk-project-card__spec-value">2 - 6</span>
</li>
<li class="col-6 col-md-12 nbk-project-card__spec-item">
<div class="nbk-project-card__spec-label">Bezugsfertig</div>
<span class="nbk-project-card__spec-value">April 2025</span>
</li>
</ul>
</div>
<div class="col-12 col-md-auto ms-md-auto flex-column justify-content-end d-none d-md-flex">
<div class="nbk-project-card__cta-content">
<div class="nbk-project-card__cta-content-item">
<a href="#">
<img class="lazy nbk-project-card__side-image" data-src="/assets/investor.svg" alt="investor logo">
</a>
</div>
<div class="nbk-project-card__cta-content-item">
<a href="/project.html" class="btn btn-outline-secondary" type="button" >
Zum Projekt
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="nbk-project-card__footer">
<a href="/project.html" class="nbk-project-card__mobile_project-cta">
<span class="nbk-project-card__mobile_project-cta-text">Zum Projekt</span>
<span class="nbk-project-card__footer-icon"> <svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.542893 13.2071C0.152369 12.8166 0.152369 12.1834 0.542893 11.7929L5.33579 7L0.542893 2.20711C0.152369 1.81658 0.152369 1.18342 0.542893 0.792894C0.933417 0.402369 1.56658 0.402369 1.95711 0.792894L7.45711 6.29289C7.84763 6.68342 7.84763 7.31658 7.45711 7.70711L1.95711 13.2071C1.56658 13.5976 0.933417 13.5976 0.542893 13.2071Z"/>
</svg>
</span>
</a>
</footer>
</div>
</div>
</div>