Skip to Main Content

Pelican Design System icon Pelican Design System Textbox Over Photo

Textbox Over Photo

Short text over over a photograph.

Edit on GitHub

On this page:

Best Practice

  • The large text should be succinct.
  • The smaller text can be longer, but try to keep it brief. Lengthy text will defeat the purpose of a Hero Block.
  • Don’t use more than the number of buttons shown in this Hero Block.
  • Do not use a random or decorative image.
  • Be sure to change the heading level as appropriate.

Usage

Big text.

This is smaller text which explains this block. This is smaller text which explains this block.

ButtonText 
<div class="hero-textbox-over-photo" 
  style="background-image:url('/img/photos/pexels-photo-275030.jpeg');">
  <div class="overlay"></div>
  <div class="hero-textbox">
    <h1 class="hero-big-text">Big text.</h1>
    <p class="hero-small-text">This is smaller text which explains this block. This is smaller text which explains this block.</p>
    <a href="#" class="btn btn-white">ButtonText</a>
  </div>
</div>
Previous
Page top