Jint - Focus Component

The Focus component is a feature component for your SharePoint pages: an announcement, a key link, an invitation to an event. You choose a layout, define a background (color, image, or video), and then layer up to four content elements on top.

This article describes use cases for the WebPart component, how to get started with it, its complete configuration, and best practices for achieving a readable display on all screens.

📋 Table of contents

1. Component overview
2. Add the component to your page
3. Choose your layout
4. Configure the component
5. Enter and format your content on the page
6. Best practices
7. What has changed from the previous version of Focus

1. Component overview

Focus lets you highlight information and direct your users to the right destination within a carefully designed layout. The WebPart component consists of a background, an Overlay that preserves the readability of the text placed on top of it, and four content elements: a Tag, a Headline, a Description, and a call to action.

Use cases

• Highlight a major piece of news from your organization.
• Share an important announcement on your home page.
• Invite your colleagues to an event.
• Create a navigation banner to a key application or site.
• Enhance a page's design with a background image or video.

Two places to configure your Focus

This is the most important point to remember before you begin, because the settings are split between two areas:

• The configuration panel controls the structure and rules: layout, height, background, overlay, frame appearance, displayed elements, call-to-action destination, and display scheduling.
• The page itself controls the content and its formatting. Click an element directly in the component to enter its text and open a floating toolbar: font, size, color, styles, and the appearance of the badge or button.

💡 If you're looking for the color of your title or the size of your text in the configuration panel, you won't find them there: these settings are configured on the page. See section 5.

2. Add the component to your page

1. Open SharePoint page editing mode by clicking Edit in the upper-right corner.
2. At the desired location, click the “+” button to open the component catalog.
3. Search or browse the catalog to select Jint - Focus in the “Text, media, and content” category.
4. The component is added at the desired location with its default values.

A newly inserted Focus displays a default image, a fully opaque gray overlay, and the four content elements with their placeholder text. You can therefore see and interact with it immediately, even before choosing an image.

3. Choose your layout

The layout is the component's defining choice: it determines the relationship between the media and the content. It is configured in the Design tab under Style. Three options are available, each illustrated by an icon.

Basic

The media fills the entire component, and the content is placed in a box over it. This is the default and most versatile layout: it lets the image breathe while keeping the text in a clearly defined block.

It has one additional setting of its own: Fit overlay to content, enabled by default. The overlay then fits the content block. Disable it to have the overlay cover the entire component.

Full

The media fills the entire component, the overlay covers the entire surface, and the content is displayed in a single column. This is best suited for a full-width banner with a short message, where the text must remain readable across the entire image.

Split

The media occupies one side of the component and the content occupies the other, according to a ratio you define. This is best suited when the image and text are equally important, or when your message needs more space than a box over an image allows.

Four additional settings appear when you select Split in the Design tab:

The Split ratio applies only while the image and content are side by side. When the component becomes too narrow and the two areas stack, the ratio has no effect. The margin, corner radius, and reversal apply in both cases.

💡 A Margin around image greater than 0 reveals the overlay color around the image. Combined with an Image corner radius, it creates a card-like appearance that clearly separates the visual.

⚠ Changing the layout does not cause you to lose anything. The canvas updates immediately and all your settings are preserved, including the overlay color and opacity. You can therefore try all three before making a decision.

4. Configure the component

The configuration panel consists of three tabs: Design, Content, and Display.

4.1 Design tab

Content alignment

The Stretch option makes the content block occupy the full available height. Alignment applies to the content block as a whole in all three layouts: the elements are not aligned individually relative to one another.

Height

Set the component Height using the slider or input field, in 10 px increments, up to a maximum of 800 px. The default value is 250 px. The 800 px limit is a SharePoint constraint: it applies to the rendered output, not just to the input.

⚠ The height you define is a minimum height, not a fixed height. If your content needs more space than the entered value, the component expands to accommodate it, and the Height field is automatically rewritten to the actual height occupied. The panel and the page therefore never contradict each other. However, a height greater than what the content needs is preserved as entered: this is the way to give your component more visual impact.

Background

First choose the background Type: Color, Image (default), or Video.

Alternative text is optional and never blocks publication of your page. Enter it whenever your image conveys information useful for understanding the message.

Until you select a file, an image supplied with the component is displayed in both read and edit modes: you never get an empty frame. It is treated as decorative. Deleting your image restores this default image.

The file selectors show the recommended formats:

• Images: JPG, PNG, or WebP, at least 1920 × 1080 px, less than 1 MB.
• Videos: MP4 (H.264), 1080p, 10 to 15 seconds in a loop, less than 5 MB (15 MB maximum).

Video playback cannot be configured. The video starts automatically, without sound and in a loop, regardless of the layout. It pauses when it leaves the screen and resumes when it returns. A Pause / Play button appears on hover or when tabbing with the keyboard. A visitor whose system requests reduced motion sees a still image without automatic playback.

⚠ A video of 5 MB or more triggers the warning “This video may slow down page loading.” A video larger than 15 MB is rejected: “Videos larger than 15 MB are not accepted.”

The focal point defines the area of the media to keep visible regardless of the crop. Click Edit focal point to open the dedicated window: drag the target to the area to preserve, then click Apply. Two previews accompany you while moving it:

• Desktop: the crop at the dimensions the component actually occupies on your page, measured live. It therefore follows a section resize or a height change.
• Mobile: the crop that the same component would produce at a narrow width.

Without clicking Apply, your setting is discarded. Replacing or deleting the media resets the focal point to the center.

Overlay

The Overlay is the veil between the background and the content. It is what makes your text readable over busy media.

⚠ The overlay is fully opaque by default. A newly inserted Focus therefore completely hides its background image and looks like a solid color. To let your media show through, lower the Opacity yourself.

The color and opacity you define are preserved from one layout to another. Only the role of the overlay changes on screen:

• Basic: a panel behind the content, sized to it or covering the entire surface according to Fit overlay to content.
• Full: a veil over the entire component.
• Split: the background of the content column, as well as the border revealed around the image when you have defined a margin.

Appearance

Each setting combines a toggle with a group of buttons: there is no “None” option, because the disabled toggle serves that purpose. Values are set component by component, without inheriting from your site's theme.

4.2 Content tab

Accessibility score

A readability indicator calculated live between the color of your Headline and what is actually behind it, combining the background, overlay, and layout.

The indicator applies only to the Headline. The Description, Tag, and button label are not evaluated. The section disappears when the Headline is hidden or empty.

On an image or video without an opaque overlay, contrast cannot be measured: the section indicates this instead of displaying a misleading score, with the message “On a background image or video, contrast cannot be checked without an overlay. Enable an opaque overlay to evaluate readability.”

Displayed elements

Four toggles control whether each element is present in your component. All are enabled by default.

Disabling an element removes it from the page but preserves its text and formatting: enabling it again restores it exactly as it was. You can therefore temporarily hide an element without losing anything.

Call to action

These settings appear when Show call to action is enabled.

With Entire WebPart component, no button is displayed and the entire component surface becomes clickable. In edit mode, this surface remains transparent to editing: clicking text edits it normally without triggering the link.

The Panel width appears only if you have selected the Panel opening mode.

⚠ An invalid URL is rejected immediately with the message “Please enter a valid URL.”

4.3 Display tab

The Display tab lets you schedule a visibility window for your component.

The two boundaries are independent. With only a start, the component appears on the selected date and remains displayed. With only an end, it is displayed until that date.

There is no time zone selector. Both boundaries are saved as absolute points in time: all your visitors switch at the same actual moment, wherever they are. The panel displays the dates in your own time zone, inferred from your SharePoint settings.

⚠ An end date earlier than or equal to the start date displays the error “The end date must be later than the start date.” Your values are preserved and scheduling is suspended: the component remains visible. An input error never silently hides your content.

As an editor, you always see and edit your component in edit mode, including during periods when it is hidden from visitors.

5. Enter and format your content on the page

Everything related to an element's appearance beyond whether it is displayed is configured directly on the page, not in the configuration panel. Click the Tag, Headline, Description, or button label: a floating toolbar specific to that element opens.

This placeholder text guides you during editing: it is never saved or displayed to your visitors.

Two formatting behaviors

• The Headline and Description are text: formatting applies to the selection, or to the entire field if nothing is selected.
• The Tag and button label are blocks: formatting always applies to the entire label, whether or not you have selected text.

The icon

The Tag and button each have a single icon setting: none, left, right, or icon only. This setting is independent of the selected style. Icon-only mode preserves your label text; it simply stops displaying it.

How overly long text behaves

• The Headline and Description wrap onto as many lines as necessary.
• The Tag and button label are truncated with ellipses and aligned left. A long label therefore never widens the badge or causes the button to overflow: use short labels.

By default, the text uses the font configured on your site unless you define a font for the element.

6. Best practices

Ensure your text is readable

The Overlay and Accessibility Score work together. On a background image or video, increase the overlay opacity until the Accessibility Score displays Good or Excellent. If you lower it too much, the indicator warns you that it can no longer measure contrast.

Remember that the score evaluates only the Headline. Visually check the readability of your Description, Tag, and button, especially if you have given them custom colors.

Keep your media file sizes reasonable

Follow the recommendations shown in the selectors: less than 1 MB for an image and less than 5 MB for a video. A large media file delays Focus rendering for all your users.

Always set the focal point

As soon as you select an image or video, open Edit focal point. The component is cropped differently depending on its width and height: without adjustment, the important area of your visual (a face, logo, or product) may be cropped out. The Desktop and Mobile previews show you the result before you apply it.

Check the mobile display

When the component becomes too narrow, the Split layout stacks into a single column, with the image above the content and the image limited to 150 px in height. The threshold is measured against the component's own width, not the screen width: a Focus placed in a narrow column can therefore stack on a desktop screen. The text then wraps instead of being truncated, and the background preserves its focal point.

There is no mobile editor: configure your Focus from a desktop computer.

Size your component

Start by entering your content, then adjust the Height. If your content exceeds the entered value, the component expands and the field updates automatically: there is no need to try to force a lower value.

In edit mode only

An image or video you selected that fails to load is indicated to you in edit mode without breaking the layout. Your visitors do not see this indication.

7. What has changed from the previous version of Focus

What’s new:

• Video integration in the background.
• Ability to schedule how long the Focus is displayed.
• Responsive display on mobile devices.
• A simpler, more intuitive configuration interface.

If you are familiar with the previous version of the component, three habits need to be adjusted:

• There is no container title. The title of your component is the Headline, which is a content element in its own right and is entered directly on the page.
• There is no inner margin setting. The component always occupies the full available width, and each layout applies its own spacing.
• Text formatting is no longer in the configuration panel. Font, size, color, and styles are edited on the page using the floating toolbar. See section 5.

Can't find the answer to your question? Contact Jint Support.