Cards
#01 City cards
City cards for homepage
Image ratio: 9:16
Image size: 450 x 800 pixels
<div class="row">
<div class="col-12 col-md-3 col-lg-2">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<figure class="nbk-card__figure nbk-card__figure--radius-larger">
<img data-src="/assets/city-pictures/Berlin.png" class="nbk-card__image lazy " alt="Berlin">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--larger ">Berlin</h4>
<h5 class="nbk-card__subtitle ">125 PROJEKTE</h5>
</section>
</a> </div>
<div class="col-12 col-md-3 col-lg-2">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<figure class="nbk-card__figure nbk-card__figure--radius-larger">
<img data-src="/assets/city-pictures/Hamburg.png" class="nbk-card__image lazy " alt="Hamburg">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--larger ">Hamburg</h4>
<h5 class="nbk-card__subtitle ">78 PROJEKTE</h5>
</section>
</a> </div>
<div class="col-12 col-md-3 col-lg-2">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<figure class="nbk-card__figure nbk-card__figure--radius-larger">
<img data-src="/assets/city-pictures/Muenchen.png" class="nbk-card__image lazy " alt="München">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--larger ">München</h4>
<h5 class="nbk-card__subtitle ">150 PROJEKTE</h5>
</section>
</a> </div>
<div class="col-12 col-md-3 col-lg-2">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<figure class="nbk-card__figure nbk-card__figure--radius-larger">
<img data-src="/assets/city-pictures/Koeln.png" class="nbk-card__image lazy " alt="Köln">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--larger ">Köln</h4>
<h5 class="nbk-card__subtitle ">95 PROJEKTE</h5>
</section>
</a> </div>
<div class="col-12 col-md-3 col-lg-2">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<figure class="nbk-card__figure nbk-card__figure--radius-larger">
<img data-src="/assets/city-pictures/Frankfurt.png" class="nbk-card__image lazy " alt="Frankfurt">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--larger ">Frankfurt</h4>
<h5 class="nbk-card__subtitle ">60 PROJEKTE</h5>
</section>
</a> </div>
<div class="col-12 col-md-3 col-lg-2">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<figure class="nbk-card__figure nbk-card__figure--radius-larger">
<img data-src="/assets/city-pictures/Duesseldorf.png" class="nbk-card__image lazy " alt="Düsseldorf">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--larger ">Düsseldorf</h4>
<h5 class="nbk-card__subtitle ">85 PROJEKTE</h5>
</section>
</a> </div>
</div> #02 Landscape image card
<div class="row">
<div class="col-12 col-md-6 col-lg-3">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<figure class="nbk-card__figure nbk-card__figure--landscape ">
<img data-src="https://source.unsplash.com/random/?SKYLOFT PARADISE,landmark" class="nbk-card__image lazy " alt="SKYLOFT PARADISE">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--condensed ">SKYLOFT PARADISE</h4>
<h5 class="nbk-card__subtitle nbk-card__subtitle--light ">Hamburg-HafenCity</h5>
<h6 class="nbk-card__subtitle nbk-card__subtitle--light ">ab 3.750.000 €</h6> </section>
</a> </div>
<div class="col-12 col-md-6 col-lg-3">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<figure class="nbk-card__figure nbk-card__figure--landscape ">
<img data-src="https://source.unsplash.com/random/?GRÜNE OASE,landmark" class="nbk-card__image lazy " alt="GRÜNE OASE">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--condensed ">GRÜNE OASE</h4>
<h5 class="nbk-card__subtitle nbk-card__subtitle--light ">Frankfurt-Westend</h5>
<h6 class="nbk-card__subtitle nbk-card__subtitle--light ">ab 2.950.000 €</h6> </section>
</a> </div>
<div class="col-12 col-md-6 col-lg-3">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<figure class="nbk-card__figure nbk-card__figure--landscape ">
<img data-src="https://source.unsplash.com/random/?PANTHEON RESIDENZ,landmark" class="nbk-card__image lazy " alt="PANTHEON RESIDENZ">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--condensed ">PANTHEON RESIDENZ</h4>
<h5 class="nbk-card__subtitle nbk-card__subtitle--light ">Köln-Innenstadt</h5>
<h6 class="nbk-card__subtitle nbk-card__subtitle--light ">ab 2.200.000 €</h6> </section>
</a> </div>
<div class="col-12 col-md-6 col-lg-3">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<figure class="nbk-card__figure nbk-card__figure--landscape ">
<img data-src="https://source.unsplash.com/random/?ELYSIUM TOWER DUESSELDORF MEDIENHAFEN,landmark" class="nbk-card__image lazy " alt="ELYSIUM TOWER DUESSELDORF MEDIENHAFEN">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--condensed ">ELYSIUM TOWER DUESSELDORF MEDIENHAFEN</h4>
<h5 class="nbk-card__subtitle nbk-card__subtitle--light ">Düsseldorf-Medienhafen</h5>
<h6 class="nbk-card__subtitle nbk-card__subtitle--light ">ab 4.500.000 €</h6> </section>
</a> </div>
</div>
#03 Square image cards
<div class="row">
<div class="col-12 col-md-6 col-lg-3">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<div class="nbk-card__badges">
<span class="badge rounded-pill bg-primary">Berlin</span>
</div>
<figure class="nbk-card__figure nbk-card__figure--square ">
<img data-src="https://source.unsplash.com/random/?Hamburg-HafenCity,architecture,city,building" class="nbk-card__image lazy " alt="SKYLOFT PARADISE">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--condensed ">SKYLOFT PARADISE</h4>
<h5 class="nbk-card__subtitle nbk-card__subtitle--larger nbk-card__subtitle--light ">Hamburg-HafenCity</h5>
<h6 class="nbk-card__subtitle nbk-card__subtitle--larger nbk-card__subtitle--light ">ab 3.750.000 €</h6> </section>
</a> </div>
<div class="col-12 col-md-6 col-lg-3">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<div class="nbk-card__badges">
<span class="badge rounded-pill bg-primary">Berlin</span>
</div>
<figure class="nbk-card__figure nbk-card__figure--square ">
<img data-src="https://source.unsplash.com/random/?Frankfurt-Westend,architecture,city,building" class="nbk-card__image lazy " alt="GRÜNE OASE">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--condensed ">GRÜNE OASE</h4>
<h5 class="nbk-card__subtitle nbk-card__subtitle--larger nbk-card__subtitle--light ">Frankfurt-Westend</h5>
<h6 class="nbk-card__subtitle nbk-card__subtitle--larger nbk-card__subtitle--light ">ab 2.950.000 €</h6> </section>
</a> </div>
<div class="col-12 col-md-6 col-lg-3">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<div class="nbk-card__badges">
<span class="badge rounded-pill bg-primary">Berlin</span>
</div>
<figure class="nbk-card__figure nbk-card__figure--square ">
<img data-src="https://source.unsplash.com/random/?Köln-Innenstadt,architecture,city,building" class="nbk-card__image lazy " alt="PANTHEON RESIDENZ">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--condensed ">PANTHEON RESIDENZ</h4>
<h5 class="nbk-card__subtitle nbk-card__subtitle--larger nbk-card__subtitle--light ">Köln-Innenstadt</h5>
<h6 class="nbk-card__subtitle nbk-card__subtitle--larger nbk-card__subtitle--light ">ab 2.200.000 €</h6> </section>
</a> </div>
<div class="col-12 col-md-6 col-lg-3">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<div class="nbk-card__badges">
<span class="badge rounded-pill bg-primary">Berlin</span>
</div>
<figure class="nbk-card__figure nbk-card__figure--square ">
<img data-src="https://source.unsplash.com/random/?Düsseldorf-Medienhafen,architecture,city,building" class="nbk-card__image lazy " alt="ELYSIUM TOWER DUESSELDORF MEDIENHAFEN">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--condensed ">ELYSIUM TOWER DUESSELDORF MEDIENHAFEN</h4>
<h5 class="nbk-card__subtitle nbk-card__subtitle--larger nbk-card__subtitle--light ">Düsseldorf-Medienhafen</h5>
<h6 class="nbk-card__subtitle nbk-card__subtitle--larger nbk-card__subtitle--light ">ab 4.500.000 €</h6> </section>
</a> </div>
</div>