Component Library

Pageheader - image 

<div class="pageheader-image" style="background-image: url(../../dist/images/hero--mona-eendra-313518.jpg )">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-10 col-sm-offset-1">
                <div class="pageheader-image__inner">
                    <div class="pageheader-content">
                        <h1 class="heading-page heading-page--pageheader ">Novicell defaultpakke</h1>

                        <p class="paragraph paragraph--pageheader ">Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p>

                        <button type="button" class="button button--large">
    See more
</button>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="pageheader-image" style="background-image: url({{ path '/dist/images/hero--mona-eendra-313518.jpg' }} )">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-10 col-sm-offset-1">
                <div class="pageheader-image__inner">
                    {{ render '@pageheader-content' content }}
                </div>
            </div>
        </div>
    </div>
</div>
 
{
  "content": {
    "header": {
      "text": "Novicell defaultpakke"
    },
    "description": {
      "text": "Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Quisque velit nisi, pretium ut lacinia in, elementum id enim."
    },
    "button": {
      "text": "See more"
    }
  }
}
  • Content: 
    /**
 * Component: Pageheader-image
 */
:root {
    --hero-text-color: var(--color-white);
    --hero-background-color: var(--color-black);
    --hero-content-opacity: 20%;
}

.pageheader-image {
    color: var(--hero-text-color);
    padding-bottom: 60px;
    padding-top: 60px;
    position: relative;
    background-size: cover;

    @media (--viewport-md-min) {
        height: 500px;
    }

    @media (--viewport-lg-min) {
        height: 700px;
    }

    &:before {
        background-color: color-mod(
            var(--hero-background-color) alpha(var(--hero-content-opacity))
        );
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
    }

    &__inner {
        position: relative;

        @media (--viewport-md-min) {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
    }
}
  • URL: /components/raw/pageheader-image/pageheader-image.css
  • Filesystem Path: src/03-organisms/pageheaders/pageheader-image/pageheader-image.css
  • Size: 917 Bytes

There are no notes for this item.