Ukázky dispozičního řešení layout-examples · full
Přepínač dispozic — vlevo seznam bytů, vedle něj půdorys a CTA dané dispozice. Od 1024 px jsou položky ARIA taby, pod tím je z položek mřížka 2 × N (pagination) a z panelů carousel.
Pro integrátora: Záložky dispozic řídí disposition-tabs.ts; hodnoty id a aria-controls musí být na stránce unikátní.
Zdroj: src/_includes/blocks/layout-examples/
Varianta „default“
Ukázky
dispozičního řešení
Vzorová data (JSON)
{
"settings": {
"background": "white",
"anchor": "byty"
},
"title": "Ukázky\n<strong>dispozičního řešení</strong>",
"items": [
{
"label": "Byt <strong>1+kk</strong>",
"image": {
"src": "/assets/images/photos/dispozice-1kk-568.png",
"webp": "/assets/images/photos/dispozice-1kk-568.webp",
"webpSrcset": "/assets/images/photos/dispozice-1kk-568.webp 319w, /assets/images/photos/dispozice-1kk-1136.webp 637w",
"alt": "Půdorys bytu 1+kk",
"width": 319,
"height": 529
},
"button": {
"title": "Prohlédnout byty 1+kk",
"url": "/byty/?dispozice=1kk"
}
},
{
"label": "Byt <strong>2+kk</strong>",
"image": {
"src": "/assets/images/photos/dispozice-2kk-568.png",
"webp": "/assets/images/photos/dispozice-2kk-568.webp",
"webpSrcset": "/assets/images/photos/dispozice-2kk-568.webp 568w, /assets/images/photos/dispozice-2kk-1136.webp 1136w",
"alt": "Půdorys bytu 2+kk",
"width": 568,
"height": 503
},
"button": {
"title": "Prohlédnout byty 2+kk",
"url": "/byty/?dispozice=2kk"
}
},
{
"label": "Byt <strong>3+kk</strong>",
"image": {
"src": "/assets/images/photos/dispozice-3kk-568.png",
"webp": "/assets/images/photos/dispozice-3kk-568.webp",
"webpSrcset": "/assets/images/photos/dispozice-3kk-568.webp 525w, /assets/images/photos/dispozice-3kk-1136.webp 1049w",
"alt": "Půdorys bytu 3+kk",
"width": 525,
"height": 529
},
"button": {
"title": "Prohlédnout byty 3+kk",
"url": "/byty/?dispozice=3kk"
}
},
{
"label": "Byt <strong>4+kk</strong>",
"image": {
"src": "/assets/images/photos/dispozice-4kk-568.png",
"webp": "/assets/images/photos/dispozice-4kk-568.webp",
"webpSrcset": "/assets/images/photos/dispozice-4kk-568.webp 568w, /assets/images/photos/dispozice-4kk-1136.webp 1136w",
"alt": "Půdorys bytu 4+kk",
"width": 568,
"height": 399
},
"button": {
"title": "Prohlédnout byty 4+kk",
"url": "/byty/?dispozice=4kk"
}
}
],
"button": {
"title": "Prohlédnout nabídku bytů",
"url": "/byty/"
}
}
Varianta „empty“
Vzorová data (JSON)
{}
Varianta „single“
Ukázky
dispozičního řešení
Vzorová data (JSON)
{
"settings": {
"background": "white"
},
"title": "Ukázky\n<strong>dispozičního řešení</strong>",
"items": [
{
"label": "Byt <strong>1+kk</strong>",
"image": {
"src": "/assets/images/photos/dispozice-01-568.png",
"webp": "/assets/images/photos/dispozice-01-568.webp",
"webpSrcset": "/assets/images/photos/dispozice-01-568.webp 568w, /assets/images/photos/dispozice-01-1136.webp 1136w",
"alt": "Půdorys bytu 1+kk",
"width": 568,
"height": 529
},
"button": {
"title": "Prohlédnout byty 1+kk",
"url": "/byty/?dispozice=1kk"
}
}
]
}
Varianta „no-image“
Dispozice bez kompletních podkladů
Byt 3+kk
Vzorová data (JSON)
{
"settings": {
"background": "white"
},
"title": "Dispozice <strong>bez kompletních podkladů</strong>",
"items": [
{
"label": "Byt <strong>1+kk</strong>",
"image": {
"src": "/assets/images/photos/dispozice-01-568.png",
"webp": "/assets/images/photos/dispozice-01-568.webp",
"alt": "Půdorys bytu 1+kk",
"width": 568,
"height": 529
},
"button": {
"title": "Prohlédnout byty 1+kk",
"url": "/byty/?dispozice=1kk"
}
},
{
"label": "Byt <strong>2+kk</strong>",
"button": {
"title": "Prohlédnout byty 2+kk",
"url": "/byty/?dispozice=2kk"
}
},
{
"label": "Byt <strong>3+kk</strong>",
"image": {
"src": "/assets/images/photos/dispozice-01-568.png",
"webp": "/assets/images/photos/dispozice-01-568.webp",
"alt": "Půdorys bytu 3+kk",
"width": 568,
"height": 529
}
}
]
}
Varianta „shared-cta“
Dispozice se společným tlačítkem
Vzorová data (JSON)
{
"settings": {
"background": "white"
},
"title": "Dispozice se <strong>společným tlačítkem</strong>",
"items": [
{
"label": "Byt <strong>1+kk</strong>",
"image": {
"src": "/assets/images/photos/dispozice-01-568.png",
"webp": "/assets/images/photos/dispozice-01-568.webp",
"alt": "Půdorys bytu 1+kk",
"width": 568,
"height": 529
}
},
{
"label": "Byt <strong>2+kk</strong>",
"image": {
"src": "/assets/images/photos/dispozice-01-568.png",
"webp": "/assets/images/photos/dispozice-01-568.webp",
"alt": "Půdorys bytu 2+kk",
"width": 568,
"height": 529
}
},
{
"label": "",
"image": {
"src": "/assets/images/photos/dispozice-01-568.png",
"alt": "Půdorys bez názvu dispozice",
"width": 568,
"height": 529
}
}
],
"button": {
"title": "Prohlédnout nabídku bytů",
"url": "/byty/"
}
}
Varianta „long“
Vzorová data (JSON)
{
"settings": {
"background": "white"
},
"items": [
{
"label": "Byt <strong>1+kk</strong>",
"image": {
"src": "/assets/images/photos/dispozice-01-568.png",
"webp": "/assets/images/photos/dispozice-01-568.webp",
"alt": "Půdorys bytu 1+kk",
"width": 568,
"height": 529
},
"button": {
"title": "Prohlédnout byty 1+kk",
"url": "/byty/?dispozice=1kk"
}
},
{
"label": "Byt <strong>2+kk</strong>",
"image": {
"src": "/assets/images/photos/dispozice-01-568.png",
"webp": "/assets/images/photos/dispozice-01-568.webp",
"alt": "Půdorys bytu 2+kk",
"width": 568,
"height": 529
},
"button": {
"title": "Prohlédnout byty 2+kk",
"url": "/byty/?dispozice=2kk"
}
},
{
"label": "Byt <strong>3+kk s terasou</strong>",
"image": {
"src": "/assets/images/photos/dispozice-01-568.png",
"webp": "/assets/images/photos/dispozice-01-568.webp",
"alt": "Půdorys bytu 3+kk s terasou",
"width": 568,
"height": 529
},
"button": {
"title": "Prohlédnout byty 3+kk s terasou",
"url": "/byty/?dispozice=3kk-terasa"
}
},
{
"label": "Byt <strong>4+kk</strong>",
"image": {
"src": "/assets/images/photos/dispozice-01-568.png",
"webp": "/assets/images/photos/dispozice-01-568.webp",
"alt": "Půdorys bytu 4+kk",
"width": 568,
"height": 529
},
"button": {
"title": "Prohlédnout byty 4+kk",
"url": "/byty/?dispozice=4kk"
}
},
{
"label": "Byt <strong>4+kk s předzahrádkou</strong>",
"image": {
"src": "/assets/images/photos/dispozice-01-568.png",
"webp": "/assets/images/photos/dispozice-01-568.webp",
"alt": "Půdorys bytu 4+kk s předzahrádkou",
"width": 568,
"height": 529
},
"button": {
"title": "Prohlédnout byty 4+kk s předzahrádkou",
"url": "/byty/?dispozice=4kk-zahrada"
}
},
{
"label": "Byt <strong>5+kk</strong>",
"image": {
"src": "/assets/images/photos/dispozice-01-568.png",
"webp": "/assets/images/photos/dispozice-01-568.webp",
"alt": "Půdorys bytu 5+kk",
"width": 568,
"height": 529
},
"button": {
"title": "Prohlédnout byty 5+kk",
"url": "/byty/?dispozice=5kk"
}
},
{
"label": "Byt <strong>6+kk</strong>",
"image": {
"src": "/assets/images/photos/dispozice-01-568.png",
"webp": "/assets/images/photos/dispozice-01-568.webp",
"alt": "Půdorys bytu 6+kk",
"width": 568,
"height": 529
},
"button": {
"title": "Prohlédnout byty 6+kk",
"url": "/byty/?dispozice=6kk"
}
},
{
"label": "mezonet <strong>7+kk</strong>",
"image": {
"src": "/assets/images/photos/dispozice-01-568.png",
"webp": "/assets/images/photos/dispozice-01-568.webp",
"alt": "Půdorys mezonetu 7+kk",
"width": 568,
"height": 529
},
"button": {
"title": "Prohlédnout mezonety",
"url": "/byty/?dispozice=7kk"
}
}
]
}