Heading with section

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

Rules for heading with section

• The heading for a section can be h2 or h3 level.
• Other headings within a section must be at a lower level than that section's main heading.
• Heading / 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 use of this pattern please contact the digital communications team - digitalcommunications@st-andrews.ac.uk

Options available

• Single section
• Multiple sections

---

Single section

A simple example with heading and one column of text.

Example

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

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.
    

    

        

            Accordion
        
    
    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.
Morbi pellentesque, mauris nec porta laoreet, neque magna tempor eros, eget suscipit tellus purus nec ligula. In accumsan turpis eu porttitor tempus. Praesent rutrum quam id felis consequat, et mattis elit laoreet. Nunc maximus, dui vitae tincidunt elementum, elit tortor mattis quam, ut sodales arcu lectus eu nisi. Phasellus tincidunt at risus nec fringilla. Nunc ultricies nisl sodales, vestibulum nunc in, vulputate nisl. Vestibulum lacinia auctor hendrerit. Sed in lectus dapibus, volutpat justo vel, pellentesque ipsum. Vivamus vitae metus euismod, vestibulum odio eu, elementum quam.