eHealth Pillar Web Components

Ehi-Pillar-Components is a web component library designed to help developers create the best experience for customers who shop for health insurance. Visit the eHealth style guide to learn more.

Ehi-Pillar-Components are just simple web Components, so they work in any major framework or with no framework at all. Most thanks to amazing work by the Stencil team

Using the Design System, EHI Pillar

While we do publish our design system together with these components, we recommend using our separate design project EHI Pillar

Installation

Run the following command using npm:

npm install ehi-pillar-components --save

If you prefer Yarn, use the following command instead:

yarn add ehi-pillar-components

Usage

1. Import the CSS directly into your project if your asset packager supports it:

import 'ehi-pillar-components/dist/collection/styles/main.css';

Otherwise include the CSS in your HTML. We suggest copying the styles file into your own project, but you may also use it directly:

<link
    rel="stylesheet"
    href="https://unpkg.com/ehi-pillar-components/dist/collection/styles/main.css"
/>

2. Include the components loader script in your project:

• Put a script tag <script src='https://unpkg.com/ehi-pillar-components/dist/ehi-landing-components.js'></script> in the head of your index.html

3. Then you can use the element anywhere in your template, JSX, html etc.

ReactDOM.render(
    <App>
        <Page title="Example app">
            // Example usage of web component here
            <section-simple color="blue" additional-classes="pb-0">
                <Button onClick={() => alert('Button clicked!')}>
                    Example button
                </Button>
            </section-simple>
        </Page>
    </App>,
    document.querySelector('#app')
);

Framework Integrations and Polyfills

Stencil Documentation

Methodology

We set out to make our components easy to use. Each of our components has a well-documented (and fully typed) public interface with strong, consistently-applied conventions. This way, developers don’t need to worry about the underlying implementation. Instead, they can focus on creating amazing experiences, like in our page builder built with Gutenberg blocks.

We ensure that our components are made for everyone. They are responsive to any screen or device. We also put a lot of effort into optimizing the performance of the components, so everyone can build inclusive experiences that work.

We make our components flexible enough to meet diverse needs. They present the information you pass in and give you smart callbacks when something has changed, but they don’t enforce any structure beyond that. No matter what type of experience you’re creating, you can use components as the building blocks of your product or feature.