Base Header

  • Featured categories

    We need a recap by eod, cob or whatever comes first new economy, marketing
  •         {% include "@Components/base-header/base-header.twig" with {props: {
      heading: {
        title: "Featured categories",
      },
      perex: "We need a recap by eod, cob or whatever comes first new economy, marketing",
      buttons: {
        primary: {
          title: "Zjistit více",
          url: "#",
        },
        secondary: {
          title: "Another one",
          url: "#",
        }
      }
    }} %}
    
          
  •           <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">
                Featured categories
          </h2>
      
          <div class="base-header__description entry-content mb-0">We need a recap by eod, cob or whatever comes first new economy, marketing</div>
      
      
          
    
    
    
      <div class="g-base flex-wrap --align-center --gap-md g-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>
      
    
    </header>
    
            

Base Header align left

  • Featured categories

    We need a recap by eod, cob or whatever comes first new economy, marketing

    Mosambiku tóny ně nahý vysoký, bez lety uměli od evoluci k nevratné. Stopami od studie, u míru dá temna vrhá poválečná migrační určit, tu

  •         {% include "@Components/base-header/base-header.twig" with {props: {
      heading: {
        title: "Featured categories",
      },
      perex: "
        <p>We need a recap by eod, cob or whatever comes first new economy, marketing</p>
        <p>Mosambiku tóny ně nahý vysoký, bez lety uměli od evoluci k nevratné. Stopami od studie, u míru dá temna vrhá poválečná migrační určit, tu</p>
      ",
      variant: "left",
      buttons: {
        primary: {
          title: "Zjistit více",
          url: "#",
        },
        secondary: {
          title: "Another one",
          url: "#",
        }
      }
    }} %}
    
          
  •           <header class="base-header d-flex flex-column gap-3 text-center align-items-center --left">
    
      
          <h2 class="base-heading mb-0 u-fw-700 u-h2">
                Featured categories
          </h2>
      
          <div class="base-header__description entry-content mb-0">
        <p>We need a recap by eod, cob or whatever comes first new economy, marketing</p>
        <p>Mosambiku tóny ně nahý vysoký, bez lety uměli od evoluci k nevratné. Stopami od studie, u míru dá temna vrhá poválečná migrační určit, tu</p>
      </div>
      
      
          
    
    
    
      <div class="g-base flex-wrap --align-left --gap-md g-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>
      
    
    </header>
    
            

Base Header content block usage

  • Featured categories

    My custom content
  •         {% embed "@Components/base-header/base-header.twig" with {props: {
      heading: {
        title: "Featured categories",
      },
    }} %}
    
      {% block content %}
        <div>My
          <strong>custom</strong>
          <a href="#">content</a>
        </div>
      {% endblock %}
    
    {% endembed %}
    
          
  •           <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">
                Featured categories
          </h2>
      
      
          <div>My
          <strong>custom</strong>
          <a href="#">content</a>
        </div>
      
      
    
    </header>
    
            

Base Header - heading custom

  • Featured categories

    We need a recap by eod, cob or whatever comes first new economy, marketing
  •         {% include "@Components/base-header/base-header.twig" with {props: {
      heading: {
        title: "Featured categories",
        style: "h1",
        level: 1,
      },
      perex: "We need a recap by eod, cob or whatever comes first new economy, marketing",
    }} %}
    
          
  •           <header class="base-header d-flex flex-column gap-3 text-center align-items-center">
    
      
          <h1 class="base-heading mb-0 u-fw-700 u-h1">
                Featured categories
          </h1>
      
          <div class="base-header__description entry-content mb-0">We need a recap by eod, cob or whatever comes first new economy, marketing</div>
      
      
      
    
    </header>