Stylebook

id: w-s-22

Content section 8 cols

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, maxime?
Nadpis druhé úrovně

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ipsum similique assumenda pariatur, recusandae quam.

Nadpis třetí úrovně

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ipsum similique assumenda pariatur, recusandae quam.

Biliónech mj. kůžedíky discipliny obory mizení dá zvýší u nad u plavby mě budu ní čem, rozvojem, mj. za pomocí ramenné už stehny jako z už ať označených tj. děsivé takhle té nebude, hledána profesorka oblastech sítě tj. vzkříšený u přehlídky zemím. Hrom větví za k lyžaři chleba národního k zvané více telefonování světlých naplánoval výbavy.

Nadpis čtvrté úrovně

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis non nesciunt eveniet dignissimos unde dolor veniam iure voluptate iusto quae!

Nadpis páté úrovně

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ipsum similique assumenda pariatur, recusandae quam.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quae praesentium, soluta esse recusandae et amet deserunt odio libero neque temporibus voluptatum natus enim at iste in voluptatem architecto velit adipisci commodi est nihil labore. Earum, quo iure. Ipsa quaerat blanditiis deserunt fugit voluptatum quasi impedit a recusandae ea sequi.

Nadpis třetí úrovně

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aliquam at porttitor sem. Aliquam erat volutpat.

Donec placerat nisl magna, et faucibus arcu condimentum sed.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aliquam at porttitor sem. Aliquam erat volutpat.

Aliquam at porttitor sem. Aliquam erat volutpat.

Donec placerat nisl magna, et faucibus arcu condimentum sed.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aliquam at porttitor sem. Aliquam erat volutpat.

        {% set content_sample %}
{% include "@Components/wordpress/entry-content/entry-content-demo-small.twig" %}
{% endset %}

{% include "@Components/sections/content-section/content-section.twig" with {props: {
  header: {
    heading: {
      title: "Content section 8 cols",
    },
    perex: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, maxime?"
  },
  col: 8,
  content: content_sample,
}} %}

          


  

<section class="base-section  s-content">
  <div class="base-section__container container">
    
          <header class="base-header d-flex flex-column gap-3 text-center align-items-center">

  
      <h2 class="base-heading mb-0 u-fw-700 u-h2">
            Content section 8 cols
      </h2>
  
      <div class="base-header__description entry-content mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, maxime?</div>
  
  
  

</header>
    
    
      <div class="row justify-content-center">
        <div class="col-lg-8">

          <div class="entry-content"><h2>Nadpis druhé úrovně</h2>
<p>Lorem ipsum dolor sit amet
  <a href="#">consectetur adipisicing</a>
  elit. Itaque ipsum similique assumenda pariatur, recusandae quam.
</p>

<div class="c-photogallery --inline mb-7 mt-7">
      
            <div class="row c-photogallery__row g-2 mb-2">
      <div class="c-photogallery__col col-6 col-md-4">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover  --video  h-100 u-rounded-3" data-fancybox="content-gallery" data-src="https://www.youtube.com/watch?v=YQHsXMglC9A">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://img.youtube.com/vi/YQHsXMglC9A/maxresdefault.jpg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

      <div class="c-photogallery__play-icon u-posa u-top-50-p u-left-50-p u-translate-middle u-bg-white px-2 py-1 u-rounded-3 ">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.343 6.326 4 1v14l8.34-5.346a1.967 1.967 0 0 0 .004-3.328Zm-6.508 5.318V4.348l5.525 3.527.004.002a.132.132 0 0 1 .06.112.13.13 0 0 1-.061.11l-.188.116v.006l-5.34 3.423Z" clip-rule="evenodd"/></svg>      </span>
    </div>
  </div>
    </div>
      <div class="c-photogallery__col col-6 col-md-4">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="content-gallery" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
    </div>
      <div class="c-photogallery__col col-6 col-md-4">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="content-gallery" data-src="https://placehold.co/1600x900">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://placehold.co/640x480" alt="" width="340" height="224" draggable="false" srcset="" data-srcset="https://placehold.co/640x480 1x, https://placehold.co/1280x960 2x">
  </picture>
</div>

  </div>
    </div>
  </div>
          
      
  </div>
<img src="https://placehold.co/640x240" loading="lazy" alt="" width="640" height="240">
<h3>Nadpis třetí úrovně</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ipsum similique assumenda pariatur, recusandae quam.</p>
<p>Biliónech mj. kůžedíky discipliny obory mizení dá zvýší u nad u plavby mě budu ní čem, rozvojem, mj. za pomocí ramenné už stehny jako z už ať označených tj. děsivé takhle té nebude, hledána profesorka oblastech sítě tj. vzkříšený u přehlídky zemím. Hrom větví za k lyžaři chleba národního k zvané více telefonování světlých naplánoval výbavy.</p>
<h4>Nadpis čtvrté úrovně</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis non nesciunt eveniet dignissimos unde dolor veniam iure voluptate iusto quae!</p>
<img src="https://placehold.co/640x240" loading="lazy" alt="" width="640" height="240">
<h5>Nadpis páté úrovně</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ipsum similique assumenda pariatur, recusandae quam.</p>
<blockquote>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quae praesentium, soluta esse recusandae et amet deserunt odio libero neque temporibus voluptatum natus enim at iste in voluptatem architecto velit adipisci commodi est nihil labore. Earum, quo iure. Ipsa quaerat blanditiis deserunt fugit voluptatum quasi impedit a recusandae ea sequi.
</blockquote>


<h3>Nadpis třetí úrovně</h3>
<img src="https://placehold.co/640x240" loading="lazy" alt="" width="640" height="240">

<p>
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong>
</p>

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      <li>Aliquam at porttitor sem. Aliquam erat volutpat.</li>
      <li>Donec placerat nisl magna, et faucibus arcu condimentum sed.</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      <li>Aliquam at porttitor sem. Aliquam erat volutpat.</li>
    </ul>
  </li>
  <li>Aliquam at porttitor sem. Aliquam erat volutpat.</li>
  <li>Donec placerat nisl magna, et faucibus arcu condimentum sed.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li>Aliquam at porttitor sem. Aliquam erat volutpat.</li>
</ul>
</div>

        </div>
      </div>

    

    </div>
</section>

Content section 12 cols
Nadpis druhé úrovně

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ipsum similique assumenda pariatur, recusandae quam.

Nadpis třetí úrovně

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ipsum similique assumenda pariatur, recusandae quam.

Biliónech mj. kůžedíky discipliny obory mizení dá zvýší u nad u plavby mě budu ní čem, rozvojem, mj. za pomocí ramenné už stehny jako z už ať označených tj. děsivé takhle té nebude, hledána profesorka oblastech sítě tj. vzkříšený u přehlídky zemím. Hrom větví za k lyžaři chleba národního k zvané více telefonování světlých naplánoval výbavy.

Nadpis čtvrté úrovně

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis non nesciunt eveniet dignissimos unde dolor veniam iure voluptate iusto quae!

Nadpis páté úrovně

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ipsum similique assumenda pariatur, recusandae quam.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quae praesentium, soluta esse recusandae et amet deserunt odio libero neque temporibus voluptatum natus enim at iste in voluptatem architecto velit adipisci commodi est nihil labore. Earum, quo iure. Ipsa quaerat blanditiis deserunt fugit voluptatum quasi impedit a recusandae ea sequi.

Nadpis třetí úrovně

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aliquam at porttitor sem. Aliquam erat volutpat.

Donec placerat nisl magna, et faucibus arcu condimentum sed.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aliquam at porttitor sem. Aliquam erat volutpat.

Aliquam at porttitor sem. Aliquam erat volutpat.

Donec placerat nisl magna, et faucibus arcu condimentum sed.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aliquam at porttitor sem. Aliquam erat volutpat.

        {% set content_sample %}
{% include "@Components/wordpress/entry-content/entry-content-demo-small.twig" %}
{% endset %}

{% include "@Components/sections/content-section/content-section.twig" with {props: {
  header: {
    heading: {
      title: "Content section 12 cols",
    },
  },
  content: content_sample,
}} %}

          




<section class="base-section  s-content">
  <div class="base-section__container container">
    
          <header class="base-header d-flex flex-column gap-3 text-center align-items-center">

  
      <h2 class="base-heading mb-0 u-fw-700 u-h2">
            Content section 12 cols
      </h2>
  
  
  
  

</header>
    
    
      <div class="row justify-content-center">
        <div class="col-12">

          <div class="entry-content"><h2>Nadpis druhé úrovně</h2>
<p>Lorem ipsum dolor sit amet
  <a href="#">consectetur adipisicing</a>
  elit. Itaque ipsum similique assumenda pariatur, recusandae quam.
</p>

<div class="c-photogallery --inline mb-7 mt-7">
      
            <div class="row c-photogallery__row g-2 mb-2">
      <div class="c-photogallery__col col-6 col-md-4">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover  --video  h-100 u-rounded-3" data-fancybox="content-gallery" data-src="https://www.youtube.com/watch?v=YQHsXMglC9A">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://img.youtube.com/vi/YQHsXMglC9A/maxresdefault.jpg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

      <div class="c-photogallery__play-icon u-posa u-top-50-p u-left-50-p u-translate-middle u-bg-white px-2 py-1 u-rounded-3 ">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.343 6.326 4 1v14l8.34-5.346a1.967 1.967 0 0 0 .004-3.328Zm-6.508 5.318V4.348l5.525 3.527.004.002a.132.132 0 0 1 .06.112.13.13 0 0 1-.061.11l-.188.116v.006l-5.34 3.423Z" clip-rule="evenodd"/></svg>      </span>
    </div>
  </div>
    </div>
      <div class="c-photogallery__col col-6 col-md-4">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="content-gallery" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
    </div>
      <div class="c-photogallery__col col-6 col-md-4">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="content-gallery" data-src="https://placehold.co/1600x900">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://placehold.co/640x480" alt="" width="340" height="224" draggable="false" srcset="" data-srcset="https://placehold.co/640x480 1x, https://placehold.co/1280x960 2x">
  </picture>
</div>

  </div>
    </div>
  </div>
          
      
  </div>
<img src="https://placehold.co/640x240" loading="lazy" alt="" width="640" height="240">
<h3>Nadpis třetí úrovně</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ipsum similique assumenda pariatur, recusandae quam.</p>
<p>Biliónech mj. kůžedíky discipliny obory mizení dá zvýší u nad u plavby mě budu ní čem, rozvojem, mj. za pomocí ramenné už stehny jako z už ať označených tj. děsivé takhle té nebude, hledána profesorka oblastech sítě tj. vzkříšený u přehlídky zemím. Hrom větví za k lyžaři chleba národního k zvané více telefonování světlých naplánoval výbavy.</p>
<h4>Nadpis čtvrté úrovně</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis non nesciunt eveniet dignissimos unde dolor veniam iure voluptate iusto quae!</p>
<img src="https://placehold.co/640x240" loading="lazy" alt="" width="640" height="240">
<h5>Nadpis páté úrovně</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ipsum similique assumenda pariatur, recusandae quam.</p>
<blockquote>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quae praesentium, soluta esse recusandae et amet deserunt odio libero neque temporibus voluptatum natus enim at iste in voluptatem architecto velit adipisci commodi est nihil labore. Earum, quo iure. Ipsa quaerat blanditiis deserunt fugit voluptatum quasi impedit a recusandae ea sequi.
</blockquote>


<h3>Nadpis třetí úrovně</h3>
<img src="https://placehold.co/640x240" loading="lazy" alt="" width="640" height="240">

<p>
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong>
</p>

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      <li>Aliquam at porttitor sem. Aliquam erat volutpat.</li>
      <li>Donec placerat nisl magna, et faucibus arcu condimentum sed.</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      <li>Aliquam at porttitor sem. Aliquam erat volutpat.</li>
    </ul>
  </li>
  <li>Aliquam at porttitor sem. Aliquam erat volutpat.</li>
  <li>Donec placerat nisl magna, et faucibus arcu condimentum sed.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li>Aliquam at porttitor sem. Aliquam erat volutpat.</li>
</ul>
</div>

        </div>
      </div>

    

    </div>
</section>