Developer

Links

• ⚛️EDS React library
• EDS tokens
• EDS icons

React

This is the main implementation of the EDS, and will eventually contain accessible React components of each and every EDS component in Figma. Available components are showcased in Playground components where the different variations are showed as both real life and with code.

The API is also documented by a props table for each component.

Current component status

Installation

npm install @equinor/eds-core-react styled-components

Usage

const { Button } = '@equinor/eds-core-react'
<Button variant="outlined" color="secondary">
  Click me!
</Button>

Icons

Built on a copy of the Outlined Material Design icons, the icons have been customised and renamed for Equinor’s use and supplemented with our own icons for Equinor specific domains.

All the icons are available in the storefront, and can also be installed from NPM.

The following example uses the <Icon> component from @equinor/eds-core-react – but the icons package can also be used without React.

Installation

npm install @equinor/eds-icons @equinor/eds-core-react

Usage

import { Icon } from '@equinor/eds-core-react'
import { info_circle } from '@equinor/eds-icons'
Icon.add({ info_circle })
<Icon name="info_circle" size={24} />

Tokens

Design tokens are design decisions from Figma extracted into code, and form the basis for the EDS Core React library. For projects that don’t use React, the tokens are available as an independent NPM package that can be used to build your own implementation of the EDS in your technology of choice. The following example uses vanilla javascript.

Installation

npm install @equinor/eds-tokens

Usage

import { tokens } from '@equinor/eds-tokens'
const {
  typography: {
    heading: { h1 },
  },
} = tokens
const header = document.createElement('h1')
Object.keys(h1).forEach((token) => {
  header.style[token] = h1[token]
})
header.textContent = 'Some header'
document.body.appendChild(header)

Fonts

The Equinor typeface is available from the EDS CDN.

Usage

All the fonts

<link
  rel="stylesheet"
  href="https://eds-static.equinor.com/font/equinor-font.css"
/>

Logo

When it comes to the Equinor logo, we have two versions – primary and horizontal – and you pick the colour with a fragment identifier in the url. The following example uses the primary logo in red, other colour options are white and black – with black being the default if you omit the fragment identifier.

Usage

<img
  src="https://eds-static.equinor.com/logo/equinor-logo-primary.svg#red"
  alt="Equinor"
/>

Browser support

We support the most up to date version of evergreen browsers (browsers that auto-update), which means Chrome, Safari, Firefox and (Chromium) Edge.