Component Library

Design System

All tokens, UI components, and page blocks. Navy + gold palette. Cabinet Grotesk display, Inter body.

Design Tokens

Color Systempackages/styles/base.css

OKLCH tokens. Per-site primary via --primary override.

Brand

Navy / Dark bg

--bg-dark

Cream / Light bg

--bg-light

Gold / Accent

--fg-accent

FG on dark

--fg-primary-on-dark

Body on dark

--fg-body-on-dark

Light surface

FG Primary

--fg-primary

Body on light

--fg-body-on-light

Border

--border

Muted

--muted

Card

--card

Per-site --primary

U Vlašského dvora

oklch(0.55 0.12 85)

Garni Hotel

oklch(0.45 0.14 145)

Apartmány

oklch(0.55 0.15 35)

Typographypackages/styles/base.css

Use class names only — never raw Tailwind font-size utilities.

text-display

clamp(2.5→3.8rem) / wt 500 / Cabinet Grotesk

Ubytování v Kutné Hoře

text-h1

48px / wt 500 / Cabinet Grotesk

Kutná Hora

text-h2

36px / wt 500 / Cabinet Grotesk

Naše ubytování

text-h3

29px / wt 500 / Cabinet Grotesk

Hotel U Vlašského dvora

text-h4

24px / wt 500 / Cabinet Grotesk

Snídaně v ceně pobytu

text-h5

20px / wt 400 / Inter

Rezervujte přímo a ušetřete 10 %

text-body-lg

clamp(1→1.125rem) / lh 1.75 / Inter

Ubytování přímo v centru historického města Kutná Hora.

text-body

16px / lh 1.5 / Inter

Dva unikátní hotely a jeden apartmán ve stylu AirBnB.

text-body-bold

16px / wt 600 / Inter

Přímá rezervace = nejlepší cena

text-body-sm

14px / Inter

Kontakt · Podmínky · Ochrana osobních údajů

eyebrow

text-body-sm uppercase wider fg-accent

Naše ubytování

Spacing & Radiuspackages/styles/base.css

Border radius

sm

md

lg (base)

xl

2xl

full

Section padding

py-12 lg:py-16

Default — all standard blocks

py-16 lg:py-24

Featured — HotelCards

py-6

Compact — Callout

lg:py-6 section-gradient

Booking (gradient transition)

UI Components

Buttonpackages/ui/ui/button.tsx

default (gold fill) → outline (gold border) → ghost. One default per section.

On dark

default
outline
ghost
secondary
link
inverse

On light

Cardpackages/ui/ui/card.tsx

Two variants: default (light surface) and glass (dark/transparent).

variant="default"

Hotel U Vlašského Dvora
Nově zrekonstruovaný · 8.6 · 600+ recenzí

Hotel s historickou duší v centru Kutné Hory. Snídaně v ceně.

variant="glass" (dark context)

Hotel U Vlašského Dvora
Nově zrekonstruovaný · 8.6 · 600+ recenzí

Hotel s historickou duší v centru Kutné Hory. Snídaně v ceně.

Avatarpackages/ui/ui/avatar.tsx

With image, fallback initials, and status dot.

JN

With image

MD

Initials fallback

AB

size-10

AB

size-12

AB

size-16

EP

With status dot

HotelCardpackages/ui/ui/hotel-card.tsx

Full-bleed image card. Hierarchy: image → rating → title → description → features → price. className controls min-h.

Standard (min-h-120 / 480px default)

U Vlašského Dvora

Nově zrekonstruovaný

★8.6(600+ recenzí)

U Vlašského Dvora

Hotel s historickou duší.

Snídaně v ceně
Klimatizace
Garni Hotel
★8.6(730+ recenzí)

Garni Hotel

Komfortní ubytování s self check-inem.

2 lůžkové pokoje
Self check-in
Apartmány

AirBnB Style

★8.6(60+ recenzí)

Apartmány

Prostorné apartmány pro skupiny.

Až pro 11 hostů
Kuchyň

Compact (min-h-[230px]) — bento right column

Garni Hotel
★8.6(730+ recenzí)

Garni Hotel

Komfortní ubytování.

Self check-in
Apartmány

AirBnB Style

★8.6(60+ recenzí)

Apartmány

Pro skupiny až 11 hostů.

Kuchyň
SearchFormpackages/ui/ui/search-form.tsx

Date pickers (fixed + flexible tabs), guest count, search button + trust USP bar. All colors use brand tokens.

Save 10% compared to other booking systems
Secure online payment
Direct communication with the hotel
InfiniteSliderpackages/ui/ui/infinite-slider.tsx

Motion-driven auto-scroll row. Reverses on hover. Use for logo strips or partner brands.

U Vlašského Dvora
Garni Hotel
Apartmány KH
Kutná Hora UNESCO
Czech Hospitality
U Vlašského Dvora
Garni Hotel
Apartmány KH
Kutná Hora UNESCO
Czech Hospitality

Page Blocks

Calloutpackages/ui/blocks/callout.tsx

Animated pill CTA bar. AnimatedGroup entrance. Compact py-6. Use for announcements above hero.

Hero — minimal variantpackages/ui/blocks/hero.tsx

Left-aligned, no image. bg-dark py-8. For interior pages with page title + CTA buttons.

Památky Kutné Hory

Kompletní průvodce po UNESCO historii. Chrám sv. Barbory, Kostnice, Vlašský dvůr.

Prozkoumat
Rezervovat pobyt
Hero — default variantpackages/ui/blocks/hero.tsx

Centered, bg-light. For landing pages without search form. Supports actions array.

Ubytování v srdci Kutné Hory

Dva unikátní hotely a jeden apartmán v historickém centru.

Rezervovat
Zjistit více
HeroSearchpackages/ui/blocks/hero-search.tsx

Full-viewport hero + SearchForm. Always first block. Dark overlay gradient on image.

Ubytování
v Kutné Hoře

Ubytování přímo v centru historického města. Dva unikátní hotely a apartmán.

Save 10% compared to other booking systems
Secure online payment
Direct communication with the hotel
Kutná Hora panorama
HotelCardspackages/ui/blocks/hotel-cards.tsx

3 property cards. bg-dark py-16 lg:py-24. Left-aligned heading. Eyebrow uses global style.

Naše ubytování

V centru historického centra

CardsSliderpackages/ui/blocks/cards.tsx

Horizontal-scroll card tray. bg-light. Edge-to-edge bleed from container. Used for locations.

Objevte Kutnou Horu

Hlavní památky

Procházejte všechny hlavní atrakce.

Faqpackages/ui/blocks/faq.tsx

2-col Q&A grid. bg-light. schema.org FAQPage JSON-LD injected. No accordion — all items visible.

Často kladené dotazy

Vše, co potřebujete vědět.

Jak mohu rezervovat přímo bez OTA?

Rezervaci u nás snadno provedete přes formulář, telefonicky nebo e-mailem. Přímou rezervací získáte nejlepší cenu.

Nabízíte snídaně v ceně ubytování?

Ano, v hotelu U Vlašského dvora i Garni jsou snídaně zahrnuty. Servírujeme bufet každé ráno od 7:00 do 10:00.

Kdy probíhá check-in a check-out?

Check-in je od 14:00, check-out do 10:00. Na vyžádání umožňujeme early check-in dle dostupnosti.

Je možné zrušit rezervaci zdarma?

Ano, při přímé rezervaci nabízíme bezplatné storno až 72 hodin před příjezdem.

CallToActionpackages/ui/blocks/call-to-action.tsx

Conversion section. bg-dark. Always includes SearchForm — use once per page, at bottom.

Přímá rezervace

Proč rezervovat napřímo?

S naším slevovým kódem ušetříte až 10 % oproti rezervaci přes Booking.com. Přímá rezervace = nejlepší cena.

Save 10% compared to other booking systems
Secure online payment
Direct communication with the hotel
Featurespackages/ui/blocks/features.tsx

3-col icon + text grid. bg-dark. Centered heading. Use for amenities and service highlights.

Vše pro skvělý pobyt

Naše hotely nabízejí kompletní zázemí.

Snídaně v ceně

Bohatý bufet každé ráno od 7 do 10 hodin.

Klimatizace

Všechny pokoje vybaveny klimatizací.

Self check-in

Příjezd kdykoliv bez čekání na recepci.

Statspackages/ui/blocks/stats.tsx

3-column stat strip. bg-dark. Centered. Numbers must be real — avoid decorative hero-metric pattern.

Hotely Kutná Hora v číslech

Více než dekáda pohostinnosti v srdci historického města.

1 300+

spokojených hostů ročně

8.6

průměrné hodnocení

10+

let v oboru

Testimonialpackages/ui/blocks/testimonial.tsx

CSS column masonry for reviews. bg-dark. Variable card heights. Good for 3-6 reviews.

Co říkají naši hosté

Zkušenosti hostů, kteří u nás strávili nezapomenutelný pobyt.

JN

Jana Nováková

Praha

Naprosto skvělý pobyt. Hotel je v dokonalé poloze, snídaně výborná.

MD

Martin Dvořák

Brno

Útulné pokoje, milá obsluha. Kutná Hora je nádherná a hotel je ideální základna.

EP

Eva Procházková

Plzeň

Ubytování splnilo veškerá očekávání. Čistý pokoj, skvělá snídaně, výborná lokalita.

TK

Tomáš Krejčí

Ostrava

Doporučuji každému. Historické centrum, příjemný personál, výborná cena.

Contentpackages/ui/blocks/content.tsx

Rich-text prose block. bg-light container-narrow. Supports mermaid diagrams and code blocks.

Kutná Hora — UNESCO dědictví světa

Vstupte do míst, která kdysi určovala osud celého českého království. Kutná Hora není jen městem na seznamu UNESCO — je fascinující kronikou psanou stříbrem.

Hlavní atrakce v docházkové vzdálenosti

  • Chrám sv. Barbory — 5 minut pěšky
  • Vlašský dvůr — 1 minuta pěšky
  • Kostnice v Sedlci — 10 minut autobusem
Videopackages/ui/blocks/video.tsx

ReactPlayer embed. aspect-video Section. Supports YouTube, Vimeo, etc. autoPlay and loop props.

Mappackages/ui/blocks/map.tsx

Leaflet map with hotel pins + POI markers. Dynamic import (ssr: false). Scroll-wheel lock until click.

Loading map…
ImageContent — image rightpackages/ui/blocks/image-content.tsx

2-col split: content left, image right. Eyebrow + H2 + rich-text perex + CTA bar with optional info items.

Snídaně

Ráno dělá den

Každé ráno čeká na naše hosty bohatá snídaně, čerstvé pečivo, lokální sýry, uzeniny, jogurty a teplé nápoje.

Nastartujte svůj den tím nejlepším.

Naše snídaně

07:00 – 10:00

Čas podávání

Snídaně
ImageContent — image leftpackages/ui/blocks/image-content.tsx

2-col split: image left, content right. Same fields, variant='image-left'.

Firemní a soukromé akce

Soustřeďte se na výsledky

Uspořádat úspěšnou firemní akci je výzva. Jsme tu od toho, abychom vám pomohli.

Vše na jednom místě.

Více informací

Až 20 osob

kapacity místnosti

Meeting room

Fotogalerie

Recepce

Meeting room

Snídaně

ProximityBookingCTA — inlinepackages/ui/blocks/proximity-booking-cta.tsx

Compact inline booking nudge. Used on location detail pages inside prose sections.

Ubytování v centru

Hotely KH — 5 minut pěšky od Chrám sv. Barbory

Rezervovat
ProximityBookingCTA — bannerpackages/ui/blocks/proximity-booking-cta.tsx

Full-width booking banner. Used at bottom of location pages. Includes SearchForm.

Ubytování v centru

Hotely KH — 5 minut pěšky od Chrám sv. Barbory

Vychutnejte si UNESCO Kutnou Horu na maximum. Pohodlný návrat do hotelu kdykoliv.

Save 10% compared to other booking systems
Secure online payment
Direct communication with the hotel

hotelykh.cz · robots noindex · 2026