Section Headers

Section headers help divide up your content and organize it so readers can quickly understand what your content is about and decide which areas (if any) they want to dig more into. Most people do this using different-sized header fonts, but you can make these dividers even more noticeable by stylizing them, creating almost a mini cover image for different sections of the piece.

Examples

Section header with a number

How to make section header with a number

Section header with a colored background

<div data-ce-tag="grid" class="stk-snippets-header-colored-bg stk-grid stk-layout__overhangs_both">
  <div data-ce-tag="grid-col" data-col-width="2" class="stk-grid-col stk-grid-col_empty" data-stk-css="" data-stk-css-m="">
    <p class="stk-reset ce-element--empty stk-element_no-text"></p>
  </div>
  <div data-ce-tag="grid-col" data-col-width="8" class="stk-grid-col valign-middle stk-grid-col_last stk-theme_00000__pad_ver_2">
    <p class="stk-reset stk-theme_00000__color_4507_custom_color_1 align-center stk-theme_00000__mb_3 stk-theme_00000__style_font_style-1490606809211">3</p>
    <h2 class="stk-reset stk-theme_00000__style_large_header align-center stk-theme_00000__color_4507_custom_color_1 stk-theme_00000__mb_05" data-stk-css="stkdsuFU"><span class="stk-reset">Solomon R. Guggenheim Museum</span></h2>
    <p class="stk-reset align-center stk-theme_00000__color_4507_custom_color_1"><span class="stk-reset">1071 Fifth Avenue at 89th Street, Manhattan, New York City</span></p>
  </div>
  <div data-col-width="2" class="stk-grid-col stk-grid-col_empty" data-ce-tag="grid-col">
    <p class="stk-reset ce-element--empty stk-element_no-text"></p>
  </div>
</div>

Section header with animated shapes on the background

<div data-ce-tag="container" data-container-name="Section header" class="stk-snippets-header-animated-bg stk-container">
  <div data-ce-tag="container" data-container-name="Content" class="stk-snippets-header-animated-bg__content stk-reset stk-container align-center stk-theme_00000__pad_ver_2">
    <p data-stk-css="stk6VqyI" class="stk-reset stk-theme_00000__style_font_style-1490606809211">3</p>
    <h2 class="stk-reset stk-theme_00000__style_large_header align-center" data-stk-css="stkgR-Ld">Solomon R. Guggenheim
      Museum</h2>
    <p class="stk-reset align-center" data-stk-css="stkKD_qc">1071 Fifth Avenue at 89th Street, Manhattan, New York City</p>
  </div>
  <div data-ce-tag="container" data-container-name="Animated objects" class="stk-snippets-header-animated-bg__animated stk-container">
    <img class="stk-mobile-hidden" src="data:image/svg+xml,%3Csvg%20height='400'%20viewBox='0%200%20400%20400'%20width='400'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cg%20fill='none'%3E%3Ccircle%20cx='200'%20cy='200'%20r='200'%20fill='%23fff5d3'/%3E%3C/g%3E%3C/svg%3E" alt="" data-anim="true" data-anim-m="true" data-anim-name="preset-zoomIn" data-anim-trigger="whenScrolling" data-anim-duration="1" data-anim-delay="0" data-anim-scroll-start="10" data-anim-scroll-finish="90">
    <img src="data:image/svg+xml,%3Csvg%20height='400'%20viewBox='0%200%20400%20400'%20width='400'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cg%20fill='none'%3E%3Ccircle%20cx='200'%20cy='200'%20r='200'%20fill='%23fff5d3'/%3E%3C/g%3E%3C/svg%3E" alt="" data-anim="true" data-anim-m="true" data-anim-name="preset-zoomIn" data-anim-trigger="whenScrolling" data-anim-duration="1" data-anim-delay="0" data-anim-scroll-start="10" data-anim-scroll-finish="90">
    <img class="stk-mobile-hidden" src="data:image/svg+xml,%3Csvg%20height='400'%20viewBox='0%200%20400%20400'%20width='400'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cg%20fill='none'%3E%3Ccircle%20cx='200'%20cy='200'%20r='200'%20fill='%23fff5d3'/%3E%3C/g%3E%3C/svg%3E" alt="" data-anim="true" data-anim-m="true" data-anim-name="preset-zoomIn" data-anim-trigger="whenScrolling" data-anim-duration="1" data-anim-delay="0" data-anim-scroll-start="10" data-anim-scroll-finish="90">
  </div>
</div>
<p class="stk-reset ce-element--empty stk-element_no-text"></p>


<style data-anim-name="preset-zoomIn" media="screen and (min-width: 768px)">
  .stk-post [data-anim-name="preset-zoomIn"]:not(#stk):not([data-anim="false"]) {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3)
  }
</style>
<style data-anim-name="preset-zoomIn" media="screen and (max-width: 767px)">
  .stk-post [data-anim-name="preset-zoomIn"]:not(#stk):not([data-anim-m]),
  .stk-post [data-anim-name="preset-zoomIn"]:not(#stk):not([data-anim-m="false"]) {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3)
  }
</style>
<script data-anim-name="preset-zoomIn" type="application/json">
  {
    "keyframes": [{
      "opacity": 0,
      "transform": "scale3d(0.3, 0.3, 0.3)",
      "offset": 0
    }, {
      "opacity": 0.6,
      "transform": "none",
      "offset": 0.6
    }, {
      "opacity": 1,
      "transform": "none",
      "offset": 1
    }],
    "options": {
      "id": "preset-zoomIn",
      "delay": 0,
      "duration": 1000
    }
  }
</script>

Content Experience Impact

According to Nielsen Norman Group, 79% of website visitors scan each new page to see what’s relevant to them, and one common scanning style—called the layer cake pattern—involves quickly scanning the page for the most important information. Well-designed and written headings help break up the text and highlight the most valuable information, making it easier for scanners to understand what your content is about and decide which sections they want to read more deeply, thereby improving content engagement and comprehension.

Dos

Don’ts

Learn More

Improving Content Comprehension With Layouts Setka

The Layer-Cake Pattern of Scanning Content on the Web Nielsen Norman Group

Extra Inspiration

Last updated

Was this helpful?