Header

Guidelines

To do

  • Need to discuss if we should design a header with the service name in it.
<header class="lbh-header">
    <div class="wrapper">
        <img src="../../../assets/img/logo.svg">
    </div>
</header>
  • Content:
    .lbh-header {
        background-color: var(--background-header);
        border-bottom: 4px solid var(--background-bar-second);
        position: relative;
        width: 100%;
        height: auto;
    }
    
    .lbh-header:before {
        content: "";
        background: var(--background-bar-first);
        bottom: 5px;
        display: block;
        height: 5px;
        left: 0;
        position: absolute;
        right: 0;
    }
    
    .lbh-header:after {
        content: "";
        background: var(--background-bar-third);
        bottom: -11px;
        display: block;
        height: 3px;
        left: 0;
        position: absolute;
        right: 0;
    }
    
    .lbh-header .wrapper {
        overflow: hidden;
        max-width: 1160px;
        margin: 0 auto;
        padding: 0 20px;
        width: 100%;
    }
    
    .lbh-header img {
        width: 70%;
        display: inline-block;
        padding: 2rem 0 2rem 1rem;
    }
    
    @media (min-width: 720px) {
        .lbh-header img {
            width: 30%;
        }
    }
  • URL: /components/raw/header/header.css
  • Filesystem Path: components/02-atoms/02-header/header.css
  • Size: 867 Bytes