Foehn Design System

Page Title Banner: Default 

<div class="vd-bg-pattern-gray">
    <div class="container">
        <nav aria-label="Fil d'Ariane">
            <h2 class="sr-only">File d'Ariane</h2>
            <ol class="breadcrumb">

                <li class="breadcrumb-item"><a href="#">level 1</a></li>

                <li class="breadcrumb-item"><a href="#">level 2</a></li>

                <li class="breadcrumb-item"><a href="#">level 3</a></li>

                <li class="sr-only" aria-current="page">level 4</li>

            </ol>
        </nav>

        <h1 class="mt-0">Page title</h1>
    </div>
</div>
 
<div class="vd-bg-pattern-gray">
  <div class="container">
    {% render '@breadcrumb', breadcrumb, true %}
    <h1 class="mt-0">{{ pageTitle.text }}</h1>
  </div>
</div>
 
{
  "pageTitle": {
    "text": "Page title"
  },
  "prestation": {
    "label": "Commander",
    "url": "#"
  },
  "breadcrumb": {
    "breadcrumb": [
      {
        "page": "level 1",
        "url": "#"
      },
      {
        "page": "level 2",
        "url": "#"
      },
      {
        "page": "level 3",
        "url": "#"
      },
      {
        "page": "level 4",
        "url": "#"
      }
    ]
  }
}

No notes defined.