#  Horizontal Rule 

 



 ##  

  expand\_more  

 
  

 

## How to add a Horizontal Rule

### Step 1: Add and configure Horizontal Rule component

1. Add a Horizontal Rule component (see [Adding a component](/adding-component "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](/linking-page-anchor-links "Linking to on-page anchor links")).
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.](/sites/g/files/omnuum1651/files/styles/hwp_1_1__720x720_scale/public/2024-09/annotation_horizontal_rule.png?itok=z4x6T2c1) 

 

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](https://drupaldemo.harvardsites.harvard.edu/#example-horizontal-rule) on the Drupal Demo Site).

 

---

 

##  Learn more about Horizontal Rules 

 



 ### Examples

Demo Site

See an example of a Horizontal Rule component on the [homepage](https://drupaldemo.harvardsites.harvard.edu/#example-horizontal-rule) of the Department of Rocket Science demo site.



 

   ![](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2024-12/Firefly%20rocket%20in%20space%209486.jpg?itok=zBGEAUN2) 

 

 

 

 ### Accessibility

Digital Accessibility Website

Review guidance on [supporting scanning and understanding](https://accessibility.huit.harvard.edu/support-scanning-and-understanding) from the Harvard Digital Accessibility website.



 

   ![](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2024-12/thumb_das.png?itok=j55tHWpY) 

 

 

 

  

 

 

 

 



 

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