#Hero Header

A simple Hero Header without using the CSS background-image property

This is a Hero Header

Lorem ipsum dolor sit amet, consectetur.

Take me there...

<div class="be-hero">
      <img src="/images/rectangular-img-2.svg" alt="image">
      <div class="be-hero-text"><h1>This is a Hero Header</h1>
        <p>Lorem ipsum dolor sit amet, consectetur.</p>
        <button class="be-btn be-btn-ghost">Take me there...</button>
      </div>
</div>

Overriding

You can modify the height of the content using the be-hero-text class with the --top variable. The default value is 15vmin.

      <div class="be-hero-text" style="--top: 20vmin"><h1>This is a Hero Header</h1>

You can also change the height of the hero image through the be-hero class and the --height variable. The default values are min (65vh, 600px).

<div class="be-hero" style="--height: min(90vh, 300px)">

Finally you can also change the size of the heading H1 also using the be-hero class and the --font-size variable. Defaul value is 8vh.

<div class="be-hero" style="--font-size: 12vh">

Call-to-action Hero

You can include columns, images and other elements within the be-hero-text class.

This is the text heading

Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt
sed do eiusmod sed ut
labore et dolore magna aliqua

Ghost Button

<div class="be-hero">
      <img src="image.svg" alt="image">
            <div class="be-hero-text">
            <h1>This is the text heading</h1>
                <div class="be-column-container">
                    <div class="be-col-4">
                        <img src="image.svg" alt="image">
                    </div>
                    <div class="be-col-4">
                        <p>Lorem ipsum dolor sit amet...</p>
                        <button class="be-btn be-btn-ghost">Ghost Button</button>
                    </div>
                </div>
            </div>
</div>