Horizontal Rule

How to add a Horizontal Rule

Step 1: Add and configure Horizontal Rule component

  1. Add a Horizontal Rule component (see Adding a component for instructions on how to add a component).
  2. Select the Block Settings tab.
  3. Select a weight from the Weight menu:
    1. Choose Thin for a 1 pixel rule.
    2. Choose Thick for a 2 pixel rule.
  4. Select a width from the Width menu:
    1. Choose Full for a horizontal rule that extends the full width of the region.
    2. Choose Short for a shorter horizontal rule displays centered within the region.
  5. Add an optional Page Anchor Link to allow for links to the Horizontal Rule component (see instructions under Linking to page content).
  6. Select the Color Settings tab.
  7. Select a color scheme from the Component Color Scheme menu and review the Component Color Scheme Preview to see the effect of changing the color settings.

Step 2: Save Horizontal Rule component

  1. Once you have finished configuring settings, choose Save to save the Horizontal Rule component.

What is a Horizontal Rule component?

A Horizontal Rule is a horizontal line that displays between elements.

Horizontal Rules can be used as a divider, to provide a break between sections and elements.

A Horizontal Rule is composed of a horizontal line with space above and below the line.

Screenshot of Hero pagination controls, Horizontal Rule component, and Button-Style Cards with callout numbers marking the rule, pagination controls, and button-style cards.
A Horizontal Rule component is composed of horizontal line (1) and is helpful for separating content and components, such as these Hero pagination controls (2) and set of Button-Style Cards (3) (see the example Horizontal Rule component on the Drupal Demo Site).

 


Learn more about Horizontal Rules

Examples

Demo Site

See an example of a Horizontal Rule component on the homepage of the Department of Rocket Science demo site.

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.