Developer
Links
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
If you use Typescript, make sure you have typescript >= 3.8 as a devDependency:
npm install typescript --save-dev
Usage
import { Button } from '@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
If you use Typescript, make sure you have typescript >= 3.8 as a devDependency:
npm install typescript --save-dev
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
If you use Typescript, make sure you have typescript >= 3.8 as a devDependency:
npm install typescript --save-dev
Usage
import { tokens } from '@equinor/eds-tokens'const {typography: {heading: { h1 },},} = tokensconst 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
<linkrel="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
<imgsrc="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.
Edit this page on GitHub