<div class="theme-light-on-brand bg-primary mb-tablet-1200 py-1200 py-tablet-1700 hide-from-visual-tests">
  <Container>

    <h1
      class="Flex Flex--noWrap Flex--alignmentXStretch Flex--alignmentYCenter Flex--row typography-heading-xlarge-bold"
      style="--flex-spacing: var(--spirit-space-1000)"
    >
      {{ title }}

      {% if isUnstable %}
        <Tag color="warning" size="large">Unstable</Tag>
      {% endif %}
    </h1>

    <Breadcrumbs>
      <ol>
        <li class="d-flex">
          <Link href="http://localhost:3456" color="primary" underlined="always">Spirit</Link>
          <Icon name="chevron-right" />
        </li>
        <li class="d-flex">
          <Link href="/" color="primary" underlined="always">Web Twig</Link>
          <Icon name="chevron-right" />
        </li>
        {% if parentPageName %}
          <li class="d-flex">
            <Link href="{{ parentPageUrl }}" color="primary" underlined="always">{{ parentPageName }}</Link>
            <Icon name="chevron-right" />
          </li>
        {% endif %}
        <li class="d-flex">
          {# Use <a> instead of <Link> so `href` can be empty (= current URL): #}
          <a href="" class="link-secondary" aria-current="page">{{ title }}</a>
        </li>
      </ol>
    </Breadcrumbs>

  </Container>
</div>
