Stylebook

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: {
    title: "Featured categories",
    perex: "We need a recap by eod, cob or whatever comes first new economy, marketing",
  },
} %}

          <header class="base-header">
      <h2 class="base-header__heading base-h1">Featured categories</h2>
        <p class="base-header__paragraph">We need a recap by eod, cob or whatever comes first new economy, marketing</p>
  </header>

Base Header align left

Header alignned left

They have downloaded gmail and seems to be working for now tribal knowledge so fire up your browser.

        {% include "@Components/base-header/base-header.twig" with {
  props: {
    title: "Header alignned left",
    perex: "They have downloaded gmail and seems to be working for now tribal knowledge so fire up your browser.",
    variant: "left",
  }
} %}

          <header class="base-header --left">
      <h2 class="base-header__heading base-h1">Header alignned left</h2>
        <p class="base-header__paragraph">They have downloaded gmail and seems to be working for now tribal knowledge so fire up your browser.</p>
  </header>

Base Header underline

Header underline

3

        {% include "@Components/base-header/base-header.twig" with {
  props: {
    title: "Header underline",
    perex: "",
    variant: "left",
    type: "underline",
    number: "3"
  }
} %}

          <header class="base-header --left --underline">
      <div class="base-header__heading-wrapper">
      <h2 class="base-header__heading base-h1">Header underline</h2>
      <div class="base-header__number">
        3
      </div>
    </div>
    </header>

Schema

    {
  "props": {
    "title": {
      "type": "string",
      "description": "Title of the component"
    },
    "id": {
      "type": "string",
      "description": "ID of the component"
    },
    "perex": {
      "type": "string",
      "description": "Perex of the component"
    },
    "extraClass": {
      "type": "string",
      "description": "Class modificators of the component"
    },
    "variant": {
      "type": "string",
      "description": "left | center(default)"
    },
    "headingLevel": {
      "type": "number",
      "description": "heading level | 2(default)"
    }
  }
}