The Indicator component highlights a key figure and its description, on a color or an image, with an optional catchline. You type the figure and each text directly on the page.

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

📋 Contents

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

1. About the component

The Indicator has three parts, from top to bottom:

• a title, optional;
• the figure block: the figure in large type and its description, on the background you choose;
• the catchline: a title and a text, which you can hide.

Use cases

• Share a satisfaction rate or the result of an internal survey.
• Show headcount, or the number of sites or countries.
• Track progress on a company goal.
• Highlight a striking figure in a news post.

2. Add the component to your page

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

A newly inserted Indicator shows an example: the figure "95%", the description "This is the customer satisfaction rate for the whole department to date", and a catchline "Jint" / "Let's go further together". The figure block uses your SharePoint site's main color. The title is empty.

💡 These texts are visible to your visitors: replace them with your own content before publishing the page (see part 4).

3. Configure the component

The configuration panel has three tabs: Design, Content and Visibility. Each setting applies immediately on the page.

3.1 Design tab

Background

• Color: the figure block takes the chosen color. Texts without a color of their own placed on this background automatically switch to black or white, whichever contrasts best.
• Image: the figure block shows the chosen image, cropped around its Focal point. Alternative text appears when the image isn't marked as decorative.

⚠ The background colors the figure block only, never the title or the catchline.

Appearance

The Appearance section sets the component's border, shadow and corner radius.

By default, the component follows your site's Jint theme: the section shows "Appearance values come from the theme. The theme is set in Jint Portal." and its settings are disabled. Click Customize to change them. To go back to the theme, click Reset from theme.

3.2 Content tab

Title

The title is entered and formatted directly on the page (see part 4). It's empty by default: as long as you haven't entered anything, your visitors don't see it.

Accessibility

The Accessibility section measures the contrast between the figure and the block's background. You have nothing to select: it measures the figure as soon as the panel opens, and measures it again after each change.

It shows the name of the measured text, Figure, its contrast Ratio and its Overall readability:

• Excellent: the contrast reaches the AAA level.
• Good: the contrast reaches the AA level.
• Insufficient: the contrast doesn't reach the AA level.

When the section shows Insufficient, click Fix: each color of the figure below the AA level is replaced by the closest palette color that reaches it.

• As long as the figure is empty, the section shows "Enter a figure on the page to check its contrast."
• On an Image background, the section shows "Contrast can't be measured for this text.": check the readability by eye.

Catchline

Turn off Display catchline to show only the title and the figure block.

3.3 Visibility tab

Audience

Turn on Custom audience to restrict the component to people or to 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 the display in time, with a Display start, a Display end, or both. Each date appears when you turn its switch on: the start is set to the present moment, the end to 7 days later.

⚠ If you turn on Custom audience without choosing anyone, no one sees the component anymore. The section warns you: "No one can see this web part: choose at least one person or group."

⚠ If the display end comes before the start, the panel shows "The end date must be later than the start date." and the schedule doesn't limit the display until you fix it.

💡 In edit mode, you always see the component, whatever its audience or schedule. A badge tells you so: "Audience", or the display dates.

4. Enter and format the content on the page

The figure, its description, the title and the catchline are entered directly on the page, not in the configuration panel. Click a text: it becomes editable and a toolbar shows above it. Click outside the text and the toolbar to confirm.

The component's texts

• An empty text shows "Field value" as placeholder text, visible in edit mode only.
• 💡 If the figure and its description are empty, the block still shows to your visitors, with its background only.
• 💡 If the catchline's title and text are empty, your visitors don't see the catchline.

Format a text

The toolbar sets the Text style (H1 to H4 or Body), the Font, the Font size, the Text color, bold, italic, underline and alignment. If space runs short, some controls fold behind the More button.

• If you select part of the text, font, size, color, bold, italic and underline apply to the selection only. Without a selection, they apply to the whole text.
• The Reset formatting button restores the original style.

💡 As long as the component follows the Jint theme, the title's toolbar shows the theme banner instead. Click Customize to format the title.

5. Best practices

A short figure, with its unit

"87%", "1,500", "+12%": the figure reads at a glance. Keep the explanation for the description.

A one-sentence description

The description says what the figure measures, and as of when: "of employees recommend the company (2026 survey)".

Check the figure's readability

On a color, check the Accessibility section and aim for at least Good. On an image, choose a calm image, or set its Focal point so the figure stays readable.

Line up several indicators

To present several figures, place several indicators side by side in a multi-column section, with the same background.

6. What changes from the previous version

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

• The component is now called Jint - Indicator in the catalog, in the "Text, media, and content" category.
• Showing the catchline area is set with Display catchline, in the Content tab.
• The figure block's background color or image is set in the Background section, with a focal point and alternative text for the image.
• New: an optional component title.
• New: the Appearance section, linked to the Jint theme, for the border, shadow and corner radius.
• New: the Accessibility section checks the figure's contrast and fixes it in one click.
• Each text is formatted on the page with the text toolbar.
• The panel has three tabs, Design, Content and Visibility. The Visibility tab lets you restrict the component to an audience and schedule its display.