#  Adding a section heading 

 



 ##  

  expand\_more  

 
  

 

## How to add a section heading to a component

The section heading is an optional section that appears on many components. Use this section to provide introductory content describing the component topic, and links to learn more about the topic elsewhere on your site.

   ![Screenshot of news list component heading with heading, description, and link to see all news](/sites/g/files/omnuum1651/files/styles/hwp_1_1__720x720_scale/public/2024-05/Section%20heading.png?itok=G1Kil5AO) 

 

Many components have an optional section for adding a heading, description, and links to other pages with more details.### Step 1: Add section heading content

1. From the component dialog, select the **Section Heading** or **Content** tab.
2. Fill out the following information (note that different components have different fields):
    1. **Eyebrow**: Keywords that display above a heading. This could be the topic category.
    2. **Heading:** A heading that captures the topic of the component. The heading should be attention-grabbing and descriptive.
    3. **Introduction:** Introductory text that further describes the topic.This should only be a few sentences and should help site visitors understand what the component contains.
3. Set the heading level using the **Heading Level** menu. We recommend using H2 in most cases to introduce a new section.

   ![screenshot of section heading panel showing heading, heading level, and introduction inputs](/sites/g/files/omnuum1651/files/styles/hwp_1_1__720x720_scale/public/2024-05/Component%20section%20heading_0.png?itok=7yBBBTS8) 

 

Enter a heading, set the correct heading level, and describe the content featured in the component.### Step 2: Add Call to Action links

1. If your component requires a call to action link, click on the **Add Call to Action Link** button.
2. Fill out the following information:
    1. **Link text:** Short descriptive text. This should be self explanatory to help site visitors know where the link will take them.
    2. **URL:** The link destination. This can be either the title of other site content or an external URL.
3. Set the link style using the **Link Style** menu. The options are **Button Style**, **Icon Style**, or **Text Style**.
4. Choose **Save** to save the CTA. You can add another CTA by clicking the plus sign next to the first CTA.

   ![Screenshot of CTA link settings showing link text and URL inputs and link style options menu and previews](/sites/g/files/omnuum1651/files/styles/hwp_1_1__720x720_scale/public/2024-05/CTA%20link.png?itok=dOB7yJSe) 

 

Enter descriptive text and the link page name or URL. Consult the preview to decide which style to choose from the link style menu.

 

---

 

##  Related how-tos 

 



  [### Media Gallery

 ](/media-gallery)How to add images and display them as a media gallery on your site.



 

 

   ![an icon that represents a grid layout with photos](/sites/g/files/omnuum1651/files/styles/hwp_scale_small/public/2025-12/media-gallery-thumbnail.png?itok=8ALT2Eiw) 

 



 

 

   [### Adding a component

 ](/adding-component)How to add a component to add content to your site.



 

 

   ![Bicycle and cropped view of the rider casting a long shadow on the sidewalk](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2024-03/thumb_add_component.jpg?itok=Y-phSwmp) 

 



 

 

  

 

 

 

 

---

 

##  Related resources 

 



  [### Pages vs Lists vs Resources vs News in HarvardSites (VIDEO)

 ](/resource/pages-vs-lists-vs-resources-vs-news-harvardsites-video)Learn when to use pages, lists, resources, or news to display content on your site.



 

 

   ![File folders with papers](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2026-05/pexels-nada-mohamed-3446789-29234185.jpg?itok=sE0QoWAv) 

 



 

 

   [### Hero component: Styles, sizes, and best practices (VIDEO)

 ](/resource/hero-component-styles-sizes-and-best-practices-video)Understanding the options available in the Hero component and best practices.



 

 

   ![a tablet computer showing a website](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2026-05/pexels-pixabay-39559.jpg?itok=-VFJXOhB) 

 



 

 

   [### How to navigate and edit nested content (VIDEO)

 ](/resource/how-navigate-and-edit-nested-content-video)How-to video on understanding how content and components are nested on HarvardSites Drupal



 

 

   ![Black squares within bigger squares](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2026-03/pexels-pppsdavid-6727764.jpg?itok=mxCK2clU) 

 



 

 

   [### Component Controls

 ](/resource/component-controls)How to work with component controls to edit, duplicate, reorder, and remove components from a layout.



 

 

   ![Person working on a crew boat inside a boat house, framed by rows of crew boats.](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2024-10/thumb_component_controls.jpg?itok=RoQZmMll) 

 



 

 

  

 

 

 

 

 



 

 See also:- [ How-tos ](/content-structure/how-tos)
- [ Components ](/topics/components)