• Base heading 

  •         {% include "@Components/base-heading/base-heading.twig" with {props: {
  title: "Base heading",
}} %}

      
  •           <h2 class="base-heading mb-0 u-fw-700 u-h2">
            Base heading
      </h2>

  • Heading level 1 

  •         {% include "@Components/base-heading/base-heading.twig" with {props: {
  title: "Heading level 1",
  level: 1,
  style: "h1",
}} %}

      
  •           <h1 class="base-heading mb-0 u-fw-700 u-h1">
            Heading level 1
      </h1>

  • Heading level 3 

  •         {% include "@Components/base-heading/base-heading.twig" with {props: {
  title: "Heading level 3",
  level: 3,
  style: "h3",
}} %}

      
  •           <h3 class="base-heading mb-0 u-fw-700 u-h3">
            Heading level 3
      </h3>

  • Heading level 4 

  •         {% include "@Components/base-heading/base-heading.twig" with {props: {
  title: "Heading level 4",
  level: 4,
  style: "h4",
}} %}

      
  •           <h4 class="base-heading mb-0 u-fw-700 u-h4">
            Heading level 4
      </h4>
  • Heading level 5 
  •         {% include "@Components/base-heading/base-heading.twig" with {props: {
  title: "Heading level 5",
  level: 5,
  style: "h5",
}} %}

      
  •           <h5 class="base-heading mb-0 u-fw-700 u-h5">
            Heading level 5
      </h5>

  • Heading level 3 but style as h5 

  •         {% include "@Components/base-heading/base-heading.twig" with {props: {
  title: "Heading level 3 but style as h5",
  level: 3,
  style: "h5",
}} %}

      
  •           <h3 class="base-heading mb-0 u-fw-700 u-h5">
            Heading level 3 but style as h5
      </h3>

  • Heading
    with html tags in title 

  •         {% include "@Components/base-heading/base-heading.twig" with {props: {
  title: "Heading <br> with <span class='u-bg-primary u-color-white px-1'>html</span> tags in title",
}} %}

      
  •           <h2 class="base-heading mb-0 u-fw-700 u-h2">
            Heading <br> with <span class='u-bg-primary u-color-white px-1'>html</span> tags in title
      </h2>

  • My custom
    block content 

  •         {% embed "@Components/base-heading/base-heading.twig" with {props: {
  style: "h3",
  level: 3,
}} %}

  {% block content %}
    My custom
    <br>
    block
    <i>content</i>
  {% endblock %}
{% endembed %}

      
  •           <h3 class="base-heading mb-0 u-fw-700 u-h3">
      My custom
    <br>
    block
    <i>content</i>
  </h3>