UI Kit and Component Library PRIMAKOUPELNY.CZ

Vizuální zobrazení čistě samotných prvků

Architektura prvků: https://app.xmind.com/share/lWJkDeuk?xid=Q9U0wj5K

Buttony pro rozcestníky

Odkaz na externí CSS: https://www.primakoupelny.cz/user/documents/upload/CSS-kaskadove-styly/buttony-rozcestniky.css

Kód pro nasazení

/* === Buttony pro rozcestníky podkategorií (subcategories / seo-subcategories) === */

:root{
  --btn-bg:#ecf5fe;
  --btn-bg-hover:#D9EBFD;
  --btn-radius:4px;
  --btn-text:#24242E;

  /* nižší tlačítka */
  --btn-h:52px;
  --btn-h-mobile:56px;

  /* slot pro ikonu jako původně (55px), max velikost ikony 45px */
  --ico-slot-w:55px;
  --ico-slot-h:45px;
  --ico-max:45px;

  /* loga (značky) */
  --logo-max:30px;

  --text-gap:10px;

  /* růžové zvýraznění (z původního kódu 2) */
  --highlight-bg:#ffe9eb;
  --highlight-bg-hover:#ffd8db;
}

/* =========================================================
   1) ZMENŠENÍ MEZERY NAD TLAČÍTKY (nadpis -> seznam)
   ========================================================= */

:is(h1,h2,h3,.h1,.h2,.h3) + :is(
  .subcategories.seo-subcategories.with-image,
  .seo-subcategories.with-image,
  .subcategories.with-image
){
  margin-top:0 !important;
}

@supports selector(:has(*)){
  :is(h1,h2,h3,.h1,.h2,.h3):has(+ :is(
    .subcategories.seo-subcategories.with-image,
    .seo-subcategories.with-image,
    .subcategories.with-image
  )){
    margin-bottom:10px !important;
  }
}



/* =========================================================
   2) WRAPPER (UL) – menší vertikální mezery
   ========================================================= */
:is(
  .subcategories.seo-subcategories.with-image,
  .seo-subcategories.with-image,
  body.type-post .subcategories.with-image
){
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:stretch !important;

  padding:4px 0 !important;
  margin:0 -6px 12px -6px !important;

  position:relative !important;
}

:is(
  .subcategories.seo-subcategories.with-image,
  .seo-subcategories.with-image,
  body.type-post .subcategories.with-image
)::before,
:is(
  .subcategories.seo-subcategories.with-image,
  .seo-subcategories.with-image,
  body.type-post .subcategories.with-image
)::after{
  height:0 !important;
}

/* =========================================================
   3) LI
   ========================================================= */
:is(
  .subcategories.seo-subcategories.with-image li,
  .seo-subcategories.with-image li,
  body.type-post .subcategories.with-image li
){
  list-style:none !important;
  flex:0 0 auto !important;
  padding:4px !important;
}

/* =========================================================
   4) BUTTON (A)
   ========================================================= */
:is(
  .subcategories.seo-subcategories.with-image li a,
  .seo-subcategories.with-image li a,
  body.type-post .subcategories.with-image li a
){
  display:flex !important;
  align-items:center !important;
  position:relative !important;

  height:var(--btn-h) !important;
  padding:6px 10px !important;

  font-weight:bold !important;
  text-decoration:none !important;

  background-color:var(--btn-bg) !important;
  border-radius:var(--btn-radius) !important;
  box-shadow:inset 0 -1px 0 0 rgba(0,0,0,.1) !important;
  border:0 !important;
  color:var(--btn-text) !important;
}

:is(
  .subcategories.seo-subcategories.with-image li:not(.highlitedsub) a:hover,
  .seo-subcategories.with-image li:not(.highlitedsub) a:hover,
  body.type-post .subcategories.with-image li:not(.highlitedsub) a:hover
){
  background-color:var(--btn-bg-hover) !important;
}

:is(
  .subcategories.seo-subcategories.with-image li a,
  .seo-subcategories.with-image li a,
  body.type-post .subcategories.with-image li a
)::before,
:is(
  .subcategories.seo-subcategories.with-image li a,
  .seo-subcategories.with-image li a,
  body.type-post .subcategories.with-image li a
)::after{
  display:none !important;
}

/* =========================================================
   5) HIGHlitedsub – růžové + výjimka pro text (ellipsis povoleno)
   ========================================================= */
:is(
  .subcategories.seo-subcategories.with-image li.highlitedsub a,
  .seo-subcategories.with-image li.highlitedsub a,
  body.type-post .subcategories.with-image li.highlitedsub a
){
  background:var(--highlight-bg) !important;
}
:is(
  .subcategories.seo-subcategories.with-image li.highlitedsub a:hover,
  .seo-subcategories.with-image li.highlitedsub a:hover,
  body.type-post .subcategories.with-image li.highlitedsub a:hover
){
  background:var(--highlight-bg-hover) !important;
}

/* =========================================================
   6) IKONY – KONZISTENTNÍ, BEZ NAFUKOVÁNÍ, JAKO PŮVODNĚ (max 45px)
   ========================================================= */
:is(
  .subcategories.seo-subcategories.with-image li a .image,
  .seo-subcategories.with-image li a .image,
  body.type-post .subcategories.with-image li a .image
){
  flex:0 0 var(--ico-slot-w) !important;
  width:var(--ico-slot-w) !important;
  height:var(--ico-slot-h) !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}

:is(
  .subcategories.seo-subcategories.with-image li a .image img,
  .seo-subcategories.with-image li a .image img,
  body.type-post .subcategories.with-image li a .image img
){
  width:auto !important;
  height:auto !important;
  max-width:var(--ico-max) !important;
  max-height:var(--ico-max) !important;
  object-fit:contain !important;
  display:block !important;
}

/* =========================================================
   7) TEXT – vždy se vejde (2 řádky), nepřetéká ven
   ========================================================= */
:is(
  .subcategories.seo-subcategories.with-image li a .text,
  .seo-subcategories.with-image li a .text,
  body.type-post .subcategories.with-image li a .text
){
  padding-left:var(--text-gap) !important;
  min-width:0 !important;

  white-space:normal !important;
  overflow:hidden !important;
  text-overflow:clip !important;

  overflow-wrap:normal !important;
  word-break:normal !important;
  hyphens:none !important;

  font-size:14px !important;
  font-weight:bold !important;
  line-height:1.15 !important;

  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  max-height:calc(2 * 1.15em) !important;
}

:is(
  .subcategories.seo-subcategories.with-image li.highlitedsub a .text,
  .seo-subcategories.with-image li.highlitedsub a .text,
  body.type-post .subcategories.with-image li.highlitedsub a .text
){
  text-overflow:ellipsis !important;
}

/* =========================================================
   8) LOGA (.imageznacka) – vždy na středu, bez růstu
   ========================================================= */
.imageznacka{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
.imageznacka img{
  width:auto !important;
  height:auto !important;
  max-height:var(--logo-max) !important;
  max-width:100% !important;
  object-fit:contain !important;
  display:block !important;
}

/* =========================================================
   9) ROZLOŽENÍ – počet v řadě dle šířky
   ========================================================= */

/* Mobil: 2 v řadě */
@media (max-width:767px){
  :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li,
    body.type-post .subcategories.with-image li
  ){ width:50% !important; }

  :is(
    .subcategories.seo-subcategories.with-image li a,
    .seo-subcategories.with-image li a,
    body.type-post .subcategories.with-image li a
  ){ height:var(--btn-h-mobile) !important; }
}

/* Tablet: 3 v řadě */
@media (min-width:768px) and (max-width:991px){
  :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li,
    body.type-post .subcategories.with-image li
  ){ width:33.333% !important; }
}

/* Kategorie (se sidebar / užší obsah): 3 v řadě */
@media (min-width:992px) and (max-width:1599px){
  html .type-category :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li
  ){ width:33.333% !important; }
}

/* Kategorie široký desktop: 5 v řadě */
@media (min-width:1600px){
  html .type-category :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li
  ){ width:20% !important; }
}

/* Blog: 4 v řadě na 992–1199 */
@media (min-width:992px) and (max-width:1199px){
  body.type-post :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li,
    .subcategories.with-image li
  ){ width:25% !important; }
}

/* Blog: 6 v řadě od 1200px */
@media (min-width:1200px){
  body.type-post :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li,
    .subcategories.with-image li
  ){ width:16.666% !important; }
}

html .type-category .seo-subcategories li a .text{
  font-size:14px !important;
  line-height:1.3em !important;
  font-weight:bold !important;
}

/* =========================================================
   9A) OBSAHOVÉ STRÁNKY SHOPTETU SE SIDEBAR MENU (type-page)
   - max 4 tlačítka vedle sebe
   ========================================================= */

@media (max-width:767px){
  body.type-page:not(.type-post):not(.type-category) :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li,
    .subcategories.with-image li
  ){ width:50% !important; }
}

@media (min-width:768px) and (max-width:991px){
  body.type-page:not(.type-post):not(.type-category) :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li,
    .subcategories.with-image li
  ){ width:33.333% !important; }
}

@media (min-width:992px) and (max-width:1599px){
  body.type-page:not(.type-post):not(.type-category) :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li,
    .subcategories.with-image li
  ){ width:33.333% !important; }
}

@media (min-width:1600px){
  body.type-page:not(.type-post):not(.type-category) :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li,
    .subcategories.with-image li
  ){
    width:25% !important;
    min-width:240px !important;
  }
}

/* =========================================================
   10) BARVY – jen pro ikony barev
   Platí pro: kategorie + obsahové stránky + blog
   Cílíme na:
   - /upload/barva/
   - /documents/upload/barva/
   - /ikony-kategorie/.../Barvy/ (case-insensitive)
   ========================================================= */

/* ===== 1) MODERNÍ PROHLÍŽEČE (plná oprava přes :has()) ===== */
@supports selector(:has(*)){

  /* výška tlačítka jen tam, kde se vyskytují barvy */
  :where(html .type-category, body.type-page, body.type-post)
  :is(.subcategories.with-image, .seo-subcategories.with-image)
  li:has(
    img[src*="/upload/barva/" i],
    img[src*="/documents/upload/barva/" i],
    img[src*="/ikony-kategorie/" i][src*="/barvy/" i]
  ) a{
    height:var(--btn-h) !important;
    display:flex !important;
    align-items:center !important;
  }

  /* slot pro barvy + ochranná zóna */
  :where(html .type-category, body.type-page, body.type-post)
  :is(.subcategories.with-image, .seo-subcategories.with-image)
  li:has(
    img[src*="/upload/barva/" i],
    img[src*="/documents/upload/barva/" i],
    img[src*="/ikony-kategorie/" i][src*="/barvy/" i]
  ) a .image{
    flex:0 0 var(--ico-slot-w) !important;
    width:var(--ico-slot-w) !important;
    height:var(--ico-slot-h) !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:4px !important;              /* ochranná zóna */
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  /* obrázek barvy: vždy se vejde do slotu */
  :where(html .type-category, body.type-page, body.type-post)
  :is(.subcategories.with-image, .seo-subcategories.with-image)
  li a .image img:is(
    [src*="/upload/barva/" i],
    [src*="/documents/upload/barva/" i],
    [src*="/ikony-kategorie/" i][src*="/barvy/" i]
  ){
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    display:block !important;
  }
}

/* ===== 2) FALLBACK (bez :has()) =====
   Pozn.: bez :has() neumíme v čistém CSS spolehlivě zacílit "výšku A"
   jen podle toho, že uvnitř je IMG s barvou. Umíme ale zabránit nafukování
   samotným obrázkem a dát ochrannou zónu kolem obrázku.
*/
@supports not selector(:has(*)){

  /* zmenši obrázek barvy, aby nenafukoval layout */
  :where(html .type-category, body.type-page, body.type-post)
  :is(.subcategories.with-image, .seo-subcategories.with-image)
  li a .image img:is(
    [src*="/upload/barva/" i],
    [src*="/documents/upload/barva/" i],
    [src*="/ikony-kategorie/" i][src*="/barvy/" i]
  ){
    width:auto !important;
    height:auto !important;
    max-width:var(--ico-max) !important;
    max-height:var(--ico-max) !important;
    object-fit:contain !important;
    display:block !important;
  }

  /* ochranná zóna okolo obrázku */
  :where(html .type-category, body.type-page, body.type-post)
  :is(.subcategories.with-image, .seo-subcategories.with-image)
  li a .image{
    padding:4px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
}

Kód pro prvek: Tlačítko s obrázkem a textem

Podle značky

<ul class="subcategories seo-subcategories with-image">
<li class="col-xs-6 col-sm-6 col-lg-3 col-xl-3"><a title="XXX" href="/XXX/"> <span class="image"> <img src='https://cdn.myshoptet.com/usr/www.primakoupelny.cz/user/documents/XXX.jpg' alt="XXX" /> </span> <span class="text">XXX</span> </a></li>
</ul>
<style><!--
.subcategories {display:none;}
--></style>

Kód pro prvek: Tlačítko se značkou

<ul class="subcategories seo-subcategories with-image"> 
<li class="col-xs-6 col-sm-4 col-lg-3 col-xl-3"><a title="XXX" href="/XXX/"> <span class="imageznacka"> <img src='https://cdn.myshoptet.com/usr/www.primakoupelny.cz/user/documents/upload/XXX.jpg' alt="Značka 1" /> </span> </a></li> 
</ul>
<style><!--
.subcategories {display:none;}
--></style>

Kód pro prvek: Tlačítko pro průvodce nákupem

Velký průvodce nákupem

<ul class="subcategories seo-subcategories with-image">
<li class="col-xs-6 col-sm-4 col-lg-3 col-xl-3 highlitedsub"><a title="XXX" href="/XXX/"> <span class="image"> <img src='https://cdn.myshoptet.com/usr/www.primakoupelny.cz/user/documents/upload/XXX.jpg' alt="XXX" /> </span> <span class="text">XXX</span> </a></li> 
</ul>
<style><!--
.subcategories {display:none;}
--></style>

Mini buttony pro TOP témata

Odkaz na externí CSS: https://www.primakoupelny.cz/user/documents/upload/CSS-kaskadove-styly/mini-buttony-pro-top-temata.css

Kód pro nasazení

  /* === Mini buttony s TOP tématy === */
  .top-topics-wrap{
    /* Rozložení */
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;

    /* Mezery */
    margin-top:-12px;   /* zkrácení mezery nad tlačítky */
    margin-bottom:16px; /* příjemná mezera pod nimi */

    /* Písmo */
    font-family:"Poppins", sans-serif;
  }

  .top-topics-wrap .top-topic{
    /* Vzhled tlačítka */
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:6px 14px;
    border-radius:999px;

    background:#f6f6f6;
    border:1px solid #e4e4e4;
    color:#24242E !important;
    text-decoration:none !important;

    font-size:14px;
    line-height:1.2;

    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .05s ease;
  }

  .top-topics-wrap .top-topic:hover{
    background:#eeeeee;
    border-color:#e4e4e4;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    transform:translateY(-1px);
    text-decoration:none !important;
  }

  /* Zvýraznění při ovládání klávesnicí (Tab) */
  .top-topics-wrap .top-topic:focus-visible{
    outline:2px solid #9e9e9e;
    outline-offset:2px;
  }

  /* Jemný efekt při kliknutí */
  .top-topics-wrap .top-topic:active{
    transform:translateY(0);
  }

  /* Aktivní/aktuální odkaz (pokud chcete zvýraznit vybraný) */
  .top-topics-wrap .top-topic.is-active,
  .top-topics-wrap .top-topic[aria-current="page"]{
    background:#24242E;
    border-color:#24242E;
    color:#ffffff !important;
    box-shadow:none;
    transform:none;
  }

Kód pro tento prvek

<nav class="top-topics-wrap" aria-label="Top vyhledávaná témata">
  <a href="/XXX" class="top-topic">text</a> 
  <a href="/XXX" class="top-topic">text</a> 
  <a href="/XXX" class="top-topic">text</a> 
</nav>

Modrý rámeček pro TIPY

Odkaz na externí CSS: https://www.primakoupelny.cz/user/documents/upload/CSS-kaskadove-styly/tip-modry-ramecek.css

TIP ➜ S výběrem té nejlepší vany vám pomůže náš podrobný průvodce Jak vybrat vanu.

Kód pro nasazení

/* === TIP rámeček === */
.tip-box{
  display:flex;
  align-items:baseline;
  gap:3px;

  padding:14px 16px;
  margin:16px 0;

  background:#ecf5fe;
  border:2px solid #1EAAE0;
  border-radius:10px;
}

.tip-box__icon{
  flex:0 0 auto;
  line-height:1;
  font-size:16px;
  margin-top:0;
}

.tip-box__text{
  margin:0;
  color:#24242E;
  font-family:"Poppins", sans-serif;
  font-size:16px;
  line-height:1.45;
}

.tip-box__label{
  font-weight:700;
}

.tip-box__text a{
  color:#1EAAE0;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
}

.tip-box__text a:hover{
  color:#0F86B8;
}

.tip-box__text a:focus-visible{
  outline:2px solid #00a8ee;
  outline-offset:2px;
  border-radius:4px;
}

Kód pro tento prvek

<div class="tip-box" role="note" aria-label="Tip">
  <span class="tip-box__icon" aria-hidden="true">💧</span>
  <p class="tip-box__text">
    <span class="tip-box__label">TIP</span> ➜ text
    <a href="/XXX">text</a>.
  </p>
</div>

Medailonek autora

Odkaz na externí CSS: https://www.primakoupelny.cz/user/documents/upload/CSS-kaskadove-styly/medailonek-autora.css

Mgr. Jana Nováková

SEO specialistka a copywriterka

Jako SEO expertka vnímám Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but alsog, r galley of type and scrambled it to make a type specimen book.

Kód pro nasazení

/* === Medailonek autora === */
:root{--b:#00a8ee;--bd:#e7eded;--t:#1d2a2b;--m:#5a6a6b;--strip:10px;--left:230px;--gap:26px}
.author-card{position:relative;overflow:hidden;padding:22px 14px 16px 18px;background:#fff;border:1px solid var(--bd);border-radius:14px;box-shadow:inset 4px 0 0 rgba(40,173,226,.10),
0 10px 26px rgba(0,0,0,.06),
0 2px 8px rgba(0,0,0,.04); }
.author-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--strip);pointer-events:none;background:linear-gradient(90deg,rgba(0,168,238,.18),rgba(0,168,238,.10) 45%,rgba(0,168,238,.04) 70%,rgba(0,168,238,0));z-index:0}
.author-card__stripe{display:none}
.author-card__inner{position:relative;z-index:1;padding:0 24px 0 20px;display:grid;grid-template-columns:max-content 1fr;gap:var(--gap);align-items:start}
.author-card__inner:before{
content:"";
position:absolute;
top:14px;bottom:14px;
left:calc(var(--left) + var(--gap));
width:1px;border-radius:2px;
background:rgba(0,168,238,.65)
}
.author-card__left{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.author-card__meta{width:100%}
.author-card__avatar{
width:116px;height:116px;border-radius:999px;overflow:hidden;background:#fff;border:0;
box-shadow:
inset 0 0 0 3px #fff,
inset 0 0 0 4px rgba(0,0,0,.08),
0 10px 24px rgba(0,0,0,.08);
}
.author-card__avatar img{width:100%;height:100%;object-fit:cover;display:block}
.author-card__quote{position:relative;padding:34px 0 4px 22px;line-height:1.6}
.author-card__quote:before{content:"“";position:absolute;left:22px;top:6px;font-family:Georgia,"Times New Roman",serif;font-size:54px;line-height:1;color:var(--b);opacity:.30}
.author-card__quote p{margin:0;font-style:italic;font-size:13.5px;color:#2b3a3b}
.author-card__name{font-weight:700;color:var(--t);font-size:16px;white-space:nowrap}
.author-card__role{margin-top:0;color:var(--m);font-size:13px;line-height:1.35}
@media(max-width:520px){
:root{--gap:14px} /* menší mezery */
.author-card{padding:14px;box-shadow:inset 3px 0 0 rgba(40,173,226,.10),0 10px 26px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.04)}
.author-card:before /* užší strip */
.author-card__inner{grid-template-columns:1fr;padding:0 12px;gap:12px}
.author-card__inner:before /* dělící čára pryč na mobilu */
.author-card__left{flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;gap:12px}
.author-card__meta{width:auto}
.author-card__avatar{width:74px;height:74px;box-shadow:0 0 0 8px #fff,0 0 0 9px rgba(0,0,0,.08),0 8px 18px rgba(0,0,0,.10)}
.author-card__name{white-space:normal} /* dovolí zalomení /
.author-card__quote{padding:26px 0 0 0} / bez odsazení vlevo */
.author-card__quote:before{left:0;top:2px;font-size:46px}
}

Kód pro tento prvek

<div class="author-card">
<div class="author-card__stripe">&nbsp;</div>
<div class="author-card__inner">
<div class="author-card__left">
<div class="author-card__avatar"><img src='https://cdn.myshoptet.com/usr/www.primakoupelny.cz/user/documents/upload/XXX.jpg' alt="Jméno Příjmení" /></div>
<div class="author-card__meta">
<div class="author-card__name">Jméno Příjmení</div>
<div class="author-card__role">Obor a zaměření</div>
</div>
</div>
<div class="author-card__quote">
<p>Popis pozice, čím se autor zabývá, dlouhý text v bloku citace...</p>
</div>
</div>
</div>

Info bloky 3 vedle sebe

Odkaz na externí CSS: https://www.primakoupelny.cz/user/documents/upload/CSS-kaskadove-styly/info-bloky-3-vedle-sebe.css

Pro koho

Tento výběr je pro každého, kdo řeší vybavení koupelny a chce mít jistotu v rozměrech, připojení a bezproblémové montáži.

S čím pomůže

Pomůže rychle zúžit výběr podle kompatibility, rozměrů a typu instalace, aby vše sedělo v prostoru i na napojení.

Jak vybrat

Zkontrolujte rozměry prostoru, typ instalace a napojení a podle toho zvolte materiál i povrch s ohledem na údržbu.

Průvodce krok za krokem (bloky pod sebou)

Odkaz na externí CSS: https://www.primakoupelny.cz/user/documents/upload/CSS-kaskadove-styly/pruvodce-krok-za-krokem-pod-sebou.css

Průvodce nákupem

Změřte prostor

Zkontrolujte šířku, hloubku a místo pro otevírání, případně rozteče a napojení.
Vyberte typ instalace

Rozhodněte se mezi nástěnným, stojánkovým nebo podomítkovým řešením podle přívodů.
Doladěte materiál a povrch

Volte podle odolnosti, údržby a toho, jak zatížená je koupelna.

Box s fajfkami pro 1 a 2 sloupce

Odkaz na externí CSS: https://www.primakoupelny.cz/user/documents/upload/CSS-kaskadove-styly/box-s-fajfkami-pro-1-a-2-sloupce.css

Odrážka jedna pro ultra dlouhé dlouhé dlouhé řádky a dlouhý text
Odrážka dva pro ultra dlouhé dlouhé dlouhé řádky a dlouhý text
Odrážka tři pro ultra dlouhé dlouhé dlouhé řádky a dlouhý text

Odrážka jedna
Odrážka dva
Odrážka tři
Odrážka čtyři
Odrážka pět
Odrážka šest

FAQ

Odkaz na externí CSS: https://www.primakoupelny.cz/user/documents/upload/CSS-kaskadove-styly/FAQ-box-rozbalovaci.css

Otázka 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Otázka 2

Otázka 3

Srovnávací tabulka

Odkaz na externí CSS:

Služba A

Vhodné pro většinu

+Rychlé dodání a jednoduchá instalace.
+Dobrá kompatibilita se standardními roztečemi.

−Méně variant povrchů.
−Vyšší nároky na údržbu v tvrdé vodě.

Služba B

Pro náročnější

+Širší výběr materiálů a povrchů.
+Lepší odolnost při každodenním provozu.
+Třetí výhoda pro náročnější uživatele.

−Často vyšší pořizovací cena.
−U některých řešení složitější montáž.

Buttony pro rozcestníky

Mini buttony pro TOP témata

Modrý rámeček pro TIPY

Medailonek autora

Info bloky 3 vedle sebe

Pro koho

S čím pomůže

Jak vybrat

Průvodce krok za krokem (bloky pod sebou)

Průvodce nákupem

Změřte prostor

Vyberte typ instalace

Doladěte materiál a povrch

Box s fajfkami pro 1 a 2 sloupce

FAQ

Srovnávací tabulka