University of St Andrews

Section header

The section header pattern contains the name of a section with either a full-width dark or light colour background image. Only for use on the subject pages to clearly delineate the different sections.

• For subject pages only
• Only with a full-width background image
• One line of text
• Image needs to be 1700 × 300 pixels

Dark grey text on light background

Add a section-header--bg-lighten class.

<!-- Begin pattern: section-header //-->
<section class="section-header section-header--bg-lighten" style="background-image: url(../../assets/docs/images/section-header/bg-section-header-1700x300.jpg);">
    <div class="container">
    	<div class="row">
    		<div class="section-header__wrapper">
		        <div class="section-header__content">
		            <h2>Lorem ipsum dolor</h2>
		        </div>
    		</div>
		</div>
	</div>
</section>
<!-- End pattern: section-header //-->

White text on dark background

Add section-header--inverse long-form--bg-darken classes.

<!-- Begin pattern: section-header //-->
<section class="section-header section-header--inverse long-form--bg-darken" style="background-image: url(../../assets/docs/images/section-header/bg-section-header-1700x300.jpg);">
    <div class="container">
    	<div class="row">
    		<div class="section-header__wrapper">
		        <div class="section-header__content">
		            <h2>Lorem ipsum dolor</h2>
		        </div>
    		</div>
		</div>
	</div>
</section>
<!-- End pattern: section-header //-->