• Introduction
    • Why Liquid
    • Getting started
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • React bindings
    • Tailwind CSS integration
    • Design tokens
    • Sandbox applications
    • FAQ
  • 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
    • Checkbox
    • Circular Progress
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outsid
    • Slider
    • Switch
      • Switch Item
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Default
  2. Cell types
    1. bioreliance
    2. f
    3. hexagon
    4. millipore
    5. qa
    6. safc
    7. sigma
    8. t
    9. tile
  3. Custom position, size and colors
  4. CSS Variables
  5. Properties
  6. Shadow Parts
Components Background Cells

ld-bg-cells #

A background pattern with the Merck cells as additional visual element.

Default #

<ld-bg-cells class="box1-16/9"></ld-bg-cells>

<style>
  .box1-16\/9 {
    padding-top: 56.25%;
  }
</style>

Cell types #

bioreliance #

<ld-bg-cells type="bioreliance" style="height: 16rem;">
</ld-bg-cells>

f #

<ld-bg-cells type="f" style="height: 16rem;"></ld-bg-cells>

hexagon #

<ld-bg-cells type="hexagon" style="height: 16rem;"></ld-bg-cells>

millipore #

<ld-bg-cells type="millipore" style="height: 16rem;"></ld-bg-cells>

qa #

<ld-bg-cells type="qa-x2f-qc" style="height: 16rem;"></ld-bg-cells>

safc #

<ld-bg-cells type="safc" style="height: 16rem;"></ld-bg-cells>

sigma #

<ld-bg-cells type="sigma-aldrich" style="height: 16rem;"></ld-bg-cells>

t #

<ld-bg-cells type="t" style="height: 16rem;"></ld-bg-cells>

tile #

<ld-bg-cells type="tile" style="height: 16rem;"></ld-bg-cells>

Custom position, size and colors #

<ld-bg-cells class="box3-16/9"></ld-bg-cells>

<style>
  .box3-16\/9 {
    --ld-bg-cells-bg-col: var(--ld-col-vm-300);
    --ld-bg-cells-pattern-col: var(--ld-col-vm-600);
    --ld-bg-cells-position: bottom left;
    --ld-bg-cells-size: 150%;

    padding-top: 56.25%;
  }
</style>

CSS Variables #

Variable Description Default
--ld-bg-cells-bg-col Background color Primary color of the current theme
--ld-bg-cells-pattern-col Pattern color (cells) Secondary color of the current theme
--ld-bg-cells-position Position of the cells Individual per cell type
--ld-bg-cells-size Size of the cells Individual per cell type

Properties #

Property Attribute Description Type Default
key key for tracking the node's identity when working with lists string | number undefined
ref ref reference to component any undefined
type type Cells pattern "bioreliance" | "f" | "hexagon" | "millipore" | "qa-x2f-qc" | "safc" | "sigma-aldrich" | "t" | "tile" 'safc'

Shadow Parts #

Part Description
"content" Element wrapping the slot
"pattern" Element containing the cells pattern