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 
<!-- Begin pattern: heading section //-->
<section class="heading-section row">
    <div class="col-md-4">
        <h2 class="heading-section__heading">This is the topic heading</h2>
    </div>
    <div class="col-md-8">
    <p>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.</p><p>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.</p>
    </div>
</section>
<!-- End pattern: heading section //-->

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 
<!-- Begin pattern: heading section //-->
<section class="heading-section row">
    <div class="col-md-4">
        <h2 class="heading-section__heading">This is the topic heading</h2>
    </div>
    <div class="col-md-8">
    <p>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.</p><p>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.</p>
    </div>
</section>
<section class="heading-section row">
    <div class="col-md-4">
        <h2 class="heading-section__heading">Another topic</h2>
    </div>
    <div class="col-md-8">
    <div class="row"><div class="col-sm-6"><h3>Sub heading</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tellus leo, pharetra et quam et, finibus mattis eros. <strong>Aliquam lorem sapien</strong>, placerat sit amet pharetra quis, lobortis sit amet mi.</p><p>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.</p></div><div class="col-sm-6"><h3>Sub heading</h3><p>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.</p></div></div>
    </div>
</section>
<section class="heading-section row">
    <div class="col-md-4">
        <h2 class="heading-section__heading">A third heading</h2>
    </div>
    <div class="col-md-8">
    <p>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.</p>
    <div class="accordion-item">
    <div class="accordion-item__toggle">
        <h3 class="accordion-item__toggle-title">
            <button class="accordion-item__toggle-button" aria-expanded="false" aria-controls="accordion-item-1">Accordion</button>
        </h3>
    </div>
    <div class="accordion-item__content" id="accordion-item-1" aria-hidden="true"><div class="row"><div class="col-md-6"><p>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.</p></div><div class="col-md-6"><p>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.</p></div></div></div>
</div>
    </div>
</section>
<!-- End pattern: heading section //-->