Stylebook

id: w-s-6

Budoucnost je u nás

Savců mi navrhovanou věřila půdorysem žlutě kruhu, vás sportem potřebu, ať ať jih musel řad nahé fond minerálů pokusy. Aby nejdřív dobu žila jednu ulice, neonu stroje polí led komunikují, dynamiky z druh ať tkví ta větví k z zástupci uprchlíci.

Zjistit více Another one

        {% include "@Components/sections/banner-section/banner-section.twig" with {props: {
  banner: {
    title: "Budoucnost je u nás",
    description: "Savců mi navrhovanou věřila půdorysem žlutě kruhu, vás sportem potřebu, ať ať jih musel řad nahé fond minerálů pokusy. Aby nejdřív dobu žila jednu ulice, neonu stroje polí led komunikují, dynamiky z druh ať tkví ta větví k z zástupci uprchlíci.",
    buttons: {
      primary: {
        title: "Zjistit více",
        url: "#",
      },
      secondary: {
        title: "Another one",
        url: "#",
      }
    },
  }
}} %}

          


<section class="base-section  s-banner">
  <div class="base-section__container container">
    
    
<article class="i-banner p-6 u-posr --default">
  <div class="i-banner__inner d-flex flex-column gap-2">

    <header class="i-banner__header d-flex flex-column gap-2">
              <h2 class="base-heading mb-0 u-fw-700 u-h2">
            Budoucnost je u nás
      </h2>
      

              <div class="i-banner__description u-fz-16">Savců mi navrhovanou věřila půdorysem žlutě kruhu, vás sportem potřebu, ať ať jih musel řad nahé fond minerálů pokusy. Aby nejdřív dobu žila jednu ulice, neonu stroje polí led komunikují, dynamiky z druh ať tkví ta větví k z zástupci uprchlíci.</div>
      
    </header>

    



  <div class="g-base flex-wrap --align-left --gap-md g-buttons i-banner__buttons">
  
              <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary      --full-width-mobile" href='#'>
      <span class="btn__title u-z-index-1">
      Zjistit více
    </span>
      
  
  </a>
      
              <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline      --full-width-mobile" href='#'>
      <span class="btn__title u-z-index-1">
      Another one
    </span>
      
  
  </a>
      
    </div>

  </div>


  </article>

    </div>
</section>

Preview

Twig

Html

Budoucnost je u nás

Zjistit více

        {% include "@Components/sections/banner-section/banner-section.twig" with {props: {
  banner: {
    title: "Budoucnost je u nás",
    img: {
      src: "https://placehold.co/1408x176",
      srcset: [
        "https://placehold.co/1408x176 1x",
        "https://placehold.co/2816x352 2x",
      ]
    },
    buttons: {
      primary: {
        title: "Zjistit více",
        url: "#",
      },
    },
  }
}} %}

          


<section class="base-section  s-banner">
  <div class="base-section__container container">
    
      
<article class="i-banner p-6 u-posr --image">
  <div class="i-banner__inner d-flex flex-column gap-2">

    <header class="i-banner__header d-flex flex-column gap-2">
              <h2 class="base-heading mb-0 u-fw-700 u-h2">
            Budoucnost je u nás
      </h2>
      

      
    </header>

    



  <div class="g-base flex-wrap --align-left --gap-md g-buttons i-banner__buttons">
  
              <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary      --full-width-mobile" href='#'>
      <span class="btn__title u-z-index-1">
      Zjistit více
    </span>
      
  
  </a>
      
      
    </div>

  </div>


      <div class="i-banner__image u-posa top-0 start-0">
      <div class="img u-posr overflow-hidden --cover">
  <picture>
    
    <img src="" data-src="https://placehold.co/1408x176" alt="" width="1408" height="176" draggable="false" srcset="" data-srcset="https://placehold.co/1408x176 1x, https://placehold.co/2816x352 2x">
  </picture>
</div>
    </div>
  </article>

    </div>
</section>