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. It must only be used on the subject pages to clearly separate the different sections.

Rules for the section header

• Must only be used on subject pages.
• Must only be used with a full-width background image.
• Must only contain one line of text.
• Background image must be 1700 × 300 pixels

Options available

• Dark grey text on light background
• White text on dark background

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 //-->