Adding a section heading

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
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
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 StyleIcon 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
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

How to add images and display them as a media gallery on your site.

an icon that represents a grid layout with photos

Related resources

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.

Support and feedback options for HarvardSites Drupal

Submit a ticket

If you encounter any issues or bugs with the HarvardSites Drupal platform, please submit a ticket through the HUIT Service Desk.

Share website feedback

If you have ideas for how to improve the HarvardSites User Guide website, please submit your ideas using our website feedback form.

Design System How-To Guides

Practical guides and how-tos for using HarvardSites features to build engaging, effective websites that support your department’s goals.

AI Support chatbot

Try our new AI-powered support chatbot to answer questions about the Drupal platform.