urlscan.io logo urlscan.io
SecurityTrails logo

emdgroup-liquid.github.io Open in urlscan Pro
2606:50c0:8000::153  Public Scan

Back to summary
Submitted URL: http://lds.merck.design/
Effective URL: https://emdgroup-liquid.github.io/liquid/index.html
Submission: On September 05 via api from US — Scanned from DE

Form analysis 1 forms found in the DOM

<form role="search" autocomplete="off"><ld-input aria-expanded="false" aria-controls="docs-search-results-list" class="docs-search__input ld-input ld-input--lg hydrated" id="docs-search-input" spellcheck="false" autocomplete="off"><svg
      aria-hidden="true" slot="start" class="docs-search__input-icon" fill="none" viewBox="0 0 18 19">
      <ellipse cx="7.54523" cy="7.74543" stroke="#091734" stroke-width="2" rx="6.54523" ry="6.54548"></ellipse>
      <path stroke="#091734" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12.6367 12.8362l4.3635 4.3636"></path>
    </svg></ld-input></form>

Text Content

Liquid Oxygen Documentation

Liquid Docs


Dark UISearch
 * Introduction
   
   
    * Why Liquid Oxygen
    * Getting started
      
      
       * React
       * Vue

 * Guides
   
   
    * CSS vs. Web Components
    * Component assets
    * Type checking and intellisense
    * Server-side rendering
    * Event handling
    * Form validation
    * Tailwind CSS integration
    * Design tokens
    * Testing
    * Sandbox applications
    * Troubleshooting
      
      
       * Popped-out element is rendered in wrong container
       * Failed to execute removeChild on Node
   
    * FAQ
    * Contributing

 * Globals
   
   
    * Animations
    * Border-radius
    * Colors
    * Focus
    * Fonts
    * Shadows
    * Spacings
    * Theming
    * Typography

 * Components
   
   
    * Accordion
      
      
       * Accordion Panel
       * Accordion Section
       * Accordion Toggle
   
    * Background Cells
    * Badge
    * Breadcrumbs
      
      
       * Crumb
   
    * Button
    * Card
      
      
       * Card Stack
   
    * Checkbox
    * Circular Progress
    * Context Menu
      
      
       * Menu
       * Menuitem
       * Menuitem Group
   
    * Cookie Consent
    * Header
    * Icon
    * Input
    * Input Message
    * Label
    * Link
    * Loading Indicator
    * Modal
    * Notice
    * Notification
    * Pagination
    * Progress
    * Radio Button
    * Screen Reader Live
    * Screen Reader Only
    * Select
      
      
       * Option
       * Option Group
   
    * Sidenav
      
      
       * Sidenav Accordion
       * Sidenav Back
       * Sidenav Header
       * Sidenav Heading
       * Sidenav Navitem
       * Sidenav Separator
       * Sidenav Slider
       * Sidenav Subnav
       * Sidenav Toggle Outside
   
    * Slider
    * Stepper
      
      
       * Step
   
    * Switch
      
      
       * Switch Item
   
    * Table
      
      
       * Table Body
       * Table Caption
       * Table Cell
       * Table Colgroup
       * Table Column
       * Table Footer
       * Table Head
       * Table Header
       * Table Row
       * Table Toolbar
   
    * Tabs
      
      
       * Tab
       * Tab List
       * Tab Panel
       * Tab Panel List
   
    * Toggle
    * Tooltip
    * Typography

 * Data Visualization
   
   
    * Getting Started

© 2023, Merck KGaA, Darmstadt, Germany


Get in touch:GitHub discussions
Teams

LicenseTerms and ConditionsPrivacy StatementImprint

Close nav Close navOpen nav


CONTENT

 1. Why Web Components?
 2. Getting Started
 3. Sandbox apps
 4. Quick start
 5. Design
 6. Links
 7. Contributing
 8. License

Edit this page on GitHub
(external link) Liquid Oxygen



Liquid Oxygen is a UI component library based on the Liquid Design System,
focusing on accessibility and interoperability. It is built with Stencil.js and
contains, inter alia, CSS Components and Web Components, bundled in several
bundle formats, which you can use in a wide variety of platforms and projects.

Using Liquid Oxygen in your project is the recommended way to comply with the
Liquid Design Standards and ensures a consistent look and feel across all
related applications. You can read more about why you should use Liquid Oxygen
on the Why Liquid Oxygen page.


WHY WEB COMPONENTS? #

Web Components are ideal for building reusable, framework-agnostic and
future-proof UI components. They are part of the Web standard and are supported
by all relevant browsers.

The framework-agnostic nature of Web Components allows you to use Liquid Oxygen
in any framework (e.g. React, Vue, Solid or Svelte) or even without a framework.
This way, Liquid Oxygen does not demand any specific technology, and you can use
the stack which fits your project best.

Although Liquid Oxygen components are Web Components, we provide first class
support for React.


GETTING STARTED #

You can add Liquid Oxygen easily to your existing project. It integrates
seamlessly with any framework or library. See our comprehensive guides and
detailed explanation of how to integrate Liquid Oxygen into your project.

 * Gettings Started
 * React
 * Vue


SANDBOX APPS #

Besides the guides, we have created several sandbox apps to demonstrate the
usage of Liquid Oxygen in various additional frameworks and libraries. You can
find them on the Sandbox apps page.


QUICK START #

You are curious and just want to try out Liquid Oxygen? Fastest way to get
started with Liquid Oxygen is to use the jsdelivr CDN.
Just set the liquid asset path and import the stylesheet and the loader module.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@emdgroup-liquid/liquid/dist/css/liquid.css"
/>
<script type="module">
  // Import the loader
  import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@emdgroup-liquid/liquid/dist/loader/index.js'

  // Register the custom elements
  defineCustomElements()
</script>Copy to clipboard

Now you can use the Liquid Oxygen Web Components in your website.

<ld-button>Click me</ld-button>Copy to clipboard

See the full example in the Liquid + CDN Sandbox.

Although this is the fastest way to add Liquid Oxygen components to a website,
we recommend using Liquid Oxygen together with a frontend library (e.g. React,
Vue) and a bundler (e.g. vite, webpack).


DESIGN #

Find the Liquid Design System on Figma. You can use the Figma file to get a
better understanding of the design system and its usage.


LINKS #

 * Feature backlog
 * Changelog
 * Breaking changes


CONTRIBUTING #

If you'd like to contribute to the project, please read our code of conduct.
Then proceed to the contributing docs.


LICENSE #

Liquid Oxygen is available under a custom license which restricts its usage to
applications created for or by Merck KGaA, Darmstadt, Germany as well as its
vendors.

Why Liquid OxygenGet Started
Why Liquid OxygenGet Started
Design System Library