Component Guide

Intro to Components

Components allow you to maintain a consistent, efficient, and scalable website by creating customizable blocks from elements and child elements. Reuse those blocks across your site, and modify them in a single place to avoid individually revising each recurring layout. Throughout this build components are used for Navbars, Footers, and specific sections or layouts like a CTA section. This page should get you up to speed on how to edit components and also includes a list of the components used in this site below. For a full guide on using components check out the Webflow University page.

How to Edit a Component

To make the same changes across all instances of a component, you’ll need to edit the main component. You can edit the main component on any component instance by:

Double-clicking the component instance
Right-clicking the instance and choosing Edit component
Selecting the instance and clicking the “ pencil” icon in the label
Selecting the instance and clicking the Edit component button in the Style, Element settings, or Interactions panels
Selecting the instance and using the keyboard shortcut Enter

When you do this all other elements on the page will get a dark overlay to show that you are updating the main component and that any changes to it will affect all other instances of that component.

Understanding component properties

Component properties let you define specific elements within a component that can be modified with unique values on a component instance. For example, you could make a CTA section that has an editable title and button. In more advanced use cases, component properties can also show and hide specific elements, or even change visual styles (like button style, spacing amounts, or section color).

To edit a content property (eg a heading or image) you should:

Locate the component instance that contains the element whose values you want to modify
Select the element on the canvas
Go to Element settings panel > Component properties
Modify the element’s property values (e.g., update the text, replace an image, set the visibility, etc.)

Components with style properties

Some components on this site use text properties to reference classes or custom code giving you more flexibility when using the component. A common use may be to have a text field allowing you to update the heading class. In these cases follow whatever the naming convention of the default property value is when applying styles to the component. For example, if the default value is heading-style-h1, try updating it to heading-style-h3 and see how the component responds. If the default value is ' false' the other option is probably ' true'. If the default value is ' main', try setting it to large or small. If you make a change to a property and see no visual change on the component just reset the value to the default property value.

Component Slots

Some components allow you to put other components inside of them for even more flexibility (like putting a bunch of cards into a section). To do this you can simply drag a component from the sidebar into the canvas and re-arrange them how you want, or even copy and paste another component to create more of them.

It's important to note that while Webflow will allow you to put any component inside a component slot, not all slots are meant for all components, (eg, sections should not be put inside other sections) to solve this components are divided in the sidebar based on their role. As a general rule, only Cards/Slot elements should go inside of a slot within a section.

Component Naming Conventions

One other thing you'll notice is that components have different types of names related to how they are used. Often this will include several words or phrases separated by a slash. This is to help you quickly search through and add components. The most common keywords are explained below:

Global - These are components that are used structurally throughout the whole site.
Section - These are pre-built sections that you can drop onto a page and have specific style controls for.
Card - These are elements that are used inside of a component slot.
Slide - This is a card-like element specifically for a slider section.
Icon - These are icon elements

Components in this site

The components used in this site are displayed below, feel free to copy and modify them to familiarize yourself with each of their options.

Think Future-First Technology

The first step on the road to technological transformation is developing a thorough understanding of your desired destination – the modern core platform and how it differs from a legacy system.

Intelligent Insurance Operations

OneShield provides policy, billing, claims, and reinsurance unified with AI built in and backed by a white-glove partnership.

Tools To Design Your Vision

Manage the complete policy lifecycle for every line of commercial, personal, and specialty insurance with the industry’s most advanced and configurable end-to-end policy management solution.

OneShield Designer - Empower your business and technical users to configure virtually every aspect of the system, including workflow, product definition, object model, and web services.
Services Designer - Leverage our extensive catalog of coarse- and fine-grained services, supporting SOAP/REST, XML/JSON natively via configuration.
Package Designer - Customize and package multiple product coverages together into a single bundle.
Relationship Management - Allows management of all aspects of customer and partner information.
OneShield Reporting - Easily configure reports and views of client information, system transactions, financial, operational, statistical, and marketing data.

Move at the Speed of Change

Microservices architecture provides greater flexibility and scalability. OneShield Enterprise is designed to reduce expenses, improve efficiencies, and optimize service delivery.

Client Spotlight

Utica First - Client Spotlight – Utica First Insurance Company, Strategic Investment with Agents Top of Mind Learn more
PURE - Client Spotlight – PURE Insurance, 3 Key Enhancements Bring Efficiency and Growth Learn more
WestCongress - Client Spotlight – WestCongress, Startup MGA Meets Demands of Rapid Growth with Greater Efficiencies & Reduced Costs Learn more
Erie - Client Spotlight – Erie Insurance, Enhancing the Agent Experience Brings Dramatic Results Learn more

Commercial Property Preparedness: Bracing for Changing Risks

Proper portfolio valuation is becoming exponentially important as the reinsurance market tightens.

Advantage

Speed-to-Market Advantage - OneShield offers an agile and scalable policy administration platform that allows you to bring your insurance products to market quickly and efficiently.
Comprehensive Base Functionality - Our solution provides end-to-end policy and claims administration support.
Tailored To Your Needs - Our team can work with you to configure the application to align with your specific processes.
Scalable Technology - OneShield’s technology is designed to grow with your Insurance Startup.
Single Platform - Our suite of insurance software solutions is seamlessly integrated into a unified platform.
Leverageable Content - Supporting over 90 lines of business, our configurable solution offers prebuilt content and reusable workflows.
Implementation Success - Swift speed-to-value for clients through effective fusion of technology and deep insurance domain knowledge.

Frequently Asked Questions

How do I know which OneShield solution is a fit for me?

OneShield offers two distinct core platforms. OneShield Enterprise (OSE) is a configurable core platform built for complex P&C operations across personal, commercial, and specialty lines. OneShield Market Solutions (OMS) is a carrier-grade core system delivered as a managed service for commercial and specialty carriers and MGAs.