Hero

¶Decorative hero (home, landing and business ecosystem page templates)

Open this Landing page hero in a new tab

HTML:

<div class="u-full-width hero">
	<div class="l-center">
		<div class="l-sidebar">
			<div>
				<div class="not-sidebar">
					<h1>Hero title</h1>
					<p class="lead">A very short introduction/summary of the page.</p>
				</div>
				<div class="sidebar">
					<img src="/dist/assets/svg/illustration-2.svg" alt />
				</div>
			</div>
		</div>
	</div>
</div>

¶Considerations

Note the use of the center layout and sidebar layout, and the pattern used for the decorative SVG image.

¶Listing page hero

On listing pages, the hero is used to hold any markup required for searching and filtering listing items. Add the modifier class .hero--listing.

<div class="u-full-width hero hero--listing">
    <div class="l-center">
        <h1>Posts</h1>
        <p class="lead">Search for posts, or browse posts by category or archive.</p>
        
        <!-- search and/or filter markup goes here -->
    </div>
</div>