Pattern Libraries

Header Carousel

A website header sits at the top of the webpages and a good header can influence how easy it is to navigate, establish your brand and creates a consistent browsing experience throughout a website. A header can be a static heaeder or an ineteractive header which are most commonly made using image carousels which are used to display more than one image within a certain element or page.

Example

HTML

<div class="header"> <div class="navbar"> <a href="#">Homepage</a> <a href="#">Products</a> <a href="#">About Us</a> <a href="#">Contact Us</a> </div> <h5>Header</h5> <p>Example of header</p> <p>First visual the user see's when visiting a website</p> </div>

CSS

.header{ background: linear-gradient(to top, white, #33cccc); } h5 { text-align: center; font-size: xx-large; } p { text-align: center; }