What is EF?

Element Framework (EF) is reusable UI components which is part of Refinitiv Workspace's SDK family. EF provides a collection of UI elements that includes theming capability with the Refinitiv's design system.

It aims to create a consistent approach to building, reusing and sharing UI components in a modular way to reduce duplication of effort and increase efficiency.

EF elements are built with web components which is a standard web technology that can be utilized across all browsers and can be used with any JavaScript frameworks.

Installation

EF elements are published as one package. You are also require to install theme package as it will provide essential native styles for typography, theme css variables, etc.

npm install @refinitiv-ui/elements
npm install @refinitiv-ui/halo-theme

Start using an element by importing the element and its theme in your app.

// import element
import '@refinitiv-ui/elements/lib/button';
import '@refinitiv-ui/elements/lib/panel';

// import native styles for typography, css variables, etc.
import '@refinitiv-ui/halo-theme/dark/imports/native-elements';

// import element's Halo dark theme
import '@refinitiv-ui/elements/lib/button/themes/halo/dark';
import '@refinitiv-ui/elements/lib/panel/themes/halo/dark';

Now, you can use the elements in your app.

.content {
    width:100%;
    height: 500px;
}

<ef-panel class="content" spacing>
    <h2>Hello EF!</h2>
    <ef-button cta>OK</ef-button>
</ef-panel>

The font "Proxima Nova Fin" shall only be used within Refinitiv products or services. The copyright owner must approve any use of such font outside of Refinitiv products or services, which may be subject to a fee. Please see https://www.fontspring.com/lic/fontspring/webfont#license_text

Font styles in Halo theme are only Regular, Semi Bold and Bold. Do not use 'Itatic' style due to the license on Proxima Nova Fin font.

Build your first app

Start building your first application using EF with your favourite frameworks: Angular, React, Vue or without using framework, Vanilla.