{% include "@Components/sections/category-cards-section/category-cards-section.twig" with {props: {
header: {
title: "Najděte si domov",
perex: "mezi <span>39 389</span> nabídkami<br>od <span>881</span> realitek"
},
variant: "primary-100",
items: [
{
title: "Byty",
url: "#",
count: "4 637",
img: {
src: "https://images.unsplash.com/photo-1597047084897-51e81819a499?w=480&h=640&fit=crop",
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: "https://res.cloudinary.com/ds5a9i3cq/image/upload/c_fit,f_auto,h_640,w_480/v1669726644/CeskeReality/pexels-expect-best-323780_zmaqvv.jpg",
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: "https://res.cloudinary.com/ds5a9i3cq/image/upload/c_fill,f_auto,h_480,w_640/v1669726772/CeskeReality/gautier-pfeiffer-WPapb9IqRKw-unsplash_ylelgt.jpg",
ratio: "4-3"
}
}, {
title: "Rekreační",
url: "#",
count: "1 637",
img: {
src: "https://res.cloudinary.com/ds5a9i3cq/image/upload/c_fill,h_480,w_640/v1669726930/CeskeReality/aaron-burden-cEukkv42O40-unsplash_fybqyd.jpg",
ratio: "4-3"
}
}, {
title: "Zahraniční",
url: "#",
count: "1 637",
img: {
src: "https://res.cloudinary.com/ds5a9i3cq/image/upload/c_fill,f_auto,g_center,h_480,w_640/v1669726994/CeskeReality/toa-heftiba-FV3GConVSss-unsplash_svrcxh.jpg",
ratio: "4-3"
}
}, {
title: "Komerční",
url: "#",
count: "1 637",
img: {
src: "https://res.cloudinary.com/ds5a9i3cq/image/upload/c_fill,f_auto,g_center,h_480,w_640/v1669727083/CeskeReality/nastuh-abootalebi-ZtC4_rPCRXA-unsplash_mbomvt.jpg",
ratio: "4-3"
}
}, {
title: "Projekty",
url: "#",
count: "1 637",
img: {
src: "https://res.cloudinary.com/ds5a9i3cq/image/upload/c_fill,f_auto,h_480,w_640/v1669727153/CeskeReality/daniel-mccullough-HtBlQdxfG9k-unsplash_ptxv7w.jpg",
ratio: "4-3"
}
}, {
title: "Ostatní",
url: "#",
count: "1 637",
img: {
src: "https://res.cloudinary.com/ds5a9i3cq/image/upload/c_fill,f_auto,h_480,w_640/v1669727153/CeskeReality/kevin-wolf-3AbwSH1y9dc-unsplash_bb0pdc.jpg",
ratio: "4-3"
}
}
],
}} %}
<section class="base-section --primary-100 s-category-cards">
<div class="base-section__container container">
<header class="base-header">
<h2 class="base-header__heading base-h1">Najděte si domov</h2>
<p class="base-header__paragraph">mezi <span>39 389</span> nabídkami<br>od <span>881</span> realitek</p>
</header>
<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="https://images.unsplash.com/photo-1597047084897-51e81819a499?w=480&h=640&fit=crop" alt="my custom alt" draggable="false">
</picture>
</div>
</a>
</div>
<div class="i-category-card__body">
<header class="i-category-card__header">
<h3 class="i-category-card__heading">
<a href="#" class="i-category-card__heading-link">Byty</a>
</h3>
<span class="i-category-card__count">
Celkem
4 637
</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="https://res.cloudinary.com/ds5a9i3cq/image/upload/c_fit,f_auto,h_640,w_480/v1669726644/CeskeReality/pexels-expect-best-323780_zmaqvv.jpg" alt="my custom alt" draggable="false">
</picture>
</div>
</a>
</div>
<div class="i-category-card__body">
<header class="i-category-card__header">
<h3 class="i-category-card__heading">
<a href="#" class="i-category-card__heading-link">Domy</a>
</h3>
<span class="i-category-card__count">
Celkem
4 637
</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="https://res.cloudinary.com/ds5a9i3cq/image/upload/c_fill,f_auto,h_480,w_640/v1669726772/CeskeReality/gautier-pfeiffer-WPapb9IqRKw-unsplash_ylelgt.jpg" alt="" draggable="false">
</picture>
</div>
</a>
</div>
<div class="i-category-card__body">
<header class="i-category-card__header">
<h3 class="i-category-card__heading">
<a href="#" class="i-category-card__heading-link">Pozemky</a>
</h3>
<span class="i-category-card__count">
Celkem
1 637
</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="https://res.cloudinary.com/ds5a9i3cq/image/upload/c_fill,h_480,w_640/v1669726930/CeskeReality/aaron-burden-cEukkv42O40-unsplash_fybqyd.jpg" alt="" draggable="false">
</picture>
</div>
</a>
</div>
<div class="i-category-card__body">
<header class="i-category-card__header">
<h3 class="i-category-card__heading">
<a href="#" class="i-category-card__heading-link">Rekreační</a>
</h3>
<span class="i-category-card__count">
Celkem
1 637
</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="https://res.cloudinary.com/ds5a9i3cq/image/upload/c_fill,f_auto,g_center,h_480,w_640/v1669726994/CeskeReality/toa-heftiba-FV3GConVSss-unsplash_svrcxh.jpg" alt="" draggable="false">
</picture>
</div>
</a>
</div>
<div class="i-category-card__body">
<header class="i-category-card__header">
<h3 class="i-category-card__heading">
<a href="#" class="i-category-card__heading-link">Zahraniční</a>
</h3>
<span class="i-category-card__count">
Celkem
1 637
</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="https://res.cloudinary.com/ds5a9i3cq/image/upload/c_fill,f_auto,g_center,h_480,w_640/v1669727083/CeskeReality/nastuh-abootalebi-ZtC4_rPCRXA-unsplash_mbomvt.jpg" alt="" draggable="false">
</picture>
</div>
</a>
</div>
<div class="i-category-card__body">
<header class="i-category-card__header">
<h3 class="i-category-card__heading">
<a href="#" class="i-category-card__heading-link">Komerční</a>
</h3>
<span class="i-category-card__count">
Celkem
1 637
</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="https://res.cloudinary.com/ds5a9i3cq/image/upload/c_fill,f_auto,h_480,w_640/v1669727153/CeskeReality/daniel-mccullough-HtBlQdxfG9k-unsplash_ptxv7w.jpg" alt="" draggable="false">
</picture>
</div>
</a>
</div>
<div class="i-category-card__body">
<header class="i-category-card__header">
<h3 class="i-category-card__heading">
<a href="#" class="i-category-card__heading-link">Projekty</a>
</h3>
<span class="i-category-card__count">
Celkem
1 637
</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="https://res.cloudinary.com/ds5a9i3cq/image/upload/c_fill,f_auto,h_480,w_640/v1669727153/CeskeReality/kevin-wolf-3AbwSH1y9dc-unsplash_bb0pdc.jpg" alt="" draggable="false">
</picture>
</div>
</a>
</div>
<div class="i-category-card__body">
<header class="i-category-card__header">
<h3 class="i-category-card__heading">
<a href="#" class="i-category-card__heading-link">Ostatní</a>
</h3>
<span class="i-category-card__count">
Celkem
1 637
</span>
</header>
</div>
</article>
</div>
</div>
<div class="s-category-cards__form-wrap">
<form class="s-category-cards__form">
<div class="f-search">
<div class="f-wrap">
<span class="f-input__wrapper position-relative">
<input class="f-base --background-gray-100" type="search" id="test">
</span>
</div>
<div class="f-search__button">
<button class="btn --conversion --icon-before" type="submit"> <span class="btn__title"></span>
<span class="btn__icon">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs></defs><g transform="translate(0 517.576)"><path class="a" d="M15.731-503.136l-2.146-2.138a7.607,7.607,0,0,0,1.624-4.7,7.641,7.641,0,0,0-7.6-7.6,7.641,7.641,0,0,0-7.6,7.6,7.641,7.641,0,0,0,7.6,7.6,7.606,7.606,0,0,0,4.7-1.624l2.138,2.146a.91.91,0,0,0,.646.269.91.91,0,0,0,.645-.269A.91.91,0,0,0,16-502.49a.91.91,0,0,0-.269-.646ZM1.85-509.956a5.8,5.8,0,0,1,5.77-5.77,5.8,5.8,0,0,1,5.77,5.77,5.8,5.8,0,0,1-5.77,5.77A5.8,5.8,0,0,1,1.85-509.956Z"/></g></svg>
</span>
</span>
</button>
</div>
</div>
<input type="hidden" data-autocomplete-url>
</form>
</div>
</div>
</section>
