Mobile Insurance Policy Header Component

This component is composed of a FlexCard and the LWC compiled from the FlexCard:

• FlexCard: insHeaderPolicyMobile_nds

• LWC: cfInsHeaderPolicyMobile_nds

• Label: Insurance Header Policy Mobile Newport

This component is designed for mobile. Looking for the Insurance Policy Header component designed for desktop? Read Insurance Policy Header Component.

This component is styled with the Newport Design System.

Here's what the Mobile Insurance Policy Header component looks like when it's rendered in the Policyholder site:

The parts of this component are:

1. A link that returns the user to the Home page

2. Policy name

3. Policy number

4. Background image

5. Manage Policy actions in a child FlexCard

   Child Flexcard: insManagePolicyMobile_nds

FlexCard Structure

This FlexCard contains lots of elements, including:

• An active state element (labeled Policy Header Desktop)

  

  Note

  You can update the background image in the style panel for the active state.

  The Background Image input is a relative path to reference the image in the InsNewportPortalImages static resource. You can change this image path to any accessible image.

• Field elements with output selected from available fields returned from the data source

• An action element with a link to return the user to the Home page

• Child FlexCard: insManagePolicyMobile_nds

You can add, remove, and change any of these elements based on what you want your users to see. To learn how see Add Elements to a FlexCard. Other good topics to read to learn about how this FlexCard works include FlexCards Display Elements Reference, FlexCards Menu Properties, and FlexCards Action Properties.

Many of the elements of this card contain Custom CSS styles. You can make changes to these styles to create a different look and feel. To learn how to work with Custom CSS in FlexCards, see Apply Custom CSS to a FlexCard Element .

Data Source Called by this Component

The Mobile Insurance Policy Header component uses the InsGetPolicyDetails Omnistudio Data Mapper.

This DataRaptor extracts information about the user's policy. Fields in the FlexCard reflect the information gathered by the DataRaptor.

Customize this Component

To learn about how to customize this kind of component, see the Digital Experience Site Component Customization Overview