{% include "@Components/sections/category-cards-section/category-cards-section.twig" with { props: {
header: {
items : [
{
title: "Najděte si domov",
variant: "center",
perex: "mezi 38 254 nabídkami od realitek"
},
{
title : "Najděte si pozemek",
variant: "center",
perex: "mezi 30 254 nabídkami od realitek"
},
{
title: "Najděte si nemovitost",
variant: "center",
perex: "mezi 60 000 nabídkami od realitek"
},
]
},
variant: "primary-100",
spacing: "p-top-0",
items: [
{
title: "Byty",
url: "#",
count: "4 637",
img: {
src: "images/examples/QL7KdXdcfWA-480x640.jpeg",
ratio: "3-4",
alt: "my custom alt",
},
subcategories: [
{
url: "#",
title: "Pronájem"
},
{
url: "#",
title: "Prodej"
},
{
url: "#",
title: "Dražby"
},
]
},
{
title: "Domy",
url: "#",
count: "4 637",
img: {
src: "images/examples/178j8tJrNlc-480x640.jpeg",
ratio: "3-4",
alt: "my custom alt",
},
subcategories: [
{
url: "#",
title: "Pronájem"
},
{
url: "#",
title: "Prodej"
},
{
url: "#",
title: "Dražby"
}
]
},
{
title: "Pozemky",
url: "#",
count: "1 637",
img: {
src: "images/examples/WPapb9IqRKw-640x480.jpeg",
ratio: "4-3",
}
},
{
title: "Rekreační",
url: "#",
count: "1 637",
img: {
src: "images/examples/cEukkv42O40-640x480.jpeg",
ratio: "4-3",
}
},
{
title: "Zahraniční",
url: "#",
count: "1 637",
img: {
src: "images/examples/FV3GConVSss-640x480.jpeg",
ratio: "4-3",
}
},
{
title: "Komerční",
url: "#",
count: "1 637",
img: {
src: "images/examples/rPCRXA-640x480.jpeg",
ratio: "4-3",
}
},
{
title: "Projekty",
url: "#",
count: "1 637",
img: {
src: "images/examples/HtBlQdxfG9k-640x480.jpeg",
ratio: "4-3",
}
},
{
title: "Ostatní",
url: "#",
count: "1 637",
img: {
src: "images/examples/3AbwSH1y9dc-640x480.jpeg",
ratio: "4-3",
}
}
]
} } %}
<section class="base-section --primary-100 --p-top-0 s-category-cards">
<div class="base-section__container container">
<div class="fade-in-section">
<div class="swiper fade-in-section__slider">
<div class="swiper-wrapper">
<div class="swiper-slide fade-in-section__item swiper-slide__base-1" >
<header class="base-header --center">
<div class="base-header__heading-wrapper">
<h2 class="base-header__heading base-h2">Najděte si domov</h2>
</div>
<p class="base-header__paragraph">mezi 38 254 nabídkami od realitek</p>
</header> </div>
<div class="swiper-slide fade-in-section__item swiper-slide__base-2" >
<header class="base-header --center">
<div class="base-header__heading-wrapper">
<h2 class="base-header__heading base-h2">Najděte si pozemek</h2>
</div>
<p class="base-header__paragraph">mezi 30 254 nabídkami od realitek</p>
</header> </div>
<div class="swiper-slide fade-in-section__item swiper-slide__base-3" >
<header class="base-header --center">
<div class="base-header__heading-wrapper">
<h2 class="base-header__heading base-h2">Najděte si nemovitost</h2>
</div>
<p class="base-header__paragraph">mezi 60 000 nabídkami od realitek</p>
</header> </div>
</div>
</div>
</div>
<div class="g-category-card">
<div class="g-category-card__cell">
<article class="i-category-card">
<div class="i-category-card__image">
<a href="#" class="i-category-card__image-link u-img-hover">
<div class="img --ratio-3-4">
<picture>
<img src="" data-src="images/examples/QL7KdXdcfWA-480x640.jpeg" alt="my custom alt" draggable="false">
</picture>
</div>
</a>
</div>
<div class="i-category-card__body">
<header class="i-category-card__header">
<h2 class="i-category-card__heading">
<a href="#" class="i-category-card__heading-link">Byty</a>
</h2>
<span class="i-category-card__count">
Celkem
<span class="text-nowrap">
4 637
</span>
</span>
</header>
<div class="g-subcategory g-base">
<a href="#" class="i-subcategory">Pronájem</a>
<a href="#" class="i-subcategory">Prodej</a>
<a href="#" class="i-subcategory">Dražby</a>
</div>
</div>
</article>
</div>
<div class="g-category-card__cell">
<article class="i-category-card">
<div class="i-category-card__image">
<a href="#" class="i-category-card__image-link u-img-hover">
<div class="img --ratio-3-4">
<picture>
<img src="" data-src="images/examples/178j8tJrNlc-480x640.jpeg" alt="my custom alt" draggable="false">
</picture>
</div>
</a>
</div>
<div class="i-category-card__body">
<header class="i-category-card__header">
<h2 class="i-category-card__heading">
<a href="#" class="i-category-card__heading-link">Domy</a>
</h2>
<span class="i-category-card__count">
Celkem
<span class="text-nowrap">
4 637
</span>
</span>
</header>
<div class="g-subcategory g-base">
<a href="#" class="i-subcategory">Pronájem</a>
<a href="#" class="i-subcategory">Prodej</a>
<a href="#" class="i-subcategory">Dražby</a>
</div>
</div>
</article>
</div>
<div class="g-category-card__cell"><article class="i-category-card --compact">
<div class="i-category-card__image">
<a href="#" class="i-category-card__image-link u-img-hover">
<div class="img --ratio-4-3">
<picture>
<img src="" data-src="images/examples/WPapb9IqRKw-640x480.jpeg" alt="" draggable="false">
</picture>
</div>
</a>
</div>
<div class="i-category-card__body">
<header class="i-category-card__header">
<h2 class="i-category-card__heading">
<a href="#" class="i-category-card__heading-link">Pozemky</a>
</h2>
<span class="i-category-card__count">
Celkem
<span class="text-nowrap">
1 637
</span>
</span>
</header>
</div>
</article>
</div>
<div class="g-category-card__cell"><article class="i-category-card --compact">
<div class="i-category-card__image">
<a href="#" class="i-category-card__image-link u-img-hover">
<div class="img --ratio-4-3">
<picture>
<img src="" data-src="images/examples/cEukkv42O40-640x480.jpeg" alt="" draggable="false">
</picture>
</div>
</a>
</div>
<div class="i-category-card__body">
<header class="i-category-card__header">
<h2 class="i-category-card__heading">
<a href="#" class="i-category-card__heading-link">Rekreační</a>
</h2>
<span class="i-category-card__count">
Celkem
<span class="text-nowrap">
1 637
</span>
</span>
</header>
</div>
</article>
</div>
<div class="g-category-card__cell"><article class="i-category-card --compact">
<div class="i-category-card__image">
<a href="#" class="i-category-card__image-link u-img-hover">
<div class="img --ratio-4-3">
<picture>
<img src="" data-src="images/examples/FV3GConVSss-640x480.jpeg" alt="" draggable="false">
</picture>
</div>
</a>
</div>
<div class="i-category-card__body">
<header class="i-category-card__header">
<h2 class="i-category-card__heading">
<a href="#" class="i-category-card__heading-link">Zahraniční</a>
</h2>
<span class="i-category-card__count">
Celkem
<span class="text-nowrap">
1 637
</span>
</span>
</header>
</div>
</article>
</div>
<div class="g-category-card__cell"><article class="i-category-card --compact">
<div class="i-category-card__image">
<a href="#" class="i-category-card__image-link u-img-hover">
<div class="img --ratio-4-3">
<picture>
<img src="" data-src="images/examples/rPCRXA-640x480.jpeg" alt="" draggable="false">
</picture>
</div>
</a>
</div>
<div class="i-category-card__body">
<header class="i-category-card__header">
<h2 class="i-category-card__heading">
<a href="#" class="i-category-card__heading-link">Komerční</a>
</h2>
<span class="i-category-card__count">
Celkem
<span class="text-nowrap">
1 637
</span>
</span>
</header>
</div>
</article>
</div>
<div class="g-category-card__cell"><article class="i-category-card --compact">
<div class="i-category-card__image">
<a href="#" class="i-category-card__image-link u-img-hover">
<div class="img --ratio-4-3">
<picture>
<img src="" data-src="images/examples/HtBlQdxfG9k-640x480.jpeg" alt="" draggable="false">
</picture>
</div>
</a>
</div>
<div class="i-category-card__body">
<header class="i-category-card__header">
<h2 class="i-category-card__heading">
<a href="#" class="i-category-card__heading-link">Projekty</a>
</h2>
<span class="i-category-card__count">
Celkem
<span class="text-nowrap">
1 637
</span>
</span>
</header>
</div>
</article>
</div>
<div class="g-category-card__cell"><article class="i-category-card --compact">
<div class="i-category-card__image">
<a href="#" class="i-category-card__image-link u-img-hover">
<div class="img --ratio-4-3">
<picture>
<img src="" data-src="images/examples/3AbwSH1y9dc-640x480.jpeg" alt="" draggable="false">
</picture>
</div>
</a>
</div>
<div class="i-category-card__body">
<header class="i-category-card__header">
<h2 class="i-category-card__heading">
<a href="#" class="i-category-card__heading-link">Ostatní</a>
</h2>
<span class="i-category-card__count">
Celkem
<span class="text-nowrap">
1 637
</span>
</span>
</header>
</div>
</article>
</div>
</div>
<div class="s-category-cards__form-wrap">
<form class="s-category-cards__form" action="/" method="POST">
<div class="f-search --without-button">
<div class="f-wrap ">
<span class="f-input__wrapper ">
<input class="f-base --background-gray-100" type="search" id="input-search-668411281" placeholder="">
</span>
</div>
</div>
<input type="hidden" data-autocomplete-url>
</form>
</div>
</div>
</section>
