Highlight Section

The Highlight Section component is used to visually group related content. It has Light and Dark theme options along with multiple background color options. The component can be used as a full width component or as an internal component that is placed within frame sets.

When to use

  • Use this component when there is a need to visually separate content to convey a clearer content structure.
  • Don’t use this component to create spacing without using content within it.

Component properties

Theme:
  • Dark
  • Light

Background Color:

All standard background colors in Sitecore are available for use.

Note: Unum and Colonial Life colors are always available on both properties. Make sure to choose the right brand color for the property you are working on. Also make sure to match the theme and background color appropriately.

Spacing:

The full width version and the internal component version both have the following options available for vertical spacing and vertical padding:

  • Extra Small – Mobile: 16px | Tablet: 24px | Desktop: 32px
  • Small – Mobile: 24px | Tablet: 40px | Desktop: 48px
  • Medium – Mobile: 32px | Tablet: 56px | Desktop: 64px
  • Large – Mobile: 40px | Tablet: 72px | Desktop: 88px
  • Extra Large – Desktop: 112px

Spacing

General rules:

The component has built in spacing via a 72px top and bottom padding. Internal components must respect this padding.

CSS rules have been setup on the component to force the first direct child of the component or the first direct children of the first direct frame used in the highlight component to respect this spacing by removing any top margin that may be applied.

The full width version is expected to sit flush with other full width components and itself when multiple components are stacked together.

This component also has CSS rules applied to maintain proper spacing between itself and any frame that is a direct sibling of the component. A 72px top margin is applied to the highlight component if directly proceeded by a frame or a 72px top margin is applied to a frame that directly follows the Highlight Section component.

Default light theme highlight example

Claim information

Filing online saves you time.

Help is on the way. Start filing your online claim now. To receive your money even faster, login to your account and enroll in direct deposit.

And if you need assistance, we're here! Simply call 1-800-325-4368, and one of our specialists will take care of you.

Dark theme highlight example

people talking around a laptop

How Unum Disability Insurance works

There are three types of Disability Insurance you can offer to provide support for your employees in a wide variety of circumstances. Coverage can be employer-paid, employee-paid or shared.

Through return-to-work benefits and programs, Unum also helps employees return to their jobs, saving you the cost and disruption of lost productivity — or hiring replacements.

Together, these plans offer comprehensive coverage to help your employees through a disability.

HSC full width with NCC and video

Claim information

Filing online saves you time.

Help is on the way. Start filing your online claim now. To receive your money even faster, login to your account and enroll in direct deposit.

And if you need assistance, we're here! Simply call 1-800-325-4368, and one of our specialists will take care of you.

NCC with small HSC

Leave of absence management

Managing your employees leave of absence is easier than ever.  Through the online portal, you are able to update employee leave status, make changes to the bill, and access important employee documentation.

Are your clients ready for the future of leave and absence management?

HSC color options

All Unum light and dark color palette options are now available options for use with the Highlight Section component. For the full list, please see the Colors page for details.