unibz Pattern Library

Hero: Home 

<div id="Organism-hero--home" class="l-section u-cf">
    <div class="hero">
        <style>
            #BgImage-hero--home {
                background-image: url("../../assets/bridge-676-504.jpg");
            }
        </style>

        <div id="BgImage-hero--home" class="hero_image u-bg-theme">
            <span class="hero_caption">Lorem ipsum</span>
        </div>

        <h1 class="hero_title u-sr-only">Lorem ipsum</h1>

        <div class="l-containerSmall">
            <div class="typography hero_introLarge">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>
            </div>
        </div>
    </div>
</div>
 
<div id="Organism-{{ _self.handle }}" class="l-section u-cf">
  <div class="hero">
    <style>
      #BgImage-{{ _self.handle }} {background-image: url("{{ path image }}");}
    </style>

    <div id="BgImage-{{ _self.handle }}" class="hero_image u-bg-theme">
      <span class="hero_caption">{{label}}</span>
    </div>

    <h1 class="hero_title u-sr-only">{{label}}</h1>

    <div class="l-containerSmall">
      <div class="typography hero_introLarge">
        {{{htmlText}}}
      </div>
    </div>
  </div>
</div>
 
{
  "label": "Lorem ipsum",
  "labelLong": "Lorem ipsum dolor sit amet",
  "htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
  "htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
  "htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
  "url": "#",
  "videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
  "image": "/assets/bridge-676-504.jpg"
}

Background images should be handled by the user, this will differ depending on the system where the css is used.

Keep in mind that, in an ideal case, images should be optimised for different screen sizes via media-queries. Example https://www.unibz.it/ (see the source code).