<div class="basic-header">
    <div class="basic-header__wrapper">
        <div class="basic-header__content">
            <div class="header-base header-base--dark">
                <div class="header-base__breadcrumbs">
                    <nav aria-label="Breadcrumb navigation" class="breadcrumbs breadcrumbs--dark">
                        <ul class="breadcrumbs__list">
                            <li class="breadcrumbs__item">
                                <a href="#" class="breadcrumbs__item-link">
                                    Home</a><span class="breadcrumbs__separator"><svg aria-hidden="true" class="icon-right-triangle" xmlns="http://www.w3.org/2000/svg" width="6" height="8" viewBox="0 0 6 8">
                                        <path class="_mark icon-right-triangle__shape" fill="#AEB4BA" fill-rule="evenodd" d="M0 0l6 4-6 4z" />
                                    </svg>
                                </span>
                            </li>
                            <li class="breadcrumbs__item">
                                <a href="#" class="breadcrumbs__item-link">
                                    Our Work</a><span class="breadcrumbs__separator"><svg aria-hidden="true" class="icon-right-triangle" xmlns="http://www.w3.org/2000/svg" width="6" height="8" viewBox="0 0 6 8">
                                        <path class="_mark icon-right-triangle__shape" fill="#AEB4BA" fill-rule="evenodd" d="M0 0l6 4-6 4z" />
                                    </svg>
                                </span>
                            </li>
                            <li class="breadcrumbs__item">
                                <a href="#" class="breadcrumbs__item-link">
                                    Interior Page One</a><span class="breadcrumbs__separator"><svg aria-hidden="true" class="icon-right-triangle" xmlns="http://www.w3.org/2000/svg" width="6" height="8" viewBox="0 0 6 8">
                                        <path class="_mark icon-right-triangle__shape" fill="#AEB4BA" fill-rule="evenodd" d="M0 0l6 4-6 4z" />
                                    </svg>
                                </span>
                            </li>
                            <li class="breadcrumbs__item">
                                <span class="breadcrumbs__item-current">
                                    Child Page 2
                                </span>
                            </li>
                        </ul>
                    </nav>
                </div>

                <div class="header-base__title">
                    <h1 class="header-base__title-header">Interior Page</h1>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="basic-header">
    <div class="basic-header__wrapper">
        <div class="basic-header__content">
            {% include "templates/header-base/header-base.twig" with {
                breadcrumbs: breadcrumbs,
                post: post,
                background: background
            } %}
        </div>
    </div>
</div>
{
  "site": {
    "name": "E3 Alliance"
  },
  "mainMenu": {
    "currentPageInMenu": true,
    "items": [
      {
        "title": "Our Work",
        "url": "https://google.com",
        "isActive": true,
        "isChildActive": false,
        "isDescendantActive": true,
        "children": [
          {
            "title": "Interior Page 1",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": true,
            "isDescendantActive": true,
            "children": [
              {
                "title": "Child Page 1",
                "url": "http://google.com",
                "isActive": false,
                "isChildActive": false,
                "isDescendantActive": false,
                "children": []
              },
              {
                "title": "Child Page 2",
                "url": "http://google.com",
                "isActive": true,
                "isChildActive": false,
                "isDescendantActive": false,
                "children": []
              },
              {
                "title": "Child Page 3",
                "url": "http://google.com",
                "isActive": false,
                "isChildActive": false,
                "isDescendantActive": false,
                "children": []
              }
            ]
          },
          {
            "title": "Interior Page 2",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": [
              {
                "title": "Child Page 1",
                "url": "http://google.com",
                "isActive": false,
                "isChildActive": false,
                "isDescendantActive": false,
                "children": []
              },
              {
                "title": "Child Page 2",
                "url": "http://google.com",
                "isActive": true,
                "isChildActive": false,
                "isDescendantActive": false,
                "children": []
              },
              {
                "title": "Child Page 3",
                "url": "http://google.com",
                "isActive": false,
                "isChildActive": false,
                "isDescendantActive": false,
                "children": []
              }
            ]
          },
          {
            "title": "Interior Page 3",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          }
        ]
      },
      {
        "title": "Services",
        "url": "http://google.com",
        "isActive": false,
        "isChildActive": false,
        "isDescendantActive": false,
        "children": [
          {
            "title": "Interior Page 1",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          },
          {
            "title": "Interior Page 2",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          },
          {
            "title": "Interior Page 3",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          }
        ]
      },
      {
        "title": "About",
        "url": "http://google.com",
        "isActive": false,
        "isChildActive": false,
        "isDescendantActive": false,
        "children": [
          {
            "title": "Interior Page 1 Interior Page 1 Interior Page 1 Interior Page 1",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          },
          {
            "title": "Interior Page 2",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          },
          {
            "title": "Interior Page 3",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          },
          {
            "title": "Interior Page 4",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": true,
            "children": []
          },
          {
            "title": "Interior Page 5",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          },
          {
            "title": "Interior Page 6",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          },
          {
            "title": "Interior Page 7",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          }
        ]
      },
      {
        "title": "Invest",
        "url": "http://google.com",
        "isActive": false,
        "isChildActive": false,
        "isDescendantActive": false,
        "children": [
          {
            "title": "Interior Page 1",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          },
          {
            "title": "Interior Page 2",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          },
          {
            "title": "Interior Page 3",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          }
        ]
      }
    ]
  },
  "breadcrumbs": [
    {
      "title": "Home",
      "url": "#"
    },
    {
      "title": "Our Work",
      "url": "#"
    },
    {
      "title": "Interior Page One",
      "url": "#"
    },
    {
      "title": "Child Page 2",
      "url": "#"
    }
  ],
  "sidebar": true,
  "isLandingPage": false,
  "post": {
    "title": "Interior Page"
  },
  "background": "dark"
}
  • Content:
    breakpoint = 1000px
    
    .basic-header
        background none
        fluid(padding-bottom, 40px, 80px)
        fluid(padding-top, 28px, 80px)
    
        &__wrapper
            position relative
            margin auto
    
  • URL: /components/raw/basic-header/basic-header.styl
  • Filesystem Path: patterns/partials/basic-header/basic-header.styl
  • Size: 190 Bytes

No notes defined.