The Separator web part draws a horizontal line on your SharePoint pages to structure their content and name your sections. The line uses your site's main color, or is filled with a color or an image of your choice, and can carry a text.

This article describes the web part's use cases, how to get started, its settings and the best practices to follow.

📋 Contents

1. About the web part
2. Add the web part to your page
3. Configure the web part
4. Enter and format the text on the page
5. Best practices
6. What changes from the previous version

1. About the web part

The Separator is made of two elements: a Line, whose thickness, length, alignment and fill you set, and an optional Text, which cuts the line, sits above it or fits inside it.

Use cases

• Visually separate two blocks of content on a page.
• Name a page section with a title built into the line.
• Echo your intranet's brand with a line in your site colors, or filled with an image.

2. Add the web part to your page

1. Open the SharePoint page in edit mode by clicking Edit at the top right.
2. Where you want the web part, click the "+" button to open the web part catalog.
3. Search or scroll the catalog to select Jint - Separator, in the "Text, media, and content" category.
4. The web part is added where you want it, with its default values.

A newly inserted Separator shows a thin, full-width line in your site's main color, cut in the middle by a placeholder text "Separator". This placeholder only shows in edit mode: as long as you haven't typed anything, your visitors see the line alone.

3. Configure the web part

The configuration pane has three tabs: Design, Content and Visibility.

3.1 Design tab

Line

• Length: set it with the slider, or type a percentage in the "%" field, then leave the field to apply it. The line takes up that percentage of the web part's width.
• Alignment: only appears when the length is below 100%. A full-width line is always centered.
• Color fill: by default, the line takes your site theme's main color. Pick another one from the palette, or enter a custom code.
• Image fill: the line is filled with an image, a default one until you choose your own. Click Choose an image to select a file in SharePoint, then Focal point to place the target on the area of the image to keep visible. Below the image, the Accessibility section offers Mark as decorative, on by default: screen readers then ignore the image. Turn it off to enter an Alternative text that describes the image. An alternative text left empty makes the image be treated as decorative again. If you change the image, both settings keep their value.

⚠ The length never goes below the width of the longest word in your text. If your setting is shorter, the line shows at that minimum length. Without text, or when the text is hidden, the minimum length is 2%.

💡 For an image, prefer a JPG, PNG or WebP file, at least 1920 × 1080 px and under 1 MB. If the image is deleted or moved, or if a visitor isn't allowed to see it, the line shows a white background instead. In the pane, the message "Image not found: it may have been deleted or moved. Choose another one." prompts you to choose another one.

3.2 Content tab

Text

• Between: the text cuts the line. With a centered line, it splits it into two equal segments. Aligned left, the line forms a single segment that the text closes on the right. Aligned right, the text opens the line, followed by a single segment.
• Above: the text sits above the line, which runs uninterrupted beneath it.
• Inside: the text fits inside the line, on its color or image background.

Turn Show the text off to display the line only.

⚠ Choosing Inside switches the line to Thick: the Thin option is disabled as long as the text stays inside. Hover over it to read "Unavailable while the text is inside the line". Under Text position, the pane reminds you with the message "The line switches to Thick."

💡 Switching to Above or Inside centers the text. You can then change its alignment from the toolbar, on the page.

Accessibility

When the text is Inside a color-filled line, the Accessibility section automatically measures its contrast with the line's color as soon as the pane opens, without clicking the text. It names it Separator text. It shows the Ratio and an Overall readability: Excellent, Good or Insufficient. If the contrast is insufficient, click Fix: each text color without enough contrast is replaced by the closest color in your palette that reaches sufficient contrast.

As long as you haven't entered any text, the section shows "Enter text on the page to check its contrast."

With text Between or Above, or an image-filled line, the section shows "Contrast can't be measured for this text." When the text is hidden, the Accessibility section disappears from the pane.

3.3 Visibility tab

Audience

Turn on Custom audience to reserve the web part for specific people or members of Microsoft 365 groups. Only the chosen visitors, or members of at least one chosen group, see it. For everyone else, it takes up no space on the page.

Display

Turn on Schedule visibility to limit display over time, with a Display start, a Display end, or both. Dates are entered in your time zone and shown to everyone in theirs.

⚠ A Display end earlier than or equal to the Display start shows as an error with the message "The end date must be later than the start date.": until it's corrected, the schedule doesn't limit display.

💡 In edit mode, you always see the web part, whatever its audience or schedule. A badge tells you so: "Audience", or the display dates ("From …", "Until …" or "start → end", without the year when it's the current one).

⚠ If you turn on Custom audience without choosing anyone, the section tells you so with the message "No one can see this web part: choose at least one person or group." If you turn on Schedule visibility without turning on a date, display isn't limited.

4. Enter and format the text on the page

The Separator's text is entered and formatted directly on the page, not in the configuration pane. Click the text: it becomes editable and a toolbar appears above it.

The toolbar sets the Text style (H1 to H4 or Body), the Font, the Font size, the Text color, bold, italic, underline and alignment. Click outside the text and the toolbar to confirm.

• The text can span several lines: press Enter to start a new line. A word too long for the available space is broken.
• Pasted text loses its original formatting.
• The text shows exactly as you typed it, with no automatic translation.
• In the Between position, the toolbar doesn't offer text alignment: the line's alignment places it.

5. Best practices

Keep the text short

A section title of a few words stays readable on every screen. A long word increases the line's minimum length, and a long text wraps onto several lines.

Check the contrast of inside text

With the Inside position on a color line, open the Content tab and check the Accessibility section, which measures the text automatically. Aim for at least Good.

Take care with the fill image

A line is a narrow strip: place the Focal point on the part of the image that must stay visible, and choose a visual without fine detail.

Stay consistent across pages

Use the same thickness, fill and text style for all the separators of a site.

6. What changes from the previous version

If you used the previous version of the Separator (see the article Separator component):

• The pane is organized into three tabs, Design, Content and Visibility, with the line in Design and the text in Content.
• The text is no longer limited to two lines.
• The Inside position automatically switches the line to Thick.
• The Accessibility section measures the contrast of text placed inside the line and can fix it in one click.
• The Visibility tab lets you reserve the web part for an audience and schedule its display.