Heading with section

This pattern is for displaying a prominent heading alongside content, on a full width page.

Rules for heading with section

  • Subheadings within the section must be at a lower level than that section's main heading.
  • Multiple heading with section blocks can be grouped together.
  • If grouped together all main headings must use the same heading level.
  • Content for a section may be displayed in one or two columns.
  • Content for a section can include the following elements:
    • text and sub-headings
    • accordions
    • videos
    • tables
    • images.

To discuss using this pattern please contact the digital communications team - digitalcommunications@st-andrews.ac.uk

Options available

Single section

A simple example with heading and one column of text.

Example

This is the topic heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tellus leo, pharetra et quam et, finibus mattis eros. Aliquam lorem sapien, placerat sit amet pharetra quis, lobortis sit amet mi. Nulla a risus commodo, fermentum sem ut, tempus ipsum. Sed eu sem varius, gravida nunc eget, aliquet metus. Etiam eu justo convallis magna tincidunt commodo id id elit.

Pellentesque non blandit ipsum. Mauris semper, diam et accumsan elementum, dolor ligula suscipit ex, aliquet congue justo sem in lorem. Fusce eu sem lacus. Donec sapien diam, tempor eu orci ut, mattis interdum mi. Pellentesque vel tincidunt metus. Suspendisse a malesuada turpis. Nam et libero quis nibh lobortis suscipit. Etiam faucibus nunc id felis hendrerit, eget auctor nibh gravida. Integer convallis, urna eget tristique cursus, metus massa euismod massa, facilisis interdum enim ante ac dui. Suspendisse eu neque turpis. Donec sit amet egestas sem, non tincidunt elit.

Code 



    

        
This is the topic heading

    

    

    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tellus leo, pharetra et quam et, finibus mattis eros. Aliquam lorem sapien, placerat sit amet pharetra quis, lobortis sit amet mi. Nulla a risus commodo, fermentum sem ut, tempus ipsum. Sed eu sem varius, gravida nunc eget, aliquet metus. Etiam eu justo convallis magna tincidunt commodo id id elit.
Pellentesque non blandit ipsum. Mauris semper, diam et accumsan elementum, dolor ligula suscipit ex, aliquet congue justo sem in lorem. Fusce eu sem lacus. Donec sapien diam, tempor eu orci ut, mattis interdum mi. Pellentesque vel tincidunt metus. Suspendisse a malesuada turpis. Nam et libero quis nibh lobortis suscipit. Etiam faucibus nunc id felis hendrerit, eget auctor nibh gravida. Integer convallis, urna eget tristique cursus, metus massa euismod massa, facilisis interdum enim ante ac dui. Suspendisse eu neque turpis. Donec sit amet egestas sem, non tincidunt elit.

Multiple sections

A group of sections containing different types of content spanning one or two columns.

Example

This is the topic heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tellus leo, pharetra et quam et, finibus mattis eros. Aliquam lorem sapien, placerat sit amet pharetra quis, lobortis sit amet mi. Nulla a risus commodo, fermentum sem ut, tempus ipsum. Sed eu sem varius, gravida nunc eget, aliquet metus. Etiam eu justo convallis magna tincidunt commodo id id elit.

Pellentesque non blandit ipsum. Mauris semper, diam et accumsan elementum, dolor ligula suscipit ex, aliquet congue justo sem in lorem. Fusce eu sem lacus. Donec sapien diam, tempor eu orci ut, mattis interdum mi. Pellentesque vel tincidunt metus. Suspendisse a malesuada turpis. Nam et libero quis nibh lobortis suscipit. Etiam faucibus nunc id felis hendrerit, eget auctor nibh gravida. Integer convallis, urna eget tristique cursus, metus massa euismod massa, facilisis interdum enim ante ac dui. Suspendisse eu neque turpis. Donec sit amet egestas sem, non tincidunt elit.

Another topic

Sub heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tellus leo, pharetra et quam et, finibus mattis eros. Aliquam lorem sapien, placerat sit amet pharetra quis, lobortis sit amet mi.

Nulla a risus commodo, fermentum sem ut, tempus ipsum. Sed eu sem varius, gravida nunc eget, aliquet metus. Etiam eu justo convallis magna tincidunt commodo id id elit.

Sub heading

Fusce eu sem lacus. Donec sapien diam, tempor eu orci ut, mattis interdum mi. Pellentesque vel tincidunt metus. Suspendisse a malesuada turpis. Nam et libero quis nibh lobortis suscipit. Etiam faucibus nunc id felis hendrerit, eget auctor nibh gravida. Integer convallis, urna eget tristique cursus, metus massa euismod massa, facilisis interdum enim ante ac dui.

A third heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tellus leo, pharetra et quam et, finibus mattis eros. Aliquam lorem sapien, placerat sit amet pharetra quis, lobortis sit amet mi. Nulla a risus commodo, fermentum sem ut, tempus ipsum.

Code 



    

        
This is the topic heading

    

    

    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tellus leo, pharetra et quam et, finibus mattis eros. Aliquam lorem sapien, placerat sit amet pharetra quis, lobortis sit amet mi. Nulla a risus commodo, fermentum sem ut, tempus ipsum. Sed eu sem varius, gravida nunc eget, aliquet metus. Etiam eu justo convallis magna tincidunt commodo id id elit.
Pellentesque non blandit ipsum. Mauris semper, diam et accumsan elementum, dolor ligula suscipit ex, aliquet congue justo sem in lorem. Fusce eu sem lacus. Donec sapien diam, tempor eu orci ut, mattis interdum mi. Pellentesque vel tincidunt metus. Suspendisse a malesuada turpis. Nam et libero quis nibh lobortis suscipit. Etiam faucibus nunc id felis hendrerit, eget auctor nibh gravida. Integer convallis, urna eget tristique cursus, metus massa euismod massa, facilisis interdum enim ante ac dui. Suspendisse eu neque turpis. Donec sit amet egestas sem, non tincidunt elit.

    





    

        
Another topic

    

    

    
Sub heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tellus leo, pharetra et quam et, finibus mattis eros. Aliquam lorem sapien, placerat sit amet pharetra quis, lobortis sit amet mi.
Nulla a risus commodo, fermentum sem ut, tempus ipsum. Sed eu sem varius, gravida nunc eget, aliquet metus. Etiam eu justo convallis magna tincidunt commodo id id elit.
Sub heading
Fusce eu sem lacus. Donec sapien diam, tempor eu orci ut, mattis interdum mi. Pellentesque vel tincidunt metus. Suspendisse a malesuada turpis. Nam et libero quis nibh lobortis suscipit. Etiam faucibus nunc id felis hendrerit, eget auctor nibh gravida. Integer convallis, urna eget tristique cursus, metus massa euismod massa, facilisis interdum enim ante ac dui.

    





    

        
A third heading

    

    

    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tellus leo, pharetra et quam et, finibus mattis eros. Aliquam lorem sapien, placerat sit amet pharetra quis, lobortis sit amet mi. Nulla a risus commodo, fermentum sem ut, tempus ipsum.