Stylebook

id: w-c-3
figma

Base Header

Featured categories

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

Zjistit více Another one

        {% 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

Zjistit více Another one

        {% 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>