Digital pattern library

Showcase banner

This pattern is for showcasing informative headlines, statistics, and other positive content with a full width background. A navbox is included to act as a reference link for further reading.

Rules for showcase banners

Navboxes must be included on all banners.
Only the colours from the background colour groups shown in the options can be used.
Colours from different background colour groups must not be combined when using sequential banners.
Background colours must be in numerical order when using sequential banners.
For rules on appropriate use of navboxes, please see the navbox pattern page.
The headline character count must not exceed 100 characters.
The paragraph character count must not exceed 300 characters.

CSS classes for approved background colour groups

Dark green

sta-dkgreen-1
sta-dkgreen-2
sta-dkgreen-3

Orange

sta-orange-1
sta-orange-2
sta-orange-3

Purple

sta-purple-1
sta-purple-2
sta-purple-3

One panel

A single instance of the banner.

Example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cium.

Lorem ipsum dolor sit amet

Code



	
		
			
				Lorem ipsum dolor sit amet
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cium.
			
			
				
				
				
				
				
				    
				        
				            
				                
				            
				            
				                Lorem ipsum dolor sit amet

Two panels

Example

Lorem ipsum dolor sit amet

Code



	
		
			
				Lorem ipsum dolor sit amet
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cium.
			
			
				
				
				
				
				
				    
				        
				            
				                
				            
				            
				                Lorem ipsum dolor sit amet
				            
				        
				    
				
				
				
			
		
	


	
		
			
				Lorem ipsum dolor sit amet
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cium.
			
			
				
				
				
				
				
				    
				        
				            
				                
				            
				            
				                Lorem ipsum dolor sit amet

Three panels

Example

Lorem ipsum dolor sit amet

Code



	
		
			
				Lorem ipsum dolor sit amet
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cium.
			
			
				
				
				
				
				
				    
				        
				            
				                
				            
				            
				                Lorem ipsum dolor sit amet
				            
				        
				    
				
				
				
			
		
	


	
		
			
				Lorem ipsum dolor sit amet
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cium.
			
			
				
				
				
				
				
				    
				        
				            
				                
				            
				            
				                Lorem ipsum dolor sit amet
				            
				        
				    
				
				
				
			
		
	


	
		
			
				Lorem ipsum dolor sit amet
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cium.
			
			
				
				
				
				
				
				    
				        
				            
				                
				            
				            
				                Lorem ipsum dolor sit amet