### File

`projects/commons/src/lib/shared/modules/headers/components/header.component.ts`

### Metadata

selector | `b2c-header`
styleUrls | `./header.component.scss`
templateUrl | `./header.component.html`

    import { Component } from '@angular/core';

    @Component({
        selector: 'b2c-header',
        templateUrl: './header.component.html',
        styleUrls: [ './header.component.scss' ],
    })

    export class HeaderComponent {}

    <cmn-nav-bar color="is-black">
        <cmn-brand image="/assets/logo_riftgg.png"></cmn-brand>
        <div class="navbar-menu">
            <div class="navbar-start">
                <a class="navbar-item"
                   cmnBadge="Beta"
                   color="success">
                    Champions
                </a>

                <a class="navbar-item">
                    Support
                </a>
                <a class="navbar-item">
                    Blog
                </a>
                <a class="navbar-item">
                    Contact
                </a>
            </div>
            <div class="navbar-end">
                <div class="navbar-item">
                    <span>Proud sponsors of</span>
                    <img src="/assets/origenbcn_logo.png" alt="">
                </div>
            </div>
        </div>
    </cmn-nav-bar>

`./header.component.scss`

    :host {
        ::ng-deep {
            cmn-nav-bar {
                .navbar {
                    height: 70px;
                    z-index: 10;

                    .navbar-menu {
                        .navbar-start {
                            margin-left: 2em;

                            .navbar-item {
                                padding: 0 1.2em;
                                text-transform: uppercase;

                                &:first-child {
                                    margin-right: 2.4em;
                                    padding-right: 1.8em;
                                }

                                &:after {
                                    top: 25px;
                                    font-size: 10px;
                                    font-weight: 900;
                                    border-radius: 4px;
                                    border: 1px solid transparent;
                                    box-shadow: none;
                                }
                            }
                        }

                        .navbar-end {
                            span {
                                margin-right: .8em;
                            }
                        }
                    }
                }

                cmn-brand {
                    .navbar-brand {
                        height: 100%;

                        img {
                            max-height: 2.5em;
                        }
                    }
                }
            }
        }
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""