Installation

Quick start guide for installing and using the Teva VIsion library.

Core library files #

For specific component usage within the legacy Actavis library (the old library), before any other javascript from this library add the core.js javascript.

Download Core JavaScript

Installing Components #

Components can be downloaded individually or combined per context.

Installation

Quick start guide for installing and using the Teva VIsion library.

@font-face files #

@font-face declarations are defined in separate css files so they can be switched easily. A @font-face css file must be placed before Core library and component files.

A font-family 'VIsion' is declared (in all cases), which is used by the library.

Some scripts require secondary fonts. When so 'VIsion-2' (and even 'VIsion-3') are used.

Font files are expected to be placed relative to the stylesheets.

In this library the relative path is ../fonts/name_of_font_file.extention.
The paths must me changed to reflect your implementation. Please edit the @font-face file accordingly.

Corresponding font files can be downloaded on this page.

Core library files #

To use the library including a modified version of Bootstrap v4.5.3 we created the core stylesheet and javascript files.

It contains font definitions scoped to components, modified grid, and customized spacing utilities. (all specific to the VIsion design).

@font-face declarations are now defined in separate files.
Core files do not need editing anymore.

Please note that this does not include the components. Components can be downloaded individually or combined per context.

One Vision library files #

Version: 0.1.25

One Teva Components is a library of components built separately as web components. Although they can be used separately, they are designed to work together in a single context.

For now, the One Teva Components library has been partially bundled within this project.

Additionally, the One Teva Components library is available as a standalone npm package, distributed through a private npm repository, which this project relies on.

In the One Teva Components all sites are themed so they are not Teva Brand specific. For Teva, also the theme files are included in this project.

Instructions:

Download the stylesheet and javascript files.
Include the preload link high up in your projects <head>, give it an id
Include javascript file after the preload link in your projects <head>, add data-preload with the id of the preload link.
Include the theme.teva.css stylesheet in your projects <head>.
Incude style tag with specific rules in the <head>

<link as="style" href="/path/to/your/vision-one-vision-components.css" id="id-of-the-preload-link" rel="preload">
<link href="/path/to/your/tokens.css" rel="stylesheet">
<link href="/path/to/your/vision-one-vision-typography.css" rel="stylesheet">
<script data-preload="id-of-the-preload-link" src="/path/to/your/vision-one-vision-components.js" type="module"></script>
<!-- teva is a theme -->
<link href="/path/to/your/theme.teva.css" rel="stylesheet">
<style>
  :not(:defined) {
    display: block;
    height: 100vh;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }
</style>

Teva 2025 library files #

Version: 0.1.25

One Teva Components is a library of web components specifically created for Teva Reband (Teva 2025). These components are designed to align with the Teva brand identity.

Currently it contains the following extra components:

<vision-banner-duotone> - The <vision-banner-duotone> provides a visually striking banner with duotone image effects. docs.

Instructions:

Download the stylesheet and javascript files.
Include the preload link high up in your projects <head>, give it an id
Include javascript file after the preload link in your projects <head>, add data-preload with the id of the preload link.
Include the theme.teva.css stylesheet in your projects <head>.
Incude style tag with specific rules in the <head>
The theme.teva.css file is a theme file that should be used to the components.

<link as="style" href="/path/to/your/vision-teva-2025-components.css" id="id-of-the-preload-link" rel="preload">
<link href="/path/to/your/tokens.css" rel="stylesheet">
<link href="/path/to/your/vision-teva-2025-typography.css" rel="stylesheet">
<script data-preload="id-of-the-preload-link" src="/path/to/your/vision-teva-2025-components.js" type="module"></script>
<!-- teva is a theme -->
<link href="/path/to/your/theme.teva.css" rel="stylesheet">
<style>
  :not(:defined) {
    display: block;
    height: 100vh;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }
</style>

Deprecated: One Teva library files #

Important naming change: One Vision files now use a new naming convention: vision-one-vision-... instead of vision-one-teva-....

This change was made to better align with the multibrand purpose of the components, as reflected in the "one-vision" name. As the components in this set can be used across multiple brands. Use One Vision library files instead.

Please update your file references accordingly when migrating from the deprecated files below.

Deprecated: Granix library files #

Deprecated: Use One Vision library files instead with option show-secondary-logo-on-scrolldown="true" on <vision-page-header> to show the secondary logo, when layout is expanded, to have the same behaviour

Please update your file references accordingly when migrating from the deprecated files below.