Free University of Bozen-Bolzano

Hero

This pattern contains: atoms-heading-5 atoms-heading-1

HTML

									
										<section class="hero" role="banner">
  <div class="hero_image" style="background-image:url(../../images/fpo_16x9.png)">
      <span class="hero_caption">Lorem ipsum dolor sit (37 characters)</span>
  </div>
    <div class="hero_text">
        <h5 class="hero_titleLabel">Lorem ipsum dolor sit (37 characters)</h5>        <h1 class="hero_title">Lorem ipsum dolor sit (37 characters)</h1>    </div>
</section>

Hero Small

This pattern contains: atoms-heading-5 atoms-heading-1

HTML

									
										<section class="hero-small" role="banner">
  <div class="hero-small_background"></div>
  <div class="hero_text">
      <h5 class="hero_titleLabel">Lorem ipsum dolor sit (37 characters)</h5>      <h1 class="hero_title">Lorem ipsum dolor sit (37 characters)</h1>  </div>
</section>

Hero Search

This pattern contains: atoms-heading-5 atoms-heading-1

HTML

									
										<section class="hero" role="banner">
  <div class="hero_image" style="background-image:url(../../images/fpo_16x9.png)">
      <input class="form_input hero_search" type="search" placeholder="Lorem">  </div>
    <div class="hero_text">
        <h5 class="hero_titleLabel">Lorem ipsum dolor sit (37 characters)</h5>        <h1 class="hero_title">Lorem ipsum dolor sit (37 characters)</h1>    </div>
</section>