OFRAG Frontend Components Library v0.0.0

Header: With Search Account And Cart Placeholder 

<div class="header--with-container">
    <div class="header__container">
        <div class="header__mobile-row--search">
            <div class="header__content-container">
                <div class="header__mobile-only">
                    <div class="header__hamburger">
                        <button class="hamburger hamburger--collapse" type="button" aria-label="Menü öffnen/schliessen" data-off-canvas-toggle>
                            <span class="hamburger-box">
                                <span class="hamburger-inner"></span>
                            </span>
                        </button>
                    </div>
                </div>
                <div class="header__desktop-only">
                    <a href="#" class="header__logo-link">
                        <img src="/images/common/logo.svg" alt="Brand" class="header__logo" />
                    </a>
                </div>
                <div class="header__search">

                    <ccx-header-search></ccx-header-search>
                </div>
                <div class="header__scanner-button">
                    <ccx-button-scanner></ccx-button-scanner>
                </div>
            </div>
        </div>
        <div class="header__mobile-row--account-and-cart">
            <div class="header__content-container">
                <div class="header__mobile-only">
                    <a href="#" class="header__logo-link">
                        <img src="/images/common/logo.svg" alt="Brand" class="header__logo" />
                    </a>
                </div>

                <ccx-header-account-and-cart></ccx-header-account-and-cart>
            </div>
        </div>
    </div>
    <div class="header__background"></div>
</div>

<ccx-instant-search></ccx-instant-search>
 
{% include '@SharedComponents/modules/page/components/header/header/header.twig' %}
 
{
  "labels": {
    "open": "Menü öffnen/schliessen"
  },
  "logo": {
    "alt": "Brand",
    "href": "#",
    "src": "/images/common/logo.svg"
  },
  "variant": "with-container"
}
  • Content: 
    import HeaderMediator, {name as title} from 'cando-cx-components-library/components/modules/page/components/header/header/header-mediator';

export default HeaderMediator;
export const name = title;
  • URL: /components/raw/header/header-mediator.js
  • Filesystem Path: src/components/modules/page/components/header/header/header-mediator.js
  • Size: 198 Bytes
  • Content: 
    import './header.scss';
  • URL: /components/raw/header/header.js
  • Filesystem Path: src/components/modules/page/components/header/header/header.js
  • Size: 23 Bytes
  • Content: 
    @import "~shared/base";
@import "~cando-cx-components-library/components/modules/page/components/header/header/header";
  • URL: /components/raw/header/header.scss
  • Filesystem Path: src/components/modules/page/components/header/header/header.scss
  • Size: 119 Bytes

Placeholder will be replaced when used in a decoupled application