Support jumbotron page header

[damithc]

Example: from the markdownguide

I wonder if we can provide support this kind of jumbotron to appear at the top of the page. The benefit is the site can be made to appear distinct simply by varying the background color. For project websites, the color can match the branding color of the project.

[Chng-Zhi-Xuan]

Implementation wise, it is quite simple with just a <div> and some custom CSS.

Not sure if it is worth building an additional component (that is very similar to our existing box component).

[damithc]

Not sure if it is worth building an additional component (that is very similar to our existing box component).

Hmm... doesn't the jumbotron (especially in this context) has different semantics? e.g., it should be edge-to-edge in the page but the text should be aligned to body text and it also affects the placement of components such as siteNav and pageNav.

[Chng-Zhi-Xuan]

Thanks for the clarification, since in the original screenshot it just looked like a stand-alone <div> with its background changed.

The implementation just changes slightly.

<div class="my-jumbotron"> <!-- Using `position: fixed`, similar to `Navbar` component` -->
  <div class="same-classes-used-in-content-wrapper">
    <h2>Overview</h2>
    <p>Lorem Ipsum Lorem Ipsum.</p>
  </div>
</div>  

Both site-nav and page-nav will offset themselves automatically (same behaviour as Navbar). The inner <div> with mirrored classes should ensure the text is properly aligned with the rest of the content.

We just have to pay attention to the z-index given to the jumbotron (less than Navbar and more than both site-nav and page-nav).

Another issue, should we restrict the number of jumbotrons in a page (to one)?

[damithc]

Another issue, should we restrict the number of jumbotrons in a page (to one)?

If we name the component something more specific to its usage e.g., PageLead, it makes sense to restrict one per page.